一、HTML简介及文档结构
1、html简介
-
HyperText Markup Language
-
超文本标记语言
-
不是编程语言
-
纯文本
-
描述文档语义的语言
html就是负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果的。
2、html文档结构
SEO，search engine optimization，搜索引擎优化。
<!DOCTYPE html>
<!--文档类型定义，简称DTD-->
<html lang="en">
<!--语言：英语-->
<head>
<!--head头部，主要用来完成网页设置-->
<meta charset="UTF-8">
<!--
meta：元，完成对应设置
meta字符集属性：
国际编码，多字节
gbk编码
meta的其他属性：
<meta name="keywords" content="">
//找到网站的搜索关键字
<meta name="description" content="">
//网站的描述内容
-->
<title>Title</title>
<!--标题，显示在浏览器的标签栏中-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!--title前的logo-->
</head>
<body>
<!--网页内容-->
</body>
</html>
快速生成文档结构的方式：
- html:5 + tab
- ! + tab
<style>
/*引入外部样式文件*/
<link rel="stylesheet" href="style.css">
</style>
3、html特点
- 简易性
- 可扩展性
- 平台无关性
- 通用性
4、网页分类
- 静态
- 动态
二、主流浏览器及内核
1、主流浏览器
- Internet Explorer(IE)
- FireFox(火狐)
- Chrome(谷歌)
- Opera(欧朋)
- Sarafi(苹果)
2、浏览器内核
浏览器内核由渲染引擎和JS引擎两部分组成。
- Trident内核-----IE
- Gecko内核------FireFox
- WebKit内核------Safari和Chrome
- Presto内核-----Opera
- Blink内核------Chrome和Opera
国内大多数浏览器采用双核驱动：
- trident和webkit
- trident和blink
移动端：
- iphone/ipad：webkit内核
- android4.4以下版本webkit内核，4.4以上版本blink内核
三、html基本标签
语义化标签：明白每个标签的用途.
- 容器级的标签，里面可以放置任何东西；
- 文本级的标签，里面只能放置文字、图片、表单元素。
1、块级标签和行内标签
-
块级标签：独占一行，可以设置宽高，宽度默认铺满整行，块级元素内可以包含块级和行内元素。
-
行内标签：不会独占一行，不能设置宽高，只能包含行内元素。
-
相互转换
块级----->行内：display:inline;
行内----->块级：display:block;
举例：
<span>黑鸭</span>
<span>绝味</span>
<style type="text/css">
span{
display:block;
}
</style>
或者：
<span style="display:block;">黑鸭</span>
<span>绝味</span>
2、div和span
-
div：布局，块级标签
-
span：布局，行内标签
3、 hx 标题
大----->小 h1----->h6
<h1>我</h1>
<h2>我</h2>
<h3>我</h3>
<h4>我</h4>
<h5>我</h5>
<h6>我</h6>
4、段落标签p（文本级标签）
p：块级
<p></p>
5、换行br
br：单/空标签，行内
<br/>
6、水平线hr
hr：单/空标签，块级
<hr/>
7、图片img
<img src="" alt="">
src：图片路径，相对路径和绝对路径
alt：图片加载不出来出错时显示的文字
title：鼠标悬停在图片上的时候替代的文字
8、超链接a（文本级标签）
1、a标签属性
<a href=""></a>
- href：要跳转的地址
- title：表示鼠标悬浮的提示文字
- target：表示跳转的目标形式
- name：锚点
target属性值：
_blank(新窗口)
_self（默认，本身窗口）
_parent（返回父一级）
_top（返回最顶层）
2、a标签伪类
- a:link 未访问
- a:visited 已访问
- a:hover 鼠标悬浮
- a:active 点击鼠标时
3、锚点
跳转到指定的位置。
1.html：
<a href="#wdzp">点击我就查看我的作品</a>
2.html：
<a name="wdzp">我的作品</a>
或者：
<a id="wdzp">我的作品</a>
9、无序列表ul
ul
<ul>
<li></li>
<li></li>
<li></li>
</ul>
10、有序列表ol
ol
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
11、短文本引用q
浏览器会对q标签自动添加双引号。
12、地址信息address
为网页加入地址信息
13、表格标题摘要caption标签
为表格添加标题和摘要。
摘要的内容不在浏览器显示，作用是增加表格可读性。
四、HTML文本格式化标签
1、加粗b、strong（行内）
- b：加粗
- strong：加粗，强调（强调主要用于SEO，提取关键字）
2、倾斜i、em（行内）
- i：倾斜
- em：倾斜，强调
3、预格式化文本pre（块级）
保留换行和空格及宽度。文字的字号会小一号。
<pre>
预保留 换行
和空格
及宽度。
</pre>
4、文字缩小small（行内）
浏览器支持的最小字号12px。
5、文字放大big（行内）
big在html5中淘汰掉了，但并没有删除。
开发中尽量不去使用淘汰的标签。
6、文本下标sub
<p>X1+X2=Y</p>
X<sub>1</sub>+X<sub>2</sub>=Y
7、文本上标sup
<p>X2+Y2=Z</p>
X<sup>2</sup>+Y<sup>2</sup>=Z
五、html实体转义符
- < 小于号 <；
- > 大于号 >；
- 空格  ；
- " 引号 "；
- © 版权符号 ©；
- × 乘号 ×；
- ÷ 除号 ÷；
六、W3C
w3c规范由结构（html）、表现（css）、形（JavaScript）三部分组成。
- 万维网联盟
- World Wide Web
- 负责统一web相关的各项标准
1、标签嵌套原则
- 块级元素可包含块级元素和行内元素
- 行内元素只能包含行内元素
- 块级元素不能放在p里
- h1-h6、p、dt里不能包含块级元素
- 块级元素与块级元素并列，行内元素与行内元素并列
2、文件命名规范
- 项目开发时，不能用汉字或空格作为文件或目录名
- 文件和目录名一般以字母或下划线开头,后面可以出现字母、数字、下划线
- 首页必须是index.html
- 产品页product.html
- 订单页order.html
3、规范总结
