HTML和css技术

html的介绍

html技术简称超文本语言技术，这个技术主要是用来制作网页的；

  • 【历史】
    html1.0, html2.0,html3.0, html4.0, xhtml1.0;
    超文本语言技术是由一个叫做W3C的组织发布和维护的；

  • 【作用】
    html的作用：html主要处理网页当中的文字信息和图片信息，以及负责网页的语义，还有网页结构；
    对于一个静态网页来讲它的80%的工作基本上都是由CSS来完成的只有20%的工作是由html来完成的；
    网页有一个作用主要是用来传递给人们信息；

  • 【w3c标准】
    wed前端标准：

  1. + 1.html--结构标准； 
  2. + 2. CSS--样式标准（网页）； 
  3. + 3. js --行为标准；  

web前端技术到底是用来干什么的，它主要就是用来制作网页的；

网页的基本结构

  • 写网页就好比写信，写信有书信的格式，写网页也有网页的基本格式；

  • 《html语言的语法要求》：

  1. 1. 所有的html语言必须写在标签符号里面：<>; 
  2. 2. 所有的html标签必须成对出现，并且区分首位； 
  3. 3. 尾标签用一个关闭符号标注 /；  

  • 标签属性的语法要求：

  1. + 键值对格式：  
  2. - K代表属性名称； 
  3. - V代表属性值； 
  4. - 键值对的格式就是 k="V" k="v"; 
  5. - 一个标签可以写多个属性，但是属性之间是不可以混用的；  

今天学习的标签

  1. <html> 
  2. <head> 
  3. <title>网页的基本结构<title> 
  4. </head> 
  5. <body> 
  6. 网页的内容 
  7. </body> 
  8. </html>  

html---表示一个网页整体；
head---表示网页的头部；
title---表示网页的名称；
body---表示网页的身部；主体部分；将来给用户看到的一切信息都要放在这个标签里面， body标签的两个属性：bgcolor---背景颜色；background---背景图；规律：永远是背景色在下；背景图在上；
注：head标签内部一般用来盛放给浏览器看的东西

h1---标题标签，表示一个标题，在html当中标题一共分为6级h1--h6;
p---段落标签表示一个段落，段落标记P具有一个属性 align,它表示对齐方式有3个值分别表示left左对齐；right右对齐；center居中对齐；
font---文字标签；作用它可以用来控制任何的文字，文字的三属性；在HTML当中文字三属性指的是： 字体（face），字号(size)，颜色(color)，这三个属性是font标签专有的；
hr注意它是一个单标签；它代表一条水平分割线；它有3个属性：size表示线条的粗细；color亦博表示线的颜色；align表示对齐方式；width表示宽度；
b---加粗标签；
u---下划线标签；
i---斜体标签；
br---换行标签，它是一个单标签；
img---表示定义一个图像；

  1. **《img标签的属性》：**  
  2. 1. src 表示图片的路径；  
  3. 2. width 表示图片的宽度；  
  4. 3. height 表示图片的高度；  
  5. 4. border 边框属性：它的值可以设置边框的厚度；  
  6. 5. title 设置提示文本；  
  7. 6. alt 设置图像没有找到时候的替换文本；  
  8. 小知识点：对于img标签来讲有一个属性是必须要指定的就是src属性;如果不指定这个属性它根本就不显示任何图像；  
  9. 小知识点：如何实现等比缩放的图片；  
  10. 方法：将图像的宽度和高度属性删除，只给出其中一个即可，另一个会按照比例进行缩放； 

标签属性

标签属性的作用：它可以对选中的信息进行详细的调节；标签的属性有一个叫做键值对的语法要求;

浏览器

目前全球有5大浏览器厂商，分别是ie ,火狐，谷歌，欧朋，苹果；
我们制作的网页运行平台就是浏览器；好比写信要到邮局取邮寄，那么浏览器就相当于邮局；
浏览器是一个平台它只认识超文本语言；不认识其他任何语言；也就是说他可以编译超文本语言；

DW快捷键

ctrl+t----环绕标签；
ctrl+h----唤醒代码提示；
shift+enter ----可以直接生成换行标签；
F12----将当前的网页在浏览器中发布；
ctrl+alt+i 插入图像快捷键；

