3万字干货HTML+CSS入门指南（建议收藏）

admin 管理员组

文章数量: 887019

什么是浏览器

• 浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已

• 常见主流浏览器
  

• 浏览器市场份额-国内统计
• 浏览器市场份额-国外统计

• 不同的浏览器有不同的浏览器内核， 浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现
  • IE内核 Trident
  • 谷歌内核 WebKit / Blink
  • 火狐内核 Gecko
  • Safarri内核 WebKit
  • 欧朋内核 Presto

什么是服务器

• 服务器也是电脑，只不过是比我们的电脑配置更高的电脑，并且24小时不断电，不关机的计算机
• 服务器是专门用于存储数据电脑， 访问者可以访问服务器获得服务器上存储的资源
• 服务器一旦关机，访问者就无法访问
  

访问网页原理

浏览器请求数据的原理

• 我们是如何通过浏览器查看网页上的内容的？

• 1.打开IE缓存文件夹

  • C:\Users\Jonathan_Lee\AppData\Local\Microsoft\Windows\Temporary Internet Files
  • Jonathan_Lee为个人电脑用户名名称

• 2.清空该文件夹
  

• 3.用IE打开网页
  

• 4.发现文件夹下多了很多文件（.html、.css、.js、.png等）， 仔细观察不难发现其实这些文件都是被访问网页上的内容

• 5.结论

  • 访问网页时是有真实的、物理的文件传输的
  • 网页不是一个文件，而是一堆文件组成的
  • 我们之所以平常感觉第二次访问比第一次访问快的原因就是，第一次访问时已经将所有文件缓存到了本地

浏览器请求数据的过程

• 1.按下回车时浏览器根据输入的URL地址发送请求报文

• 2.服务器接收到请求报文，会对请求报文进行处理

• 3.服务器将处理完的结果通过响应报文返回给浏览器

• 4.浏览器解析服务器返回的结果，将结果显示出来
  

• 请求过程验证

  • 1.利用chome浏览器打开一个网页
  • 2.打开开发人员工具
  • 3.打开Network查看请求报文和响应报文
    • 3.1请求报文
    • 一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分
      
    • 3.2响应报文
    • 一个HTTP响应报文由响应行、响应头、响应体组成
      
      

什么是URL

• 1.我们在浏览器的地址栏中输入的地址其实就是URL

• 2.URL格式：

  • 127.0.0.1/index.html （浏览器会自动补全http:和：80）
  • http://127.0.0.1/index.html （浏览器会自动补全：80）
  • http://127.0.0.1:80/index.html （完整格式）
  • 协议类型://ip地址:端口号/资源路径/资源名称

• 3.URL拆分

  • 网络协议类型 http://
  • 服务器IP地址 127.0.0.1
  • 服务器端口号 :80
  • 资源路径 网页在服务器上的路径
  • 资源名称 index.html

• 4.URL拆分后每一部分的作用

• 4.1服务器IP地址 和 服务器端口号它们两的作用：

  • 告诉浏览器要去什么地方才能找到对应的服务器， 也就是告诉浏览器服务器的详细地址
  • 服务器IP地址相当于现实生活中的地址； 例如：广州市天河区棠安苑
  • 服务器端口号相当于现实生活中的门牌号码； 例如： 9栋909室
  • 那么如果将地址和门牌号码结合在一起， 就是我的详细地址

• 4.2资源名称它的作用：

  • 告诉服务器我需要获取哪一个文件

• 4.3资源名称

  • 需要访问的文件名称

• 5.补充

  • URL全称Uniform Resource Locator(统一资源定位符)， 互联网上的每一个资源都有一个唯一的URL地址
  • 由于IP地址全都是数字， 没有任何的含义，比较难以记忆。 所以在访问网页时最常见的不是IP地址而是“域名”（一串有含义的字母OR数字）
  • 好比： http://www.baidu AND http://111.13.100.92:80/

什么是HTTP协议

• 1.HTTP是Hypertext Transfer Protocol的缩写, 超文本传输协议

• 2.什么是协议?

  • 在现实生活中有很多的协议, 例如租房协议/买卖协议/离婚协议
  • 无论是什么协议他们都是一个共同点, 就是用来规范/约束某一类事物

