基础知识
HTML5 基础入门
HTML5 的基本概念
什么是HTML5
HTML5 是标记语言，使用标记标签描述网页。
HTML与XHTML
XHTML是可扩展的超文本标记语言，是一种置标语言，是更严格、更纯净的HTML版本。XHTML是以XML格式编写的HTML。XHTML具有
HTML5 的优势
解决跨浏览器问题
部分代替原来的JavaScript
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< body>
< form action= "demo" >
姓名: < input type= "text" name= "Name" / > < br/ >
成绩: < input type= "text" name= "Grade" ID = "grade" / > < br/ >
< / form>
< / body>
< / html>
< script>
document. getElementById ( "grade" ) . focus ( )
< / script>
简化
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< body>
< form action= "demo" >
姓名: < input type= "text" name= "Name" / > < br/ >
成绩: < input type= "text" name= "Grade" autofocus/ > < br/ >
< / form>
< / body>
< / html>
获取文本框焦点 ：光标移动到输入框中，等待输入
更明确的语义支持
增强web应用程序的功能
网页和网站
网页和网站的关系
网页：文件，存储在计算机中，通过网址识别和获取，在浏览器中输入网址后，网页文件被传送到正在浏览网页的计算机中，通过浏览器对网页进行解析，展示给用户。
网站：根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合
网页和网站的区别：网站有后台，网站的内容可以更换，网页没有后台，内容固定，不可更换。
网页和网站的联系：网站由网页组成，网页设计是网站设计的基础。
就业面试技巧
XHTML是一种示应XML而重新创造HTML，当用户有了XML之后，是否还需要HTML？
HTML文件的扩展名有哪些？
HTML5 文档基本结构
HTML5 文档构成
HTML5 文档结构由头部(head)、主体(body)两部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。代码如下：
< !DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> Title< / title>
< / head>
< body>
< / body>
< / html>
代码：
成对出现：
标签内包含的主要元素：
< body>
< / body>
HTML5 的语法变化
标签不再区分大小写
元素可以省略结束标签
支持boolean值得属性
允许属性值不适用引号
HTML5 标签、元素和属性
HTML网页是由HTML元素构成的文本文件，任何网页浏览器均可直接运行HTML文件，HTML元素是HTML文件的基本对象。
标签
绝大多数的标签都是成对出现的，少数不是成对出现的。
单标签
概念：由一个标签组成，在开始标签中关闭。
双标签
概念：由开始标签和结束标签两部分构成
标签属性
形式：属性名=属性值
元素
概念：从开始标签到结束标签的所有代码
HTML5 文档头部标签
中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等，文档的头部描述了文档的各种属性和信息，
定义文档的标题，是<head>标签中唯一必须的元素</p>
<h4>设置页面标题标签</h4>
<p><code><title></code>标签定义文档的标题，是所有HTML文档中必须的，只能出现在<head>中</p>
<h4>引用外部文件标签</h4>
<p><code><link></code>标签是引用外部文件标签，放置在一个网页的头部标签中，用于链接外部CSS文件</p>
<h4>内嵌样式标签</h4>
<p><code><style></code>标签是内嵌样式标签，用于为HTML文档定义样式信息，位于<code><head></code>头部中，在<code><style></code>标签中。规定在浏览器中如何呈现HTML文档</p>
<h3><code><meta></code>标签</h3>
<p>在网页中，<code><meta></code>标签用来做网页的关键字，页面说明，作者信息，网页的定时跳转等声明</p>
<ol>
<li>设置页面的关键字<br> Keywords(关键字)用于告诉搜索引擎网页的关键字，代码如下：</li>
</ol>
<pre><code class="prism language-python"><span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"keyword"</span> content<span class="token operator">=</span><span class="token string">"某人，论坛，学历，前端"</span><span class="token operator">></span>
</code></pre>
<ol start="2">
<li>设置页面说明<br> Description(页面说明)用于告诉搜索引擎网站的主要内容，代码如下：</li>
</ol>
<pre><code class="prism language-python"><span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"description"</span> content<span class="token operator">=</span><span class="token string">"web前端的一些面试技巧"</span><span class="token operator">></span>
</code></pre>
<ol start="3">
<li>设置作者信息<br> Author(作者信息)用于介绍作者的一些信息，代码如下：</li>
</ol>
<pre><code class="prism language-python"><span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"author"</span> content<span class="token operator">=</span><span class="token string">"某人，他的邮箱"</span><span class="token operator">></span>
</code></pre>
<ol start="4">
<li>设置网页的定时跳转<br> 网页多少秒后自动从当前页面跳转至另一个网页页面或网站，代码如下：</li>
</ol>
<pre><code class="prism language-python"><span class="token operator"><</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">"Refresh"</span> content<span class="token operator">=</span><span class="token string">"N;URL= "</span><span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<p> N 为跳转的时间，单位为秒</p>
<h3>页面注释标签</h3>
<p>语法：<code><!--注释内容--></code></p>
<h3>各类标签</h3>
<h4>标题标签</h4>
<p>HTML中标题由<code><h1></code>~<code><h6></code>标签来定义，其中<code><h1></code>代表一级标题，级别越高，文字越大,<code><h6></code>标签级别最小</p>
<h4>标题标签对齐属性</h4>
<p>标题字的对齐属性<code>align</code>，属性值：</p>
<ol>
<li><code>center</code>：居中对齐内容</li>
<li><code>left</code>：左对齐内容</li>
<li><code>right</code>：右对齐内容</li>
<li><code>justify</code>：对行进行伸展，每行可以有相同的长度</li>
</ol>
<h4>段落标签</h4>
<p>段落使用<code><p></code>标签，<code><p></code>开始和<code></p></code>结束之间的内容形成一个段落，段落之间自动换行且有空行</p>
<h4>换行标签</h4>
<p>换行标签<code><br/></code>是一个单标签，没有结束标签，用于将文字在一个段内强制换行</p>
<h4>不换行标签</h4>
<p>强制内容在一行内显示，使用不换行标签<code><nobr></code>，不换行内容放入<code><nobr></nobr></code>之间即可</p>
<h4>水平线标签</h4>
<p>将上下内容分隔开，可以使用水平线标签<code><hr></code>,100%宽度水平线，独占一行，水平线上下内容分隔一定的距离</p>
<h4>插入空格</h4>
<p>空格键打出的空格会被HTML自动忽略，通过<code> </code>插入空格</p>
<h4>插入特殊符号</h4>
<p>在标签中插入特殊符号，使用<code>&</code>开头，<code>;</code>结尾</p>
<h3>就业面试技巧</h3>
<ol>
<li> <p>HTML5 中的新多媒体元素种类？<br> 答：四种<br> <code>audio</code>元素：定义播放声音文件或者音频流的标准<br> <code>video</code>元素：定义播放视频文件或者视频流的标准<br> <code><source></code>元素：为媒体元素定义媒体资源，允许用户规定两个视频/音频文件龚浏览器，根据对媒体类型或编解码器的支持进行选择<br> <code>embed</code>元素：用于插入各种多媒体，格式为MIDI、WAV、AIFF、AU、MP3等</p> </li>
<li> <p>HTML5 中的分组元素种类？<br> 答：三种<br> <code><.hgroup></code>元素：用于对网页或区段的标题进行组合，将<code><h1></code>~<code><h6></code>元素进行分组<br> <code><figure></code>元素：用于表示网页的一块独立的内容，移除后不会对网页上的其他内容产生影响<br> <code><figcaption></code>元素：为<code><figure></code>元素定义标题</p> </li>
</ol>
<h2>CSS3 基础入门</h2>
<h3>CSS 的基本语法</h3>
<p>CSS语法规则由两个主要的部分构成，分别是选择器以及一条或多条说明<br> 选择器通常是用户需要改变样式的HTML元素，选择器直接与HTML代码对应</p>
<h3>HTML网页应用CSS样式的方法</h3>
<p>HTML文档引入CSS样式的方法：</p>
<ol>
<li>行内样式</li>
<li>内嵌样式</li>
<li>链接样式</li>
<li>导入样式</li>
</ol>
<h4>使用行内样式表</h4>
<p>行内样式是最简单的CSS设置方式，需要给每个标签都设置<code>style</code>属性，与样式所定义的内容在同一行代码内，用于精确控制一个HTML元素的表现，代码如下：</p>
<pre><code class="prism language-python"><span class="token operator"><</span>p style<span class="token operator">=</span><span class="token string">"color: blue;font-size: 12px"</span><span class="token operator">></span>行内样式表<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
</code></pre>
<p>这种样式表不经常用，CSS样式与HTML结构没有分离，导致代码冗余，并且不利于维护</p>
<h4>使用内部 CSS</h4>
<p>内部CSS样式表一般是将CSS卸载<code><head></head></code>标签中，并使用<code><style></style></code>标签进行声明，代码如下：</p>
<pre><code class="prism language-python"><span class="token operator"><</span>head<span class="token operator">></span>
<span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span>
<span class="token operator"><</span>title<span class="token operator">></span>Title<span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span>
<span class="token operator"><</span>style<span class="token operator">></span>
p<span class="token punctuation">{</span>
color<span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
font<span class="token operator">-</span>size<span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span>
</code></pre>
<h4>引入外部样式表</h4>
<p>引入外部样式表是使用频率最高、也是最实用的方法，将HTML页面本身与CSS样式分格分离为两个或多个文件，有利于前期制作和后期维护。<br> 引入外部样式表是指在外部定义CSS样式表并形成以<code>.css</code>为扩展名的文件，在页面中通过<code><link/></code>引入页面，代码如下：</p>
<pre><code class="prism language-python"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"style.css"</span><span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<p><code>rel</code>：设置对象与链接目的间的关系，其值为<code>stylesheet</code>。表示关联的是一个样式表<br> <code>href</code>：指定CSS样式表的位置，此处表示当前路径下名称为<code>style.css</code>的文件</p>
<h4>导入外部样式文件</h4>
<p>概念：指在内部样式表的<code><style></code>标签中，使用<code>@import</code>导入一个外部样式表<br> 代码如下：</p>
<pre><code class="prism language-python"><span class="token operator"><</span>head<span class="token operator">></span>
<span class="token operator"><</span>style<span class="token operator">></span>
@<span class="token keyword">import</span> <span class="token string">"style.css"</span><span class="token punctuation">;</span>
<span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span>
</code></pre>
<h4>注释CSS</h4>
<p>使用<code>/*注释内容*/</code>进行注释</p>
<h3>CSS 三大特性</h3>
<p>CSS的三大特性：层叠性、继承性和优先性</p>
<h4>层叠性</h4>
<p>说明：层叠性是处理CSS冲突的能力，当同一个元素同时被两个选择器选中时，CSS会根据选择器的权重决定使用哪个选择器，权重低的选择器效果会被权重高的选择器效果覆盖，权重相同取后者（权重可以理解为选择器对于这个元素的重要性，ID选择器的权重为100，类选择器的权重为10，标签选择器的权重为1）<br> 例：</p>
<pre><code class="prism language-python"><span class="token operator"><</span>!DOCTYPE html<span class="token operator">></span>
<span class="token operator"><</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">></span>
<span class="token operator"><</span>head<span class="token operator">></span>
<span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span>
<span class="token operator"><</span>title<span class="token operator">></span>Title<span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span>
<span class="token operator"><</span>style<span class="token operator">></span>
<span class="token operator">/</span><span class="token operator">*</span><span class="token builtin">id</span><span class="token operator">=</span><span class="token string">"box"</span><span class="token operator">*</span><span class="token operator">/</span>
<span class="token comment">#box p{</span>
color<span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">*</span><span class="token builtin">id</span><span class="token operator">=</span><span class="token string">"box"</span><span class="token punctuation">,</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"box"</span><span class="token operator">*</span><span class="token operator">/</span>
<span class="token comment">#box .box{</span>
color<span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span>
<span class="token operator"><</span>body<span class="token operator">></span>
<span class="token operator"><</span>div <span class="token builtin">id</span><span class="token operator">=</span><span class="token string">"box"</span><span class="token operator">></span>
<span class="token operator"><</span>p <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"box"</span><span class="token operator">></span>我是什么颜色呢？<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span>
</code></pre>
<p>涉及标签说明：</p>
<ol>
<li><code>#box</code>：表示ID选择器，前缀为<code>#</code>，使用方式：<code>id="box"</code></li>
<li><code>.box</code>：表示类选择器，前缀为<code>.</code>使用方式：<code>class="box"</code></li>
</ol>
<h4>继承性</h4>
<p>说明：继承性是子元素继承父元素样式的特性，以<code>text-</code>、<code>font-</code>、<code>line-</code>开头的属性以及<code>color</code>属性都可以继承，<code><a></code>标签的颜色不能继承，<code><h></code>标签的字体大小不能继承。</p>
<h4>优先性</h4>
<p>说明：当不同的规则作用到用一个html元素上时，如果定义的属性存在冲突，属性使用的优先性如下：<br> <strong>!important>行内样式>ID选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性值</strong></p>
<h3>在脚本中修改显示样式</h3>
<p>方法：在脚本中获取元素，修改CSS样式</p>
<h4>随机改变页面的背景色</h4>
<h4>动态增加立体效果</h4>
<p>方法：通过色差简单实现立体效果</p>
<pre><code class="prism language-python"><span class="token operator"><</span>!DOCTYPE html<span class="token operator">></span>
<span class="token operator"><</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">></span>
<span class="token operator"><</span>head<span class="token operator">></span>
<span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span>
<span class="token operator"><</span>title<span class="token operator">></span>Title<span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span>
<span class="token operator"><</span>style<span class="token operator">></span>
<span class="token punctuation">.</span>show<span class="token punctuation">{</span>
width<span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
height<span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
text<span class="token operator">-</span>align<span class="token punctuation">:</span> center<span class="token punctuation">;</span>
line<span class="token operator">-</span>height<span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
border<span class="token operator">-</span>right<span class="token punctuation">:</span> <span class="token comment">#222 20px solid;</span>
border<span class="token operator">-</span>bottom<span class="token punctuation">:</span> <span class="token comment">#222 20px solid;</span>
border<span class="token operator">-</span>top<span class="token punctuation">:</span> <span class="token comment">#ddd 20px solid;</span>
border<span class="token operator">-</span>left<span class="token punctuation">:</span> <span class="token comment">#ddd 20px solid;</span>
background<span class="token operator">-</span>color<span class="token punctuation">:</span> <span class="token comment">#ccc;</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span>
<span class="token operator"><</span>body <span class="token operator">></span>
<span class="token operator"><</span><span class="token builtin">input</span> <span class="token builtin">type</span><span class="token operator">=</span><span class="token string">"button"</span> value<span class="token operator">=</span><span class="token string">"增强立体效果"</span> onclick<span class="token operator">=</span><span class="token string">"change()"</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span>增加分隔线<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>
<span class="token operator"><</span>hr<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>div <span class="token builtin">id</span><span class="token operator">=</span><span class="token string">"box"</span><span class="token operator">></span>立体效果<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
function change<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token operator">//</span>获取<span class="token builtin">id</span><span class="token operator">=</span><span class="token string">"box"</span>的元素，更改其类为show
document<span class="token punctuation">.</span>getElementById<span class="token punctuation">(</span><span class="token string">"box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>className<span class="token operator">=</span><span class="token string">"show"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre>
<h3>实践案例：设计登录和注册页面</h3>
<pre><code class="prism language-css"><span class="token selector"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录和注册页面设计
注释：
placeholder：可描述输入字段预期值的简短的提示信息input：用户可以在其中输入数据的输入字段display：规定元素应该生成的框的类型，属性值①inline，内联元素，特点：与其他元素都在一行上；元素的高度、宽度和顶部和底部的边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。block，块级元素，特点：每个会计元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶部和底部的边距均可设置；元素宽度在不设置的情况下，使它本身父容器的100%（和父容器的宽度一致），除非设定一个宽度。border-radius：给div元素添加圆角边距
就业面试技巧
在加载CSS文件时，link引入外部样式和@import导入外部样式的区别link与@import在显示效果上还是有很大区别的，link的加载会在页面显示之前全部加载，而@import是读取完文件之后再加载，在网络速度很好的情况下，会出现刚开始没有CSS定义，而后才加载CSS定义，@import加载页面时开始的瞬间会有闪烁（无样式表的页面），然后恢复正常（加载样式后的页面），link没有这个问题，推荐使用link引入外部样式。
CSS hack
CSS3 样式选择器
选择器分类
CSS选择器分为五类：
基本选择器
层次选择器（子选择器、兄弟选择器、相邻选择器、包含选择器、分组选择器）
伪类选择器
属性选择器
伪元素选择器
基本选择器
元素选择器
标签选择器（标记选择器、类型选择器），用于声明html标签采用的CSS样式，即重新定义html标签，每个html标签的名称均可作为相应的标签选择器的名称
通配选择器
表示方法：*
* { color : red; }
或者选择某个元素下的所有元素，与其他元素结合使用时，通配选择器可以对特定元素的所有后代应用样式，如为div元素的所有后代添加一个红色背景：
div * { background : red; }
主要用途：在Reset样式文件中，使用通配选择器进行重置，覆盖浏览器的默认规则从而使页面能够兼容多种浏览器（不同浏览器中每个元素的默认边距不一致）
ID选择器
作用：允许以一种独立于文档元素的方式来指定样式，ID选择器前面有一个#，例#red {color:red;},在HTML代码中，id属性为red的p元素显示为红色，这个段落是红色
注 ：同一个id属性在每个HTML文档中只能出现一次
类选择器
作用：允许以一种独立于文档元素的方式来指定样式，类选择器可以单独使用，也可以和其他元素结合使用.classValue{property:value}
群组选择器
作用：对CSS的一种简化写法，把相同定义的不同选择器放在一起，用,分开div,h1,p{background:red;}
层次选择器
作用：通过HTML的DOM元素间的层次关系获取元素，主要层次关系有后代、父子、相邻兄弟和通用兄弟
包含选择器（后代选择器）
作用：选择元素的后代元素，包括子元素、子元素的子元素…，包含选择器和子元素选择器之间使用空格来表示关系div li a{text-decoration:none;}
子选择器
作用：选择一个父元素的直接子元素，不包括子元素的子元素div>a{text-decoration:none;}子选择器与后代选择器的关系 ：子选择器仅作用于它的直接后代，后代选择器作用于所有子后代元素
兄弟选择器
作用：设置某个选择器的兄弟元素的样式
选择器的后面一个兄弟元素，使用+连接选择器：h2+p{color:red}
选择元素后面同一类指定的兄弟元素，使用~连接选择器：h2~p{color:red}
动态伪类选择器
内容相关的属性
内容相关的属性与CSS其他属性一样，需要定义在CSS样式的大括号中，content属性是CSS支持的内容相关的属性中最重要的一个，该属性可以是字符串、url、attr、open-quote等格式
li:before {
content : 'css课程:' ;
color : red;
}
插入图片
content属性除了可以添加字符串外，还可以添加图片content:url("");
只插入部分元素
作用：只为一部分元素插入内容，先把需添加内容的元素找到
"en">
登录和注册页面设计
"part">第一张内容
"part">第二章内容
第三章内容
第四章内容
配合quotes属性执行插入
quotes属性用于设置嵌套引用的引号类型，可以定义为open-quote和close-quote，在content属性中应用
登录和注册页面设计
>第一张内容
"part">第二章内容
第三章内容
第四章内容
配合counter-increment属性添加编号
counter-increment属性用于定义计数器，可用于对多条内容添加编号
登录和注册页面设计
使用自定义编号
CSS默认的编号样式是数字，可以通过counter(name,list-style-type)用法实现使用自定义编号，name是计数器的名字，list-style-type指定自定义编号的样式
decimal：默认值，阿拉伯数字disc：实心圆circle：空心圆square：空心方块lower-roman：小写罗马数字upper-roman：大写罗马数字lower-alpha：小写英文字母upper-alpha：大写英文字母
例：使用自定义编号
登录和注册页面设计
添加多级编号
例：
登录和注册页面设计
HTML
第一章内容
第二章内容
CSS
第一章内容
第二章内容
JavaScript
第一章内容
第二章内容
注释：counter-reset：重置计数器，每次开始新的一级编号的时都重置二级编号
伪类选择器
作用：伪类选择器主要用于对选择器进行限制，对已有选择器匹配到的元素进行过滤
结构性伪类选择器
概念：使用文档结构树实现元素过滤，利用文档结构之间的相互关系来匹配指定的元素，减少对class属性和id属性的定义，使文档更加精炼
:root：匹配文档的根元素:nth-child(n)：匹配父元素的第n个子元素:nth-child(n)：匹配父元素的倒数第n个子元素:nth-of-type：匹配同级元素的第n个元素:nth-last-of-type：匹配同级元素的倒数第n个元素:first-child：匹配父元素的第一个子元素:last-child：匹配父元素的最后一个子元素:first-of-type：匹配同级元素的第一个元素:only-child：匹配必须是其父元素的唯一子节点的元素:only-of-type：匹配同级元素的唯一一个元素:empty：匹配内部没有子元素的元素
例：
"en">
登录和注册页面设计
结构性伪类选择器
结构性伪类选择器
结构性伪类选择器
结构性伪类选择器
UI元素状态伪类选择器
概念：指定的样式只有当元素处于某种状态时，样式才会起作用，在默认状态下不起作用，常见的有：:hover、:active、:focus、:enable、:disable、:read-only、:read-write、:checked、:default、:indeterminate、:selection等
:hover、:focus、:active:hover表示鼠标指针浮动时的样式,:focus表示鼠标指针获得焦点或者进行输入时的样式,:active表示按下鼠标左键且不松开时的样式,正确的编写顺序为:hover、:focus、:active，顺序不正确会导致无法显示。
登录和注册页面设计
手机号 : id="txt" >
:checked、:selection:checked用于指定表单中的radio单选按钮、checkbox复选框处于选中状态时的样式:selection用于指定元素处于选中状态时的样式
"en">
登录和注册页面设计
目标（:target）伪类选择器
作用：动态选择器，匹配相关URL指向的目标元素，只有存在URL指向该匹配元素时，样式效果才会生效href="#box"，同一个页面中也会有以box为id的元素，则#box元素，即box:target选择符所选的元素，当
登录和注册页面设计
"box" >HTML基础知识
"#box">第一章的题目是什么
否定（:not）伪类选择器
作用：过滤含有某个选择器的元素，如p:not(#box)会过滤掉id="#box"的
"en">
登录和注册页面设计
否定伪类选择器 : not ( )
"box">否定伪类选择器 : not ( )
"box">否定伪类选择器 : not ( )
属性选择器
作用：对带有指定属性的HTML元素设置样式，可以指定元素的某个属性，也可以同时指定元素的某个属性和其对应的值
[attribute]：选取带有指定属性的元素[attribute=value]：选取带有指定属性和值的元素[attribute~=value]：选取属性值中包含指定词汇的元素[attribute|=value]：选取带有以指定值开头的属性值的元素，该值必须是整个单词[attribute^=value]：匹配属性值以指定值开头的每个元素[attribute$=value]：匹配属性值以指定值结尾的每个元素[attribute*=value]：匹配属性值中包含指定值的每个元素
例：
"en">
登录和注册页面设计
"da">属性选择器
"db">属性选择器
"ca">属性选择器
"cb">属性选择器
实践案例——制作404页面
"en">
登录和注册页面设计
"box">
404
抱歉...你找的页面不存在了
"返回首页" />
"联系管理" />
注：linear-gradient(direction, color-stop1, color-stop2, ...)：颜色渐变函数