相对路径和绝对路径

  • 《相对路径》
    实际上不管哪种路径方式都是我来查找到目标文件；相对路径是从自身出发去寻找目标文件;
    相对路径我们只需要能够解决；
    同级查找；---直接书写文件名+后缀格式；
    自己查找；---先查找文件夹名称然后通过关闭符号查找文件夹里面的文件；
    上级查找；---上级查找的核心主要是通过一个 ../的符号表示向上一级；
    相对路径不能跨盘符；

  • 绝对路径
    实际工作当中不推荐使用，因为它有一个缺点就是不可移植，不可移动；因为绝对路径是从盘符出发去寻找目标文件；
    绝对路劲的使用方式特别简单我们只需要将图片丢入浏览器在地址栏中就会显示图片的绝对路径直接复制粘贴这个路径即可；

HTML当中的颜色模式

在超文本语言当中可以通过两种方式来表示颜色；

  1. 通过16进制方式表示色织：规律：#红绿蓝；

  2. 通过颜色对应的英文名称；blue，red,yellow,green;

网页当中常用的图片格式

  1. jpg: 普及率最广的一种图片格式优点自身质量小；便于传输；缺点不能实现透明效果

  2. png： 优点：能够实现透明效果，确定：自身质量较大；

  3. gif: 优点：也能够实现透明效果，而且自身质量较小，能够实现动画效果，缺点：但是图像不够清晰；

HTML笔记1的更多相关文章

  1. git-简单流程（学习笔记）

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  2. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. NET Core-学习笔记（三）

    这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...

  7. springMVC学习笔记--知识点总结1

    以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...

  8. 读书笔记汇总 - SQL必知必会（第4版）

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  9. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  10. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

  1. cvc-elt.1: Cannot find the declaration of element 'beans'

    @(编程) 现象描述 导入的一个eclipse项目报错,各种方法都无法解决,报错信息如下: cvc-elt.1: Cannot find the declaration of element 'bea ...

  2. filter 过滤序列

    class filter(object): """ filter(function or None, iterable) --> filter object Ret ...

  3. 第二次作业----自学c++的选择与计划

    1.选择慕课网进行学习的原因 由于本来寒假是打算学习java的(如上篇随笔所言),所以向之前已经自学的同学问如何找教学视频,他就向我推荐了慕课网,在看了几集java的教学视频之后觉得慕课网挺好用的,所 ...

  4. CodeForces 709A Juicer (水题， 模拟)

    题意:给定 n 个桔子的大小,一个杯子的容积,一个最大限度,挨着挤桔子汁,如果大小大于限度,扔掉,如果不杯子满了倒掉,问你要倒掉多少杯. 析:直接按要求模拟就好,满了就清空杯子. 代码如下: #pra ...

  5. Struts2 高危漏洞补丁版本为: Struts 2.3.15.1

    Struts2 昨天爆出高危漏洞,黑客利用这个漏洞可以执行任意命令(包括恶意的jsp代码),轻松绕过您的验证系统,登陆您的网站后台,使您的网站后台密码形同虚设!! 目前Struts2官方已经发布了一个 ...

  6. Mahalanobis Distance(马氏距离)

    (from:http://en.wikipedia.org/wiki/Mahalanobis_distance) Mahalanobis distance In statistics, Mahalan ...

  7. JedisPoolConfig配置

      JedisPoolConfig config = new JedisPoolConfig();   //连接耗尽时是否阻塞, false报异常,ture阻塞直到超时, 默认true config. ...

  8. 配置Redis主从复制

    [构建高性能数据库缓存之redis主从复制][http://database.51cto.com/art/201407/444555.htm] 一.什么是redis主从复制? 主从复制,当用户往Mas ...

  9. 复选框输入Android Studio 如果修改LogCat的颜色，默认全是黑色看着挺不舒服的

    今天一直在查找复选框输入之类的问题,上午正好有机会和大家分享一下. 怎么找到并表现LogCat这里就不需要再讲了吧,主要说一下本篇的主题,如何修改他的颜色 .我们在使用Eclipse的时候应该都用过L ...

  10. C# String.Format

    C 货币 string.Format("{0:C3}", 2) ＄2.000 D 十进制 string.Format("{0:D3}", 2) 002 E 科学 ...