• 3.沟通问题?

  • 沟通最常见的问题就是语言不通, 例如中国人和美国人沟通, 一个人说中文, 一个人说英文, 如果两个人都不懂中文或者英文, 那么就会出现沟通问题
  • 如果要想解决沟通文件, 是不是需要先拟定规定, 两个人都说中文, 或者两个人都说英文, 或者请一个既懂中文又懂英文的翻译

• 4.HTTP协议是用来规范/约束哪一类事物?

  • 浏览器访问网页其实就是去服务器请求数据, 所以浏览器需要和服务器沟通, 所以也会存在沟通问题
  • HTTP协议就相当于我们让两个人都说中文或者都说英文一样, 就是提前规范两个人之间如何沟通, 也就是规范/约束浏览器和服务器之间如何沟通

其它知识储备

• 在Windows系统中如何查看文件的扩展名

  • 默认情况下Windows系统是不显示文件的扩展名的, 但是作为一个开发者而言, 查看文件的扩展名是我们的必备技能
  • win10: 随便打开一个文件夹–>点击查看–>将文件扩展名的选项勾选上
    

• 电脑上的一个文件是可以"同时"被多个软件打开的, 不同的软件打开可能会有不同的效果

  • 例如: 同一个index.html文件可以被多个浏览器和记事本一起打开
  • 例如: .html文件通过浏览器打开不可以编辑, 通过记事本打开可以编辑

• 什么是纯文本文件?

  • 我们Windows电脑上有一款默认安装好的软件叫做记事本. 这款软件就是专门用来打开纯文本文件的, 所以只要能够被记事本打开, 并且能够正常显示的文件都是纯文本文件
  • .html的文件可以被记事本打开, 并且能够正常显示,所以.html文件是一个纯文本文件

什么是HTML

• HTML其实是HyperText Markup Language的缩写, 超文本标记语言

HTML的作用

• 1.首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名为.html, 然后再利用浏览器打开

郑伊健

郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。[1] 

1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》获得十大中文金曲奖。1996年至1997年连续两次获得”台湾十大偶像”奖。

• 2.打开之后发现显示的格式不对, 不对的原因是因为在纯文本文件中所有文字都是同级别的, 浏览器不知道哪些文字代表什么意思. 也就是浏览器不知道哪些文字是标题, 哪些文字是段落…, 所以导致了显示的格式不正确

• 3.正是因为如此, 所以HTML应用而生. HTML就只有一个作用, 它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.

  • 这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的
  • 所以正是因为HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"

<h1>郑伊健</h1>

<p>郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。[1] </p>

<p>1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》获得十大中文金曲奖。1996年至1997年连续两次获得”台湾十大偶像”奖。</p>

• 注意事项:

  • 虽然我们利用H1标签描述一段文本之后, 这段文本在浏览器中显示出来会被放大和加粗, 看上去我们是利用HTML的标签修改了被描述的那段文本的样式. 但是一定要记住, HTML只有一个作用, 它是专门用来给文本添加语义的, 而不是用来修改文本的样式的

• H1标签它的作用是什么?

  • 错误: H1标签可以用来修改文字的大小, 并且还可以将文字加粗
  • 正确: H1标签的作用是用来告诉浏览器, 哪些文字是标题. 也就是H1标签是专门用于给指定的文字添加标题语义的

HTML发展史

IETF简介

• IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是"互联网工程任务组"
• IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等

W3C简介

• W3C是英文World Wide Web Consortium的缩写， 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
• W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
• W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。

Tim Berners-Lee（蒂姆·伯纳斯-李），万维网之父、html设计者、w3c创始人
百度百科

网页的固定格式

• 1.编写网页和写信一样都有一套规范和要求, 这套规范和要求中规定了写信的固定格式
• 2.写信基本结构

敬爱的江哥:
      您好!
      正文正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文正文正文正文正文正文正文正文
      此致
敬礼!
                                                              你的朋友 伊健
                                                              2066年6月6日

• 3.编写网页的步骤:
  3.1.新建一个文本文档
  3.2.利用记事本打开
  3.3.编写THML代码
  3.4.保存并且修改纯文本文档的扩展名为.html
  3.5.利用浏览器打开编写好的文件

• 4.网页基本结构:

<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>

• 5.通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签

html标签

• 作用:
  • 用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档
• 注意点:
  • 其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

head标签

