浏览器
五大浏览器
-
Chrome
- 使用Webkit内核，后转为Blink内核
-
IE
- 使用Trident内核
-
Safari
- 使用Webkit内核
-
Firefox
- 使用Gecko内核
-
Opera
- 先前使用Presto内核，后转为Blink内核
Web标准
意义
- 1、有利于Web更好的发展；
- 2、有利于不同浏览器统一正确显示网页；
- 3、使网站更易开发与维护；
- 4、内容能被更广泛的设备访问；
- 5、提高页面浏览速度；
标准由W3C万维网联盟制定
HTML语法
标签
html标签关键词不区分大小写，但在html5中要求html标签统一使用小写字母
- 单标签
- 双标签
属性
-
在标签中描述标签附属信息的键值对
<img src = " 1.jpg" width = "100px"> -
1、属性值一般由双引号包裹
-
2、属性之间不分先后顺序
注释
- 格式：
<!--注释内容-->
结构
声明文档
- 常用声明文档：
<!DOCTYPE html>
骨架标签
-
<html></html>它是html文件中最大的标签，所有内容均嵌套在此标签中
-
<head></head>定义文档的头部，包含文档的标题（title），可以包含文档脚本（script），样式（style），meta 信息以及更多的其他信息。
-
<body></body>作用:定义文档的主体，在浏览器窗口中可以看到的所有内容都包含在它内部
标签
块级标签
标题标签
<h1></h1>~<h6></h6>
- 有语义：表示标题
- 语法
- <h1>标题一</h1>
- 默认样式
- 独占一行
- 文字有加粗效果
- 标签等级越小，标题字号越小
- 有默认间距
- 应用场景
- h1标签通常用于logo或者详情页最大的标题
- 文章页标题、内容章节标题
- 产品标题
- 模块标题
- 注意
- 不要使用标题标签特地针对文字加粗、加大字号
- 使用标题标签可使页面结构清晰化
- 规范使用标签（从h1标签开始依次使用次级标签、一个页面只使用一次h1标签）
- 通常标题标签包含文字、图片和其他行内元素
-
段落标签
<p></p>-
有语义：表示段落，该元素通常表现为⼀整块与相邻⽂本分离的⽂本
-
语法
-
段落标签
-
-
默认样式
- 有默认间距
-
应用场景
- 文章中的段落
- 页面中的文字块
-
注意
- 通常⽤来包含⽂字、图⽚、不可以包含它⾃⼰
-
-
无序列表
<ul></ul>-
有语义：无序列表，用于将没有数字顺序的一组数据或内容进行分组
-
语法：
- 数据一
- 数据二
-
属性：
-
type属性
代码示例：
- 苹果
- 香蕉
- 梨子
- disc：列表样式-实心圆（默认样式）
- circle：列表样式-空心圆
- square：列表样式-小方块
-
-
默认样式
- 默认间距（上下外边距、内侧右边距）
- 列表样式为实心圆
-
应用场景
- 新闻列表
- 产品列表
- 导航、分页、选项卡
-
-
有序列表
<ol></ol>-
有语义：有序列表，用于将顺序是有意义的一组数据或内容进行分组
-
语法：
<ol> <li>数据一</li> <li>数据二</li> </ol> -
属性
-
type属性
代码示例：
- 苹果
- 香蕉
- 梨子
- 1：按照阿拉伯数字顺序依次排列（默认样式）
- a：按照小写字母顺序依次排列
- A：按照大写字母顺序依次排列
- i：按照小写罗马数字顺序依次排列
- I：按照大写罗马数字顺序依次排列
-
-
默认样式
- 默认间距（上下外边距、内侧右边距）
- 列表样式为阿拉伯数字
-
应用场景
- 排行榜
- 烹饪食谱中的各个步骤
- 指路时的各处转弯方向
- 营养信息标签上，按含量排序的成分列表
- 面包屑导航（PS：这是一个根据童话故事命名的导航功能名）
-
-
列表条目
<li></li>- 它必须包含在一个父元素（ul、ol）中使用
-
自定义列表
<dt></dt>- 有语义：包含术语定义及描述的列表。其中：
- 为自定义列表、
- 为自定义列表项、
- 为自定义列表项的描述
- 语法:
- 定义
- 描述
-
默认样式
- 默认
- 、
- 带有间距，三个标签配合使用
- 默认
-
应用场景
- 名词解释、分类
- 键-值对列表
-
注意
-
允许使用多条项目定义与描述
代码示例：
- 姓名
- 李美丽
- ⽣⽇
- 1990
-
允许使用带有多个描述的单个项目定义
代码示例：
- 加⼊我们
- 社会招聘
- 校园招聘
- 国际招聘
-
- 有语义：包含术语定义及描述的列表。其中：
<div></div>
- 无语义：用于将内容分区
- 无默认样式
- 应用场景
- 没有具体语义块容器 ⼀般配合css来做⻚⾯的布局
行级标签
- 图像
<img />
- 作用：图像是⽹⻚的主要内容之⼀，在HTML标签中，img标签⽤于定义HTML⻚⾯中的图像
- 语法
- <img src="图片存储的路径" alt="图片加载失败后的描述" />
- 属性
- src属性
作⽤：⽤于指定图像⽂件的路径和⽂件名
注意：是标签的必须属性
- alt属性
作⽤:指定替换⽂本,默认不显示，当图像不能正常显示时，显示该⽂字对图像进⾏替
换,有利于⽤户体验
- width/height属性
作⽤:指定图⽚宽度/⾼度
注意：值可以不带单位默认px，只指定宽或⾼属性其中⼀个，另⼀个按照原⽐例等⽐缩放
-
超链接
<a></a>-
作用：超链接可以是⼀个字，⼀个词，或者⼀组词，也可以是⼀幅图像。将⽂档链接到其他⽂档或资源，链接到⽂档的特定部分
-
语法
-
属性
-
href属性
作⽤：指定链接跳转的地址 示例代码： 京东商城（⽂字链接）
-
target属性
作⽤：指定⽬标地址的打开⽅式
-
_blank：在新窗口打开链接
-
_self：在当前窗口打开链接（默认值）
示例代码：
-
_top：在最顶级窗口打开链接（不常用）
-
_parent：在当前窗口的上一层窗口打开链接（不常用）
-
-
title属性
作⽤：定义提示⽂本，将⿏标悬停在链接上会显示标题作为⼯具提示
-
-
链接类型
-
文本格式化标签
-
<em></em>-
语义：（语气）强调,⽤于标记强调内容
-
默认样式
- 斜体显示
- 不独占一行
-
-
<strong></strong>-
语义：（文字）强调
-
默认样式
- 加粗显示
- 不独占一行
-
-
<del></del>-
语义：删除的内容
-
默认样式
- 带有中划线
- 不独占一行
-
应用场景
- 价格中的原价
- 待办事项中已完成需要被划掉的事项
-
-
<i></i>-
无语义（作用为：区分普通⽂本的⼀系列⽂本。例如技术术语、外⽂短语或是⼩说中⼈物的思想活动 等。）
-
默认样式
- 斜体显示
- 不独占一行
-
-
<b></b>-
无语义，作用为：定义粗体⽂本,⽤于吸引读者的注意到该元素的内容上
-
默认样式
- 加粗显示
- 不独占一行
-
-
<span></span>- 无语义，作为⾏内容器包含短语内容，通常⽤来区分⽂本样式
- 无默认样式，相当于块级标签中的div
-
<br />- 作用为：换行，加入此标签后可实现内容强制换行
附加内容
- 字符实体
table标签
- 语义：页面中的表格
HTML语义化
定义：语义化是指⽤合理的HTML标记以及其特有的属性去格式化⽂档内容。（例如标题⽤ h1-h6、段落⽤ p 标签，合理得给图⽚添加alt属性等）
使用语义化优点
- 在没有 CSS 的情况下，⻚⾯也能呈现出很好地内容结构
- 使代码更具【可读性】，便于团队开发和维护
- 有利于 SEO搜索引擎优化（和搜索引擎建⽴良好沟通，有助于爬⾍抓取更多的有效信息。爬⾍依赖于标签来确定上下⽂和各个关键字的权重）
- 有利于【⽤户体验】（例如：title、label 标签、alt属性的灵活运⽤）
