网站构成
- 网站由网页组成，是承载各种应用的平台
- 用于展示特定内容的网页集合
- 网页就是一个文件，通常是HTML格式，文件扩展名一般为.html或.htm，也可以是.asp、.aspx或.jsp等。网页存放在一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别和存取，当在浏览器输入网址后，该网页文件会被传送到计算机上，然后再通过浏览器解释网页内容，再展示到面前。
- 在网站中，有一个网页比较特殊，当人们在浏览器地址栏中输入网站的网址后，会首先看到这个页面，通常被称为主页（或首页），首页类似图书中的目录，具有导航作用。
- 如淘宝是一个网站，首页、详情页、购物车页、登录页等
概念及组成
- 万维网联盟（英文全称：World Wide Web Consortium，缩写为W3C）标准不是某一个标准，而是一系列标准的集合
组成
- 结构化标准语言（ XHTML和XML【可扩展标记语言】）【可扩展超文本标记语言（缩写，XHTML）】
- 作用：
- 可以搭建页面结构，使页面出现文本、超链接、列表等内容
- 表现标准语言 （CSS）【层叠样式表（英文全称：Cascading Style Sheets，缩写为CSS】
- 用于美化网页，给页面添加背景、字体颜色、文本样式等
- 行为标准 （包括对象模型（如W3C DOM英文全称：Document Object Model，缩写为DOM）、ECMAScript等）
- 一种与浏览器，平台，语言的接口，使得开发者可以访问页面其他的标准组件
- 给页面添加动态效果，比如图片轮播、Tab切换、文字滚动等
HTML概念及发展史HTML
概念
- HTML称为超文本标记语言，是一种标识性的语言。由HTML命令组成的描述性文本，可以说明文字，图形、动画、声音、表格、链接等
发展
HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度。
每一个新版本都是对之前版本的扩充
每一个新版本基本都能兼容之前的版本
支持跨平台、跨设备
支持移动开发
常见浏览器
1. IE浏览器
2. Firefox浏览器
3. Safari浏览器
4. Opera浏览器
5.Chrome浏览器
新特性
语义化表达
引入具有特定语义的结构标签,如<header>、< footer>、 <nav>等。
支持多媒体.
新增<audio>和<video>标签处理音频和视频文件。
离线和存储
HTMi 5提出I ocal Storage与Application Cache两大离线存储技术,能把Web应用相关
资源文件缓存到本地。
支持多线程: Web Workers让浏览器可以多线程处理后台任务而不阻塞用户界
面渲染。
通信:增强了通信能力,意味着增强了信息交互的实时性和网络游戏的顺畅性。
设备访问:增强了设备感知能力，使Web应用在电脑、pad、 手机上均能使用。
创建HTML网页
常见编辑器
Adobe Dreamweaver
- 简称“DW”，集网页制作和管理网站于一身的所见即所得网页代码编辑器
- 缺点在于效果难一致、代码难控制
- WebStorm
- 誉为“Web前端开发神器”、“最强大的HTML5编辑器”等
- 缺点在于启动时耗CPU和内存
- Sbulime Text
- 具有漂亮的用户界面和强大的功能，如代码缩略图、插件等
- 缺点在于收费闭源
- Visual Studio Code
- 针对于编写现代 Web 和云应用的跨平台源代码编辑器
- 称其“比Sublime开源，比Webstorm更轻”
HTML文档基本结构
- HTML文档：<html></html>
- 头部区域：<head></head>
- 主体区域：<body></body>
HTML基本语法
1、标签不区分大小写
2、允许属性值不使用引号
3、允许部分属性值的属性省略
HTML5可以省略属性值的属性
| 属性 | 描述 |
| checked | 省略属性值后，等价于checked="checked"。 |
| readonly | 省略属性值后，等价于readonly="readonly" |
| defer | 省略属性值后，等价于defer="defer" |
| ismap | 省略属性值后，等价于ismap="ismap" |
| nohref | 省略属性值后，等价于nohref="nohref " |
| noshade | 省略属性值后，等价于noshade="noshade" |
| nowrap | 省略属性值后，等价于nowrap="nowrap" |
| selected | 省略属性值后，等价于selected="selected" |
| disabled | 省略属性值后，等价于disabled="disabled" |
| multiple | 省略属性值后，等价于multiple="multiple" |
| noresize | 省略属性值后，等价于noresize="noresize" |
单标记 单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。
双标记 双标记也称体标记，是指由开始和结束两个标记符组成的标记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
Hello World
</body>
</html>- 必须在首行定义文档类型
<!DOCTYPE html>- 文档的字符编码
HTML注释标记
<!-- 注释语句 -->
标记属性
字体 字号 颜色 位置
<标记名 属性1="属性值1" 属性2="属性值2" …> 内容 </标记名>
HTML5文档头部相关标记
<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。
<meta />标记用于定义页面的元信息，可重复出现在<head>头部标记中。
在<head>中使用<link>标记可引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件。
<style>标记用于为HTML文档定义样式信息，位于<head>头部标记中。
<meta charset="UTF-8">- 理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 文档标题
一个HTML文档只能含有一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。
<title>我的第一个网页</title>meta定义页面元信息
设置网页关键字 <meta name=“keywords” content=“JAVA、php" />
设置网页描述 <meta name=“description“ content=“IT培训教育”/>
设置网页作者 <meta name=“author” content=“张三" />
设置字符集 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
设置页面自动刷新与跳转 <meta http-equiv="refresh" content="10;url=http://www.itcast.cn" />
<link 属性="属性值" />
| 属性名 | 常用属性值 | 描述 |
| href | URL | 指定引用外部文档的地址 |
| rel | stylesheet | 指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表 |
| type | text/css | 引用外部文档的类型为CSS样式表 |
| text/javascript | 引用外部文档的类型为javascript脚本 |
<style 属性=”属性值”>样式内容</style>
在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式。
掌握HTML基本标签的使用
基本标签
标题标签
- 通过<h1>~ <h6>标签定义
- <h1>标签的标题最大，<h6>标签的标题最小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</html>
</body>
</html>
<hn align="对齐方式">标题文本</hn>
- left ：设置标题文字左对齐（默认值）
- center：设置标题文字居中对齐
- right：设置标题文字右对齐
段落标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>
</body>
</html>
<p align="对齐方式">段落文本</p>
换行标签
- 通过<br>标签定义，属于空标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>北京欢迎你</h1>
<p>
北京欢迎你，有梦想谁都了不起！<br>
有勇气就会有奇迹。<br>
北京欢迎你，为你开天辟地！<br>
流动中的魅力充满朝气。<br>
北京欢迎你，在太阳下分享呼吸！<br>
在黄土地刷新成绩。<br>
</p>
</body>
</html>
水平线标签
- 通过<hr>标签定义，属于空标签
<hr 属性="属性值" /> <hr />是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线。
<hr />标记的常用属性
| 属性名 | 含义 | 属性值 |
| align | 设置水平线的对齐方式 | 可选择left、right、center三种值，默认为center，居中对齐 |
| size | 设置水平线的粗细 | 以像素为单位，默认为2像素 |
| color | 设置水平线的颜色 | 可用颜色名称、十六进制#RGB、rgb(r,g,b) |
| width | 设置水平线的宽度 | 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100% |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>北京欢迎你</h1>
<hr>
<p>
北京欢迎你，有梦想谁都了不起！<br>
有勇气就会有奇迹。<br>
北京欢迎你，为你开天辟地！<br>
流动中的魅力充满朝气。<br>
北京欢迎你，在太阳下分享呼吸！<br>
在黄土地刷新成绩。<br>
</p>
</body>
</html>
文本格式化标记
| 标记 | 显示效果 |
| <b></b>和<strong></strong> | 文字以粗体方式显示（XHTML推荐使用strong） |
| <i></i>和<em></em> | 文字以斜体方式显示（XHTML推荐使用em） |
| <s></s>和<del></del> | 文字以加删除线方式显示（XHTML推荐使用del） |
| <u></u>和<ins></ins> | 文字以加下划线方式显示（XHTML不赞成使用u） |
特殊字符标记
| 特殊字符 | 描述 | 字符的代码 |
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
图像标签
常见的图像格式
- JPEG格式
- 压缩率高、十分标准化
- GIF格式
- 可构成简单的动画
- PNG格式
- 可以存储透明图片
基本语法
- 由<img> 标签定义，是空标签，只包含属性，没有闭合标签
<img src="url" alt="text" title="text" width="x" height="y">- src属性：表示图像的地址
- alt属性：表示图像的替代文字
- title属性：表示鼠标悬停在图像上时的提示文字
- width属性：用于设置图像的宽度，单位是像素
- height属性：用于设置图像的高度，单位是像素
-
border属性：为图像添加边框、设置边框的宽度。但边框颜色的调整仅仅通过HTML属性是不能够实现的。
-
vspace属性：调整图像的垂直边距
-
hspace属性：水平边距。
-
align属性：图像的对齐属性align。用于调整图像的位置
实际工作中，通常新建一个文件夹专门用于存放图像文件。
相对路径 相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
绝对路径 绝对路径一般是指带有盘符的路径，例如完整的网络地址 “http://www.itcast.cn/images/logo.gif”。
图像文件和html文件位于同一文件夹： 只需输入图像文件的名称即可，如<img src=“logo.gif” />。
图像文件位于html文件的下一级文件夹： 输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
图像文件位于html文件的上一级文件夹： 在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。
无错误使用
<img src="images/1.jpg" alt="这是一张猫咪图片" title="这只小猫名字叫可乐" width="300" height="300">
修改文件路径之后。
- 由<a> 标签定义，用于跳转到新的文档或者当前文档中的某个部分
<a href="url" >链接文本或图像</a>在上述语法中，href属性表示链接的目标。
<a href="跳转目标"
target="目标窗口的弹出方式">
文本或图像
</a>
href 用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。
target 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。
案例
<a href="a.html">点我跳转至A页面</a> 
为了提高信息的检索速度
HTML语言提供了一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步
使用“<a href="#id名">链接文本</a>”创建链接文本
使用相应的id名标注跳转目标的位置
列表元素
HTML语言提供了3种常用的列表，分别为无序列表、有序列表和定义列表。
网页中最常用的列表，其各个列表项之间没有顺序级别之分，通常是并列的。
有排列顺序的列表，其各个列表项按照一定的顺序排列。
用于对术语或名词进行解释和描述。与无序和有序列表不同，定义列表的列表项前没有任何项目符号。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
每对<ul></ul>中至少应包含一对<li></li>。
<li></li>标记用于描述具体的列表项
<ul></ul>标记用于定义无序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
<ol></ol>标记用于定义无有序列表
<li></li>标记用于描述具体的列表项
每对<ol></ol>中至少应包含一对<li></li>。
定义列表常用于图文混排，其中<dt></dt>标记中插入图片，<dd></dd>标记中放入对图片解释说明的文字。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
<dl></dl>标记用于指定定义列表
<dt></dt>标记用于指定术语名词
<dd></dd>标记用于对名词进行解释和描述
语义化标签概述
（1）语义化标签概述
语义化标签是指根据内容的结构化，选择合适的标签进行开发。其便于开发者阅读和写出更优雅的代码，同时可以让浏览器的爬虫和机器很好地解析。
（2）语义化标签种类
在HTML5中，语义化标签有header、nav、article、aside和footer等，其各个作用如下：
- header：页面或页面中某一个区块的页眉，通常是一些引导和导航信息。
- nav ：可以作为页面导航的链接组。
- article：页面中的一个内容区块，通常由内容及其标题组成。
- aside：非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容。
- footer：页面或页面中某一个区块的脚注
- 以菜鸟教程首页为例，在划分页面结构时，为了区分各个模块，使页面更具有语义化，开发人员通常需要使用语义化标签
HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。
<header>
<h1>网页主题</h1>
...
</header>
nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。
<nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概况</li>
<li><a href="#">产品展示</li>
<li><a href="#">联系我们</li>
</ul>
</nav>
article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。
例如，下面的案例就是对article元素用法的演示。
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
被包含在article元素内作为主要内容的附属信息
<article>
文章内容
<footer>
文章分页列表
</footer>
</article>
<footer>
页面底部
</footer>
分组元素用于对页面中的内容进行分组。HTML5中涉及到3个与分组有关的元素，分别是figure元素、figcaption元素和hgroup元素。
details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容。
progress元素用于定义一个正在完成的进度条，这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。
meter元素用于表示指定范围内的数值。
| 属性 | 说明 |
| high | 定义度量的值位于哪个点被界定为高的值。 |
| low | 定义度量的值位于哪个点被界定为低的值。 |
| max | 定义最大值，默认值是 1。 |
| min | 定义最小值，默认值是 0。 |
| optimum | 定义什么样的度量值是最佳的值。如果该值高于 high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好。 |
| value | 定义度量的值。 |
为了使HTML页面中的文本内容更加形象生动，需要使用一些特殊的元素来突出文本之间的层次关系，这样的元素被称为层次语义元素。
time元素用于定义时间或日期，可以代表24小时中的某一时间。time元素不会在浏览器中呈现任何特殊效果，但是该元素以机器可读的方式对日期和时间进行编码。这样，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。
time元素常用属性值
datetime：用于定义相应的时间或日期。
pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。
mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。该元素的用法与em和strong有相似之处，但是使用mark元素在突出显示样式时更随意灵活。
cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。
hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与h1~h6元素组合使用。通常，将hgroup元素放在header元素中。
如果只有一个标题元素不建议使用hgroup元素
- 在HTML5中，contentEditable属性用于是否允许用户编辑内容，若不添加contenteditable属性，就是一个不可编辑的p标签，
-
hidden属性
在HTML5中，大多数元素都支持hidden属性，该属性有两个属性值：true和false。当hidden属性取值为true时，元素将会被隐藏，反之则会显示。元素中的内容是通过浏览器创建的，页面装载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也及时显示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3 hidden="hidden">我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
</body>
</html>
spellcheck属性
spellcheck属性主要针对于input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值：true（默认值）和false，值为true时检测输入框中的值，反之不检测。
第一个<p>标签没有设置spellcheck属性，第二个<p>标签的spellcheck属性设置为true
会发现当输入一样的内容时，第二个p标签会对编辑的内容进行拼写或语法检查（即在错误的词下面添加红色波浪线），效果如下图示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p contenteditable="true">这是可编辑的段落，可以试着编辑文本</p>
<p contenteditable="true" spellcheck="true">这是可编辑的段落，可以试着编辑文本</p>
</body>
</html>
多媒体的应用
音频
在HTML5中，<audio>标签用于音频播放，语法如下
< audio src="音频路径"> </ audio >- controls：用于向用户显示控件，比如播放按钮
- autoplay：表示音频在就绪后马上播放，即自动播放
- loop：表示当音频结束时重新开始播放，即循环播放
音频使用
- 使用<audio>标签在网页中播放音乐，并要求音乐需要显示控件，并能够循环播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio src="儿歌%20-%20好孩子要诚实.mp3" controls loop></audio>
</body>
</html>
- 在HTML5中，<video>标签用于视频播放，语法如下：
< video src="视频路径"> </ video >- controls：用于向用户显示控件，比如播放按钮
- autoplay：表示视频在就绪后马上播放，即自动播放
- loop：表示当视频结束时重新开始播放，即循环播放
- width：设置视频播放器的宽度
- height：设置视频播放器的高度
- <video>标签在网页中播放视频，并要求视频宽高为500像素，且需要显示控件，并能够循环播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video src="绿叶视频.mp4" controls loop width="500" height="500"></video>
</body>
</html>
特殊字符与注释
标签基本语法规范
- 所有的标签都包含在“<”和“>”起止标识符中，从而构成一个标签，如<p>
- 在HTML文档中，大多数元素都有开始标签和结束标签，在开始标签和结束标签之间包含的是元素主体，如<body>元素主体</body>
- 开始标签中包含元素的名称以及可选属性，结束标签以反斜杠开始，然后附加上元素名称，如段落标签：
<p>这是一个段落</p>- 标签可以互相嵌套，形成文档结构，如：
<p><a></a></p>- 元素的属性包含属性名称和属性值两部分，中间通过等号进行连接，多个属性之间用空格分隔，属性与元素名称之间也是用空格分隔，如：
<img src="url" alt="text" title="text" width="x"height="y">- 少数元素的属性也可能不包含属性值，仅有一个属性名称
<audio src="song.ogg" controls loop></audio>- 属性是可选的，元素包含多少个属性，也不是确定的
大小写规范
- 在HTML中，元素名和属性名使用大写或小写浏览器都能够解析，但是通常更推荐小写，原因如下：
- 混合了大小写的风格是非常糟糕的
- 实际开发中，开发人员通常使用小写
- 小写风格看起来更加清爽
- 小写字母容易编写
驼峰式命名法
- 若某个属性单词较长，一般采用驼峰式命名法，例如：
<section>
<p className="menu">这是一个段落。</p>
</section>缩进和空行
- 为了代码美观，通常在编写代码时要保持树形结构
- 可以为每个逻辑功能块添加空行，这样更易于阅读
注释
<!-- 这是注释 -->字符实体
- 在HTML中，如需显示大于号，必须写为“>”；显示小于号，必须写为“<”
<p>如果时间>晚上6点，就坐车回家</p>
<p>如果时间<早上7点，就走路去上学</p>常用字符实体
行内元素
概述及使用
- 行内元素由内容撑开宽度，左右都是行内元素可以排在一行显示。所学的标签中，行内元素有：图像标签、超链接标签
- 若页面中有多个图像标签或超链接标签，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素</title>
</head>
<body>
<img src="images/1.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/1.jpg" alt="">
<a href="#">我是超链接</a>
<a href="#">我是超链接</a>
</body>
</html>块级元素
- 块级元素的内容无论多少，该元素独占一行。所学的标签中，块级元素有：段落标签、标题标签、语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素</title>
</head>
<body>
<h2>我是标题1</h2>
<p>
段落1
<a href="#">超链接1</a>
<a href="#">超链接2</a>
</p>
<h2>我是标题2</h2>
<p>段落2</p>
<p>段落3</p>
<h2>我是标题3</h2>
<p>段落4</p>
</body>
</html>元素区别
行内元素和块级元素的区别
- 区别可以从两点来划分，在内容上：
- 一般情况下，行内元素只能包含数据和其他行内元素
- 块级元素可以包含行内元素和其他块级元素
- 格式上：
- 默认情况下，行内元素不会以新行开始，而块级元素会新起一行
CSS3选择器
CSS3中新增的多种选择器，使用它可以大幅度提高开发人员书写和修改样式表的效率。
属性选择器可以根据元素的属性及属性值来选择元素。CSS3中新增了3种属性选择器。
E[att^=value]
E[att$=value]
E[att*=value]
E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。
E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。
E[att$=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。
div[id$=section]
表示匹配包含id属性，且id属性值是以“section”字符串结尾的div元素。
E[att*=value]选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。
div[id*=section]
表示匹配包含id属性，且id属性值包含“section”字符串的div元素。
子代选择器主要用来选择某个元素的第一级子元素。
希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 > strong。
兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素
临近兄弟选择器 使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。
普通兄弟选择器 使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。
结构化伪类选择器
:root选择器
:root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
:not选择器
如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。
:only-child 选择器
:only-child 选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素。
:first-child和:last-child选择器
:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。
:nth-child(n)和:nth-last-child(n)选择器
使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或倒数第2个子元素，这两个选择器就不起作用了。为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。
:nth-of-type(n)和:nth-last-of-type(n)选择器
:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第 n 个子元素和倒数第n个子元素。
:empty选择器
:empty选择器用来选择没有子元素或文本内容为空的所有元素。
:target选择器
:target选择器用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。
所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器
:before选择器
:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。
:after选择器
:after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。
链接伪类
定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。
在CSS中通过链接伪类可以实现不同的链接状态
超链接标记<a>的伪类
| 超链接标记<a>的伪类 | 含义 |
| a:link{ CSS样式规则; } | 未访问时超链接的状态 |
| a:visited{ CSS样式规则; } | 访问后超链接的状态 |
| a:hover{ CSS样式规则; } | 鼠标经过、悬停时超链接的状态 |
| a:active{ CSS样式规则; } | 鼠标点击不动时超链接的状态 |
<元素>:
before
{
content:文字/url();
}
1192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