• 作用:
  • 用于给网站添加一些配置信息
  • 例如:
    • 指定网站的标题 / 指定网站的小图片
    • 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
    • 外挂一些外部的css/js文件
    • 添加一些浏览器适配相关的内容
• 注意点:
  • 一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到

title标签

• 作用:
  • 专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题
• 注意点:
  • title标签必须写在head标签里面

body标签

• 作用:
  • 专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
• 注意点:
  • 虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中
  • 一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

head内部标签

meta标签

• 1.为什么会有乱码现象?

  • 因为我们在编写网页的时候没有指定字符集

• 2.如何解决乱码现象?

  • 在head标签中添加<meta charset="GBK" />, 指定字符集

• 3.什么是字符集

  • 字符集就是字符的集合, 也就是很多字符堆在一起. 其实字符集很像我们古代的"活字印刷术", 在活字印刷术中就是将很多刻有汉字的小章放到一个盒子中, 然后需要印刷文字的时候再去盒子中取这个小章出来用, 正是因为如此, 所以导致了乱码问题
  • 假设北方人和南方人都拥有装满小章的盒子, 但是南方人和北方人在盒子中存储小章的顺序不太一样, 那么这个时候如果北方人和南方人都需要去取"李"字, 在南方人记忆中李字在第6个盒子的第6行的第6列中(666), 在北方人的记忆中李字在第8个盒子的第8行的第8列中(888). 那么此时如果让一个南方人去北方人的盒子中取"李"字的小章, 必然找不到, 所以就导致了乱码问题
  • 这个地方北方人的存储小章的盒子和南方人存储小章的盒子就对应网页中指定的字符集, 在网页中我们常见的字符集有两个GBK/UTF-8, GBK就对应北方人存储的盒子, UTF-8就对应南方人存储的盒子
  • 所以在网页中指定字符集的意义就在于告诉浏览器我用的是哪个盒子, 你应该如何去查找才能找到对应的正确的内容

• 4.GBK(GB2312)和UTF-8区别

  • GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文
    • 体积比较小
  • UTF-8里面存储的世界上所有的文字
    • 提交比较大

• 5.那么在企业开发中我们应该使用GBK(GB2312)还是UTF-8呢?

  • 如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快
  • 如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8
  • 懒人推荐: 不管三七二十一, 一律写UTF-8即可

• 6.注意点:

  • 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
  • 所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

HTML标签

HTML标签分类

• 单标签
  • 只有开始标签没有结束标签, 也就是由一个<>组成的

<meta charset="UTF-8" />

• 双标签
  • 有开始标签和结束标签, 也就是由一个<>和一个</>组成的

<html>
</html>

HTML标签关系分类

• 并列关系(兄弟/平级)

<head>
</head>
<body>
</body>

• 嵌套关系(父子/上下级)

<head>
		<meta charset="UTF-8" />
		<title>百度一下,你就知道123</title>
</head>

DTD文档声明

• 什么是DTD文档声明?

  • 由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的. 浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染我们的网页

• DTD文档声明格式:

<!DOCTYPE html>

• 注意事项:
  • <!DOCTYPE>声明必须是 HTML 文档的第一行，位于 标签之前
  • <!DOCTYPE> 声明不是 HTML 标签
  • <!DOCTYPE> 声明没有结束标签
  • <!DOCTYPE> 声明对大小写不敏感
  • 这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制
    • 不写也能运行
    • H5网页里面用H4也能运行

• HTML5之前有2大种规范, 每种规范中又有3小种规范

• HTML的DTD文档声明和XHTML的DTD文档声明有何区别?

  • XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等, 而HTML会更加松散没有这么严格

• Strict表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些标签不能使用

  • 例如font标签/u标签等
  • font标签可以修改一个文本的字号、颜色、字体,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而font标签是用于修改样式的,所以在Strict中是不能使用font标签
  • u标签可以给一个文本加上下划线,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u标签是用于添加下划线是样式.所以在Strict中是不能使用u标签

• Transitional表示普通的, 这种模式是没有一些别的要求

  • 例如可以使用font标签、u标签等
  • 但是在企业开发中不会使用这些标签,因为这违背了HTML的本质, 而是将这些标签作为css的钩子使用

• Frameset表示框架, 在框架的页面使用

  • 后面学到框架/NodeJS 再做详细了解

• 常见的DOCTYPE有如下几种

HTML4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5: 
<!DOCTYPE html>

• 有这么多规范我们学习过程中到底使用哪一种比较合适呢?
  • 无论是HTML还是XHTML,过去企业级开发中用的比较多的大部分都是Transitional类型的文档声明
  • 但是HTML5的时代已经到来,以上6中规范仅仅作为了解, 以后都用HTML5类型的文档声明, HTML5向下兼容(求此刻WC3心里阴影面积)
  • 目前国内一线网站都更新到了HTML5的文档声明, 所以后续授课也是全程使用HTML5的文档声明
    • www.baidu (B)
    • www.taobao (A)
    • www.qq (T)
    • www.sohu(大奇葩)

HTML和XHTML、HTML5区别

• 在HTML的早期发展中，大部分标准都是所谓的retro-spec，即先有实现后有标准。在这种情况下，HTML标准不是很规范，浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面

• html语言本身有一些缺陷（例如： 内容和形式不能分离；标签单一；数据不能复用等等），随着xml的兴起人们希望xml来弥补html的不足，但是目前有成千上万的网页都是用html编写的，所以完全使用xml来替代html还为时过早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是实现从html向xml的过度

• 为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增加任何新的标签，只是按照XML的要求来规范HTML，并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查，如果页面有HTML错误，就要显示错误信息。但是由于已有的web页面中已经有了大量的错误，很多开发者拒绝使用新的MIME type。W3C不得已，在XHTML 1.0的标准之后增加了一个附录C，允许开发者使用XHTML语法来写页面，同时使用旧的MIME type，application/html，来分发页面

• W3C随后在XHTML 1.1中取消了附录C，即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用

• 有了XHTML的教训，W3C在制定下一代HTML标准时（HTML5），就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性，但是它最重要的一个特性是，不会break已有的网页。你可以将任何已有的网页的第一行改成<!DOCTYPE html>，它就成也一个HTML5页面，并且可以照样在浏览器里正常的展示。

• 简而言之

  • HTML语法非常宽松容错性强;
  • XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;
  • HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

.htm 和 .html扩展名区别

• DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
• 但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
• 所以htm是为了兼容过去的DOS命名格式存在的

开发工具(工欲善其事必先利其器)

• 为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 不用每天编写很多没有意义的重复代码, 提升大家的开发效率今后的课程中我们统一采用**最高级高发工具**来编写网页

常见的前端开发工具

• 记事本: 提示功能较差
• editplus/nodepad++: 提示功能较差
• Dreamwaver: 更偏向设计
• Sublime: 轻量级,自带功能不太全, 但是插件十分丰富
• WebStorm: 重量级, 自带功能全面
  
• 其它ide(zend studio、netbean等)
• 为了让大家更快的融入到编程的世界中, 不被繁琐的英语单词所困扰, 今后的课程中我们统一采用**最牛逼最高级**的高发工具WebStorm

WebStorm安装和使用

• 安装软件
  
  
  
  
  
  
  
  

• 破解软件(工作之后一定要用正版)
  
  
  
  
  
  

• 汉化软件
  
  

• 设置模版
  

• 创建文件
  
  
  

• WebStorm常见快捷键

• 如何在WebStorm中利用快捷键创建一个新的.html的文件

  • 同时按下键盘上的Ctrl + Alt + Insert

• 如何在WebStorm中让光标移动到当前行的末尾

  • 按下键盘上的End键即可

• 如何在WebStorm中让光标移动到当前行的最前面

  • 按下键盘上的Home键即可

• 如何在WebStorm中让光标在多行中闪烁

  • 按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标即可

• 如何在WebStorm中快速的复制光标所在的那一行

  • 按下键盘上的Ctrl + D

• 如何在WebStorm中快速的删除光标所在的那一行

  • 按下键盘上的Ctrl + X

• 如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签

  • 按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签即可

基础标签学习

H系列标签(Header 1~Header 6)

• 作用:

  • 用于给文本添加标题语义

• 格式:

  • <h1>xxxxxx</h1>

• 注意点:

  • H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
  • H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
  • 被H系列标签包裹的内容会独占一行
  • 在H系列的标签中, H1最大, H6最小
  • 在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)
    

P标签(Paragraph)

• 作用:

  • 告诉浏览器哪些文字是一个段落

• 格式:

  • <p>xxxxxxxx</p>

• 注意点:

  • 在浏览器中会单独占一行
    

Hr标签(Horizontal Rule)

• 作用:

  • 在浏览器上显示一条分割线

• 格式:

  • <hr />

• 注意点:

  • 在浏览器中会单独占一行
  • 通过我的观察发现HR标签可以写/也可以不写/, 如果不写/那么就是按照HTML的规范来编写, 如果写上/那么就是按照XHTML的规范来编写.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有写不写都可以.那么以后我们在做前端开发时到底写还是不写呢? 按照高级开发工具的提示来写即可.
  • 由于hr标签是用来修改样式的, 所以不推荐使用. 今后开发中添加水平线一般都使用CSS盒子来做
    

HTML注释(Annotation)

• 什么是注释?

  • 注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思
  • 注释可以用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流

• 为什么要使用注释?

  • 适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的

• 注释格式

<!--被注释的内容-->

• 注意点:
  • 被注释的内容不会在浏览器中显示, 注释是写给我们自己看的
  • 注释不能嵌套使用

<!--<!--被注释的内容-->-->

• 快捷键: ctrl + /

img标签(image)

• 作用: 在网页上插入一张图片

• 格式: [图片上传失败...(image-fd0503-1522164219949)]

• 标签的属性

  • 写在标签中K="V"这种格式的文本我们称之为标签属性

• 注意点:
  • img标签添加的图片默认不是占一整行空间
  • 如果想让图片等比拉伸, 只写高度或者宽度即可
    

br标签(Break)

• 作用:

  • 让内容换行

• 格式:

  • <br/>

• 注意点:

  • br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做

相对路径和绝对路径

• 图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径

• 绝对路径

  • 从电脑的具体盘符开始寻找我们需要的资源
  • [图片上传失败...(image-272290-1522164219949)]
  • 以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片

• 相对路径

  • 一个文件相对于另外一个文件的位置寻找我们需要的资源
  • [图片上传失败...(image-2aceec-1522164219949)]
  • 假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片

• 为什么没人使用绝对路径?

  • 可以移植性太差.

• 什么是可移植性?

  • 可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行

• 为什么绝对路径可移植性差?

  • 假如我编写的html文件放在我电脑的 F:/lnj 目录下, html文件中用到的图片放在F:/lnj/images目录下, 我给src指定的绝对路为F:/lnj/images/girl.png. 那么将来我将整个lnj文件夹拷贝给你, 如果你将lnj文件夹放在非F盘下, 那么将无法显示图片
  • 例如你存放在C盘根目录, 那么图片的绝对路径会变为C:/lnj/images/girl.png, 而src会去F盘找, 所以不会显示
  • 你只有将lnj文件夹存放在F盘根目录下时图片才会正常运行, 这就叫做可移植性不好

• 为什么相对路径可移植性好?

  • 同上, 如果src指定的路径为images/girl.png, 那么无论你拷贝到那个盘, 哪个文件夹. 系统都只会在当前文件夹中的images下去查找图片, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示

• 相对路径几种查找方式

  • 同级
    • 直接编写, 例如: girl.png
    • 加上./ 编写, 例如./girl.png
    • ./代表当前目录, ./girl.png代表在当前目录下查找
  • 下级
    • 直接编写, 例如abc/girl.png
    • 加上./ 编写, 例如./abc/girl.png
    • 相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
  • 上级
    • …/代表访问上级目录
    • 假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
    • 因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以…/代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以…/girl.png就代表在a文件夹查找girl.png

• 注意事项:

  • 相对路径不会出现这种格式aaa/../bbb/girl.png
  • 虽然可以显示, 但是企业开发中千万不要这么写

a标签(anchor)

• 格式: <a href="http://www.it666">江哥博客</a>

• 作用: 用于从一个页面链接到另一个页面

• 注意事项:

  • 在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签
  • a标签也叫做超级链接或超链接

• a标签的属性

• base标签和a标签结合使用

  • 如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
  • 格式: <base target="_blank" />

• 注意事项:

  • base必须嵌套在head标签里面
  • 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行

• a标签其它用法

  • 假链接(本质是跳转到当前页面)
    • 格式<a href="#">江哥博客</a>
    • 格式<a href="javascript:">江哥博客</a>
  • 跳转到当前页面指定位置(锚点链接)
    • 2.1.格式<a href="#location">跳转到指定位置</a>
    • 2.2.在页面的指定位置给任意标签添加一个id属性
      • 例如 <p >这个是目标</p>
  • 跳转到指定页面的指定位置
    • 格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
    • 只需要在01-锚点链接.html页面添加一个id位置即可
  • 下载(极力不推荐使用)
    • 例如<a href="girl.zip">下载福利资源<a/>

列表标签

无序列表(unordered list)

• 作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后
• 格式:
  • li 英文是 list item, 翻译为列表项

    <h4>选择居住城市(CN)</h4>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>铁岭</li>
    </ul>

• ul应用场景:

  • 导航条
  • 商品列表等
  • 新闻列表
    
    
    

• 注意事项:

  • 这里指的无序是指对于主体来说内容没有先后之分, 例如主题是"选择居住城市(CN)“北京上海都是中国的城市, 无论谁放在前面它都还是中国的城市的. 如果标题改为"中国雾霾排行”, 那么就必须有严格的排名,北京必须写在前面
  • 浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
    • 其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种
    • 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了
  • ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面
  • 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
  • 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

<ul>
        <li>
            好吃的
            <ul>
                <li>牛奶</li>
                <li>面包</li>
            </ul>
        </li>
        <li>
            日用的
            <ul>
                <li>毛巾</li>
                <li>牙膏</li>
            </ul>
        </li>
    </ul>

有序列表(ordered list)

• 作用: 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分
• 格式:

    <h4>中国房价排行</h4>
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>铁岭</li>
    </ol>

• ol应用场景:

  • xxx排行榜
  • 其实ol应用场景并不多, 因为能用ol做的用ul都能做

• 注意事项:

  • ol和ul就是语义不一样，怎么使用都是一样的以及注意点都一样
  • 其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号
  • 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了

定义列表(definition list)

• 作用: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述
• 格式:
  • dt英文definition title, 翻译为定义标题
  • dd英文definition description, 翻译为定义描述信息

    <dl>
        <dt>北京</dt>
        <dd>国家的首都, 看升国旗的地方</dd>
        <dt>上海</dt>
        <dd>魔都, 遍地是黄金的地方</dd>
    </dl>

• dl应用场景:
  • 网站底部相关信息
  • 但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl

• 注意事项:
  - dl是一个组标签, 一定是一坨一坨的出现, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面
  • 由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
  • dd和dt和li标签一样是容器标签, 里面可以添加任意标签
  • 定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
  • 定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

表格标签

• 在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表
  • http://2004.sina
• 作用:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式
• 格式:
  • table定义表格
  • tr定义行
  • td定义单元格

<!--先定义一个表格, 然后通过tr告诉浏览器这个表格中一共有多少行, 然后再通过td告诉浏览器这一行中一共有多少个元素(一共有多少列)-->
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

表格中的属性

• border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度

• width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度

• height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度

• cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙

• cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距

• align: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right

  • 给table设置align属性, 是让表格在浏览器中居左/居右/居中
  • 给tr设置align属性, 是让当前行中所有内容居左/居右/居中
  • 给td设置align属性,是让当前单元格中所有内容居左/居右/居中
  • 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
  • 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

• valign: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right

  • 给table设置valign属性, 无效
  • 给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
  • 给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
  • 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐

• bgcolor:规定表格的背景颜色

  • 给table设置bgcolor属性, 是给整个表格设置背景颜色
  • 给tr设置bgcolor属性, 是给当前行设置背景颜色
  • 给td设置bgcolor属性, 是给当前单元格设置背景颜色
  • 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
    

表格中的其它标签

• 表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th

• th标签: 给每一列设置标题, 单元格中的内容会自动加粗，居中

• caption标签:给整个表格设置标题

  • 一定要嵌套在talbe标签内部才有效

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
    <caption>
        <h2>今日小说排行榜</h2>
    </caption>
    <tr bgcolor="#a9a9a9">
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            ![](images/up.jpg)
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
</table>

表格的结构

• thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小

• tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上

• tfoot标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

• 表格结构的意义主要是用于SEO, 便于搜索引擎指定哪部分的内容是需要抓取的重要内容, 一般情况下搜索引擎会优先抓取tbody中的内容
• 由于有一部分浏览器对talbe的这种结构支持不是很好, 所以在企业开发中一般都不用严格的按照这种结构来编写

表单标签

• 作用: 用于收集用户信

本文标签： 干货 万字 入门 建议 收藏