第一章 基本结构:
HTML5基本结构包括几部分？分别是什么？
答：两部分，分别是头部（head）和主体（body）
头部部分
<title>标题标签title>
身体部分
网页的基本信息有那些？
答：
DOCTYPE声明
解释：必须位于HTML第一行。
标签</p>
<p><span style="font-family: 等线">解释</span>:描述网页的标题。</p>
<p><meta>标签</p>
<p><span style="font-family: 等线">解释：其目的是方便浏览器解析或利于搜索引擎搜索，它采用</span>“名称/值”对的方式描述摘要信息。</p>
<p><span style="font-family: 等线">属性：</span>charset表示字符集编码，常用的编码有一下几种：</p>
<p><span style="font-family: 等线">》</span>gb2312:简体中文；</p>
<p><span style="font-family: 等线">》</span>LSO-885910：纯英文；</p>
<p><span style="font-family: 等线">》</span>big5:繁体；</p>
<p>》UTF-8:支持万国语言（推荐）；</p>
<p align="justify"><strong><span style="font-family: 等线">标题标签有几种？分别是？</span></strong></p>
<p><span style="font-family: 等线">答：有六种，分别是</span><h1>-<h6>。</p>
<p><span style="font-family: 等线">标题标签</span> <strong><h1></strong>最大字体和加粗<strong></h1></strong></p>
<p><strong><h6></strong>最小字体和加粗<strong></h6></strong></p>
<p align="justify"><strong><span style="font-family: 等线">段落标签和换行标签分别是？作用分别是？</span></strong></p>
<p><span style="font-family: 等线">段落</span> <strong><p></strong>段落标签<strong></p></strong></p>
<p><span style="font-family: 等线">换行</span> <strong><br</strong><strong>/</strong><strong>></strong> </p>
<p><span style="font-family: 等线">作用：</span><p>标签表示一个段落，<br/>标签表示强制换行。（属于自闭何标签）</p>
<p align="justify"><strong><span style="font-family: 等线">水平线标签是什么？作用是什么？</span></strong></p>
<p>答：</p>
<p><span style="font-family: 等线">水平线标签</span><hr/>（自闭合标签）</p>
<p><span style="font-family: 等线">作用：</span><hr/>表示一条水平线，可以使版面更加清晰直观。</p>
<p>水平线 <strong><hr</strong><strong>/</strong><strong>></strong></p>
<p align="justify"><strong><span style="font-family: 等线">字体样式标签有几种？分别是什么？</span></strong></p>
<p><span style="font-family: 等线">斜体</span> <strong><em></strong>斜体标签<strong></em></strong> </p>
<p><strong><i></strong>斜体标签<strong></i></strong></p>
<p><strong>其他</strong><strong> </strong><strong> </strong><strong><</strong><strong>u></strong>下划线标签<strong></u></strong></p>
<p><strong><s></strong>删除线标签<strong></s></strong></p>
<p><span style="font-family: 等线">加粗</span> <strong><strong></strong>粗体标签<strong></strong></strong> </p>
<p><strong><b></strong>粗体标签<strong></b></strong></p>
<p align="justify"><strong><span style="font-family: 等线">特殊符号有几个，分别是什么意思？</span></strong></p>
<p><span style="font-family: 等线">答：</span>5个</p>
<p><span style="font-family: 等线">特殊符号</span>: 空格<strong> </strong> <span style="font-family: 等线">小于</span><strong>&l t;</strong> 大于<strong>&g t; </strong> <span style="font-family: 等线">版权</span><strong>? </strong>引号"</p>
<p align="justify"><strong><span style="font-family: 等线">图片标签是什么，分别包括什么属性？</span></strong></p>
<p><span style="font-family: 等线">图像标签</span> : 路径 宽 高 <span style="font-family: 等线">鼠标悬浮提示文字</span> 未加载出提示</p>
<p> <strong><img src=" Ko.jpg" width="200" </strong><strong>height=</strong><strong>”200”title="考拉" alt="</strong><strong>未加载出提示</strong><strong>"></strong></p>
<p align="justify"><strong><span style="font-family: 等线">超链接有哪些类型？它们的区别是什么？</span></strong></p>
<p>有页面间链接，锚链接和功能性链接。</p>
<p><span style="font-family: 等线">页面间链接：是</span>A页面到B页面。最常用的一种。</p>
<p><span style="font-family: 等线">锚链接：是</span>A页甲位置到A页乙位置或A页甲位置到B页乙位置。</p>
<p><span style="font-family: 等线">功能性链接：页面中调用其他程序功能</span> <span style="font-family: 等线">如：电子邮件</span> QQ等。</p>
<p align="justify"><strong><span style="font-family: 等线">超链接标签是什么，分别包含什么属性？</span></strong></p>
<p><span style="font-family: 等线">答：</span><a>超链接标签</p>
<p>属性：</p>
<p><span style="font-family: 等线">》</span>href=“链接地址”</p>
<p><span style="font-family: 等线">》</span>target=“目标窗口位置”</p>
<p> <span style="font-family: 等线">超链接</span></p>
<p> 1.页面间的连接 <span style="font-family: 等线">目标窗口位置</span> <span style="font-family: 等线">自身</span></p>
<p> <strong><a href="test01.html" target="_self"></strong>点我打开第一个页面<strong></a></strong></p>
<p> <strong>_blank </strong>新窗口</p>
<p> <strong>_self </strong> <span style="font-family: 等线">自身窗口</span>(默认值)</p>
<p> 2.锚链接</p>
<p> <strong><a name="名字"></a></strong></p>
<p><strong> <a href="#名字"></strong><span style="font-family: 等线">文字</span>/图片<strong></a></strong></p>
<p><strong><img src="image/</strong><strong>r</strong><strong>img1.png" alt=""></strong></p>
<p><strong><a name="F1"></a></strong></p>
<p><strong><img src="image/img2.png" alt=""></strong></p>
<p><strong><a name="</strong><strong>F2</strong><strong>"></a></strong></p>
<p><strong><p></strong></p>
<p><strong> </strong><strong><a href="#F1">1楼</a><br></strong></p>
<p><strong> </strong><strong><a href="#F2">2楼</a><br></strong></p>
<p><strong></p></strong></p>
<p> <strong><span style="font-family: 等线">块元素</span> <span style="font-family: 等线">独占一行</span> p h1~h6</strong></p>
<p><strong><span style="font-family: 等线">行内元素</span> <span style="font-family: 等线">宽度由内容撑开</span> strong a img</strong></p>
<p><strong>页面编码应与页面文件保存时的编码一致</strong></p>
<h1><strong><span style="font-family: 等线">第二章</span> <span style="font-family: 等线">列表，表格与媒体元素</span></strong></h1>
<p align="justify"><strong><span style="font-family: 等线">无序列表有哪几个标签组成？</span></strong></p>
<p>答：</p>
<p><span style="font-family: 等线">无序列表由</span><ul>标签和<li>标签组成。</p>
<p><strong>无序列表</strong></p>
<p><strong> </strong><strong> </strong><strong><</strong><strong>ul></strong></p>
<p><strong> </strong><strong> <li></strong><strong><span style="font-family: 等线">第</span>1项</strong><strong></li></strong></p>
<p><strong><li></strong><strong><span style="font-family: 等线">第</span>2项</strong><strong></li></strong></p>
<p><strong><li></strong><strong><span style="font-family: 等线">第</span>3项</strong><strong></li></strong></p>
<p><strong><</strong><strong>/</strong><strong>ul></strong></p>
<p><strong><span style="font-family: 等线">遵循</span>W3C标准，<</strong><strong>ul></strong><strong><span style="font-family: 等线">标签里面只能嵌套</span><</strong><strong>li></strong><strong>标签，不能嵌套其他标签。</strong></p>
<p><strong><</strong><strong>li></strong><strong>标签里面可以嵌套任意标签。</strong></p>
<p><strong><span style="font-family: 等线">（</span>1）.没有顺序，每个<</strong><strong>li></strong><strong>标签独占一行（块元素）。</strong></p>
<p><strong><span style="font-family: 等线">（</span>2）.默认<</strong><strong>li></strong><strong>标签项前面有个实心小圆点。</strong></p>
<p><strong><span style="font-family: 等线">（</span>3）.一般用于无须类型列表，如导航，侧边栏，有规律的图文组合模块等。</strong></p>
<p align="justify"><strong><span style="font-family: 等线">有序列表有那几个标签组成？</span></strong></p>
<p>答：</p>
<p><span style="font-family: 等线">有序列表由</span><ol>标签和<li>标签组成。</p>
<p><strong><span style="font-family: 等线">有序列表</span> </strong><strong> </strong></p>
<p><strong><</strong><strong>ol type="</strong><strong>1</strong><strong>"> </strong><strong>有序列表可以</strong><strong>1 </strong><strong>，</strong><strong> A </strong><strong>，</strong><strong> a </strong><strong>，</strong><strong> I </strong><strong>，</strong><strong> </strong><strong>i</strong><strong> </strong><strong>，</strong><strong>类型标记顺序。</strong></p>
<p><strong> </strong><strong> </strong><strong><li></strong><strong><span style="font-family: 等线">第</span>1项</strong><strong></li></strong></p>
<p><strong> </strong><strong> </strong><strong><li></strong><strong><span style="font-family: 等线">第</span>2项</strong><strong></li></strong></p>
<p><strong> </strong><strong> </strong><strong><li></strong><strong><span style="font-family: 等线">第</span>3项</strong><strong></li></strong></p>
<p><strong></ol></strong></p>
<p><strong><span style="font-family: 等线">（</span>1）.有顺序，每个</strong><strong><li></strong><strong>标签独占一行（块元素）。</strong></p>
<p><strong><span style="font-family: 等线">（</span>2）.默认<</strong><strong>li></strong><strong>标签项前面有顺序标记。</strong></p>
<p><strong><span style="font-family: 等线">（</span>3）.一般用于排序类型的列表，如试卷，问卷选项等。</strong></p>
<p align="justify"><strong><span style="font-family: 等线">定义列表有那几个标签组成？</span></strong></p>
<p>答：</p>
<p><span style="font-family: 等线">它使用</span><dl>标签组作为列表的开始，使用<dt>标签作为每个列表的起始，而列表里的定义项由<dd>标签完成。</p>
<p><strong> </strong></p>
<p><strong>定义列表</strong></p>
<p><strong><</strong><strong>dl></strong></p>
<p><strong> </strong><strong> </strong><strong><dt></strong><strong>标题一</strong><strong></dt></strong></p>
<p><strong> </strong><strong> </strong><strong><</strong><strong>dd></strong><strong><span style="font-family: 等线">第</span>1项</strong><strong></dd></strong></p>
<p><strong> </strong><strong> </strong><strong><</strong><strong>dd></strong><strong><span style="font-family: 等线">第</span>2项</strong><strong></dd></strong></p>
<p><strong> </strong><strong> </strong></p>
<p><strong><dt></strong><strong>标题一</strong><strong></dt></strong></p>
<p><strong> </strong><strong> </strong><strong><</strong><strong>dd></strong><strong><span style="font-family: 等线">第</span>1项</strong><strong></dd></strong></p>
<p><strong> </strong><strong> </strong><strong><</strong><strong>dd></strong><strong><span style="font-family: 等线">第</span>2项</strong><strong></dd></strong></p>
<p><strong></dl></strong></p>
<p><strong>(</strong><strong>1).</strong><strong><span style="font-family: 等线">没有顺序，每个</span><</strong><strong>dt></strong><strong><span style="font-family: 等线">标签，</span><</strong><strong>dd></strong><strong><span style="font-family: 等线">标签独占一行</span>(块元素</strong><strong>)</strong><strong>。</strong></p>
<p><strong>(</strong><strong>2).</strong><strong>默认没有标记。</strong></p>
<p><strong>(</strong><strong>3).</strong><strong><span style="font-family: 等线">一般用于（一个标题下有一个或多个列表项）</span>*</strong><strong>n</strong><strong>的情况。</strong></p>
<p><strong><span style="font-family: 等线">表单由几个标签组成？包含几个属性？跨行和跨列的属性分别是什么？</span></strong></p>
<p>答：</p>
<p>1》<table>标签来创建表单的框架。</p>
<p>2》<tr>标签属于建行标签。</p>
<p>3》<th>标签用于创建表格的标题。</p>
<p>4》<td>标签用来创建单元格。</p>
<p><strong><table>标签的属性：</strong></p>
<p><strong>border=“表框的宽度”</strong></p>
<p><strong>cellpadding=“外边距”</strong></p>
<p><strong>cellspacing=“内边距</strong><strong>”</strong></p>
<p><strong>colspan跨列</strong><strong> </strong></p>
<p><strong>rowspan跨行 </strong></p>
<p><strong>表格</strong><strong> </strong><strong><table> 1行2列 </strong></p>
<p><strong> <tr> </strong><strong>1行</strong></p>
<p><strong><</strong><strong>th></strong><strong><span style="font-family: 等线">标题</span><</strong><strong>/</strong><strong>th</strong><strong>></strong></p>
<p><strong> <td></strong><strong>1列</strong><strong></td></strong></p>
<p><strong> <td></strong><strong>2列</strong><strong></td></strong></p>
<p><strong> </strong><strong> </strong><strong><td </strong><strong>col</strong><strong>span=”</strong><strong>跨列数</strong><strong>”></strong><strong>3列</strong><strong></td></strong></p>
<p><strong> </strong><strong> </strong><strong><td rowspan=”</strong><strong>跨行数</strong><strong>”></strong><strong>4列</strong><strong></td></strong></p>
<p><strong> </tr> </strong><strong>1行</strong></p>
<p><strong> </table></strong></p>
<p><strong>跨行和跨列以后，并不改变表格的特点，同行的总高度一致，同列的总宽度一致。因此，表格中各单元格的宽度或高度互相影响，结构相对稳定，但缺点是不能灵活地进行布局控制。</strong></p>
<p align="justify"><strong><span style="font-family: 等线">视频元素包含几个标签？包含几个属性？</span></strong></p>
<p><strong>视频元素</strong><strong> <span style="font-family: 等线">控制条</span> <span style="font-family: 等线">自动播放</span> <span style="font-family: 等线">循环</span> .mp4+.ogg/.WebM</strong></p>
<p><strong><video controls autoplay loop></strong></p>
<p><strong> </strong><strong> </strong><strong>根源</strong></p>
<p><strong><source src="vedio/movie.mp4"></strong></p>
<p><strong> <source src="vedio/movie.ogg"></strong></p>
<p><strong> </video></strong></p>
<p align="justify"><strong><span style="font-family: 等线">音乐元素包含几个标签？包含几个属性？</span></strong></p>
<p><strong>音频元素</strong><strong> </strong><strong>audio </strong><strong>音频和视频步骤一样，只是</strong><strong>video</strong><strong><span style="font-family: 等线">和</span>audio替换下。</strong></p>
<p align="justify"><strong>HTML5包含几个结构元素？</strong></p>
<p><strong>答：</strong></p>
<p><strong>页面结构</strong><strong>: </strong></p>
<p><strong>header</strong><strong>（头部）</strong><strong> </strong></p>
<p><strong>section</strong><strong>（主体）</strong><strong> </strong></p>
<p><strong>footer</strong><strong>（页脚）</strong></p>
<p><strong>article（独立的文章内容 ）</strong></p>
<p><strong>aside内容或应用（冲用于侧边栏）</strong></p>
<p><strong>nav（导航类辅助内容）</strong></p>
<p align="justify"><strong><span style="font-family: 等线">内联框架的包括几个标签？几个属性？</span></strong></p>
<p><strong><span style="font-family: 等线">答：</span><iframe>...</iframe>内联标签</strong></p>
<p><strong>属性：</strong></p>
<p><strong>src=“引用页面地址”</strong></p>
<p><strong>name=“框架标识名”</strong></p>
<p><strong>浮动框架</strong></p>
<p><strong>iframe</strong><strong> <span style="font-family: 等线">引用外部</span></strong><strong>.html </strong><strong>也就是一个网页嵌套另一个网页内容。</strong></p>
<p><strong> </strong><strong>第三章</strong></p>
<p><strong>表格单</strong></p>
<p><strong><span style="font-family: 等线">表单的标签包括几个？属性有几个？</span></strong></p>
<p><strong>答：</strong></p>
<p><strong>属性：</strong></p>
<p><strong><input </strong><strong>type=""</strong><strong> <span style="font-family: 等线">类型</span></strong></p>
<p><strong> </strong><strong>name=""</strong><strong> <span style="font-family: 等线">名字</span></strong></p>
<p><strong> </strong><strong>id=""</strong></p>
<p><strong> </strong><strong>value=""</strong><strong> </strong><strong> <span style="font-family: 等线">值</span></strong></p>
<p><strong> </strong><strong>size=""</strong><strong> <span style="font-family: 等线">文本框的长度</span></strong></p>
<p><strong> </strong><strong>maxlength="5"</strong><strong> <span style="font-family: 等线">最大输入数量</span></strong></p>
<p><strong> </strong><strong>minlength=""</strong></p>
<p><strong> </strong><strong>readonly</strong><strong> <span style="font-family: 等线">只读</span></strong></p>
<p><strong> </strong><strong>required </strong><strong> <span style="font-family: 等线">必填项</span></strong></p>
<p><strong> </strong><strong>placeholder</strong><strong> <span style="font-family: 等线">输入提示</span></strong></p>
<p><strong>type属性的那几个元素控制文本框、密码框、邮箱、网站和文件域？</strong></p>
<p><strong><span style="font-family: 等线">答</span>:</strong></p>
<p><strong>type : text 文本框</strong></p>
<p><strong> password </strong><strong>密码框</strong></p>
<p><strong> email</strong></p>
<p><strong>url</strong><strong>网站</strong></p>
<p><strong> file </strong><strong>文件</strong><strong>;</strong><strong>文本域</strong></p>
<p><strong>type属性的那几个元素控制单选按钮、复选框和按钮（普通、提交、重置）？</strong></p>
<p><strong>答：</strong></p>
<p><strong> submit </strong><strong>提交</strong></p>
<p><strong> reset </strong><strong>重置</strong></p>
<p><strong>button</strong><strong>普通按钮</strong></p>
<p><strong> image </strong><strong>图片提交按钮</strong><strong>(src)</strong></p>
<p><strong> radio </strong><strong>单选</strong><strong>(name必须一致) 选中:checked</strong></p>
<p><strong> checkbox </strong><strong><span style="font-family: 等线">复选框</span> </strong><strong> <span style="font-family: 等线">选中</span>:checked</strong></p>
<p><strong>type属性的那几个元素控制数字、滑块、搜索框和隐藏域（数字和滑块元素中有几个属性可以控制输入数字的范围）？</strong></p>
<p><strong>答：</strong></p>
<p><strong>number</strong><strong>数字</strong></p>
<p><strong>rang</strong><strong>滑块</strong></p>
<p><strong>属性：</strong></p>
<p><strong>max=</strong><strong>””</strong><strong>规定的最大值。</strong></p>
<p><strong>min=</strong><strong>””</strong><strong>规定的最小值。</strong></p>
<p><strong>value=</strong><strong>””</strong><strong>规定的默认值。</strong></p>
<p><strong>stop=</strong><strong>””</strong><strong>规定合法数字的间隔。</strong></p>
<p><strong>search</strong><strong>搜索框</strong></p>
<p><strong>hidden</strong><strong>隐藏域</strong></p>
<p><strong> </strong><strong><span style="font-family: 等线">列表框和文件域需要用到什么标签和属性？</span></strong></p>
<p><strong><span style="font-family: 等线">答：列表框</span><select>..</select>标签来实现框架，每个选项用<option>..</option>来实现。文件域用<textarea>..</textarea>标签来实现框架。</strong></p>
<p><strong>属性：</strong></p>
<p><strong>列表框：</strong></p>
<p><strong>name=“指定列表名称”。</strong></p>
<p><strong>size=“行数”。</strong></p>
<p><strong>value=“可选项的值”。</strong></p>
<p><strong>文件域：</strong></p>
<p><strong>cols=“显示的列数”。</strong></p>
<p><strong>rows=“显示的行数”。</strong></p>
<p><strong> </strong></p>
<p><strong> </strong><strong>下拉框</strong><strong> <select name=" "></strong></p>
<p><strong> <option value="s1" selected>第一学期</option></strong></p>
<p><strong> </select></strong></p>
<p><strong> </strong><strong>文本域</strong><strong> <textarea name="" cols="30" rows="10"></textarea></strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong><strong><span style="font-family: 等线">初步验证</span>:</strong></p>
<p><strong> placeholder </strong><strong>输入提示</strong></p>
<p><strong>required </strong><strong>必填项</strong></p>
<p><strong>pattern</strong><strong> </strong><strong>验证用户录入的信息</strong></p>
<p><strong> pattern="^1[358]\d{9}" </strong><strong><span style="font-family: 等线">正则表达式</span> :</strong><strong> <span style="font-family: 等线">以</span>13,15,18开始的11位数字</strong></p>
<p><strong>pattern="\d | [1-9]\d | 1[0-2]\d"</strong></p>
<p><strong> </strong></p>
<p><strong>第四章</strong></p>
<p><strong>初识</strong><strong>CSS</strong></p>
<p><strong><span style="font-family: 等线">行内样式怎么使用？</span></strong></p>
<p> <strong><span style="font-family: 等线">答：属性</span>style="" </strong></p>
<p><strong>行内样式</strong><strong> </strong><strong><span style="font-family: 等线">属性</span>style=""</strong><strong> <span style="font-family: 等线">只对当前标签有效</span></strong></p>
<p><strong><span style="font-family: 等线">内部样式表使用什么标签？</span></strong></p>
<p> <strong><span style="font-family: 等线">答：</span>style标签 </strong></p>
<p><strong>内部样式表</strong><strong> </strong><strong>style标签</strong><strong> <span style="font-family: 等线">对当前页面有效</span></strong></p>
<p><strong> </strong></p>
<p><strong><span style="font-family: 等线">外部样式怎样引用？</span></strong></p>
<p><strong><span style="font-family: 等线">答：</span> </strong><strong><link rel="stylesheet" href="xxx.css"></strong></p>
<p><strong>外部</strong><strong> </strong><strong>.css</strong><strong> </strong><strong><link rel="stylesheet" href="xxx.css"></strong></p>
<p><strong>行内</strong><strong>>内部>外部 就近原则</strong></p>
<p><strong><span style="font-family: 等线">基本选择器有哪些？如何使用？</span></strong></p>
<p><strong><span style="font-family: 等线">答</span> <span style="font-family: 等线">使用方法</span></strong></p>
<p><strong> <span style="font-family: 等线">基本选择器</span> </strong></p>
<p><strong><span style="font-family: 等线">标签</span> p h2</strong></p>
<p><strong> <span style="font-family: 等线">类</span> .名{} class="名"</strong></p>
<p><strong> Id #名{} id="名"</strong></p>
<p><strong>ID>类>标签</strong></p>
<p><strong>实例：</strong></p>
<p><strong><span style="font-family: 等线">标签</span> </strong><strong>p h2</strong></p>
<p><strong>p{</strong></p>
<p><strong>font-size: 20px;</strong><strong><br></strong><strong> </strong><strong>color:blue;</strong></p>
<p><strong> </strong><strong> </strong><strong>}</strong><strong><br></strong></p>
<p><strong> </strong></p>
<p><strong><span style="font-family: 等线">类</span> </strong><strong>.名{} class="名"</strong></p>
<p><strong> </strong><strong>.lan{</strong></p>
<p><strong> color:blue;</strong></p>
<p><strong> font-size: 20px;</strong></p>
<p><strong> }</strong></p>
<p><strong> </strong></p>
<p><strong>Id </strong><strong> #名{} id="名"</strong></p>
<p><strong> </strong><strong>#ming{</strong></p>
<p><strong> color:deeppink;</strong></p>
<p><strong>}</strong></p>
<p><strong><span style="font-family: 等线">高级选择器有哪些？如何使用？</span></strong></p>
<p><strong>答</strong></p>
<p><strong> </strong><strong><span style="font-family: 等线">层次</span> <span style="font-family: 等线">后代</span>(空格) 子(>) 相邻兄弟(+) 通用兄弟(~)</strong></p>
<p><strong> </strong><strong><span style="font-family: 等线">结构伪类</span> div>p:nth-of-type(数字/odd/even){}</strong></p>
<p><strong>实例：</strong></p>
<p><strong><span style="font-family: 等线">层次</span> <span style="font-family: 等线">后代</span>(</strong><strong>空格</strong><strong>) </strong></p>
<p><strong>#hezi p{</strong></p>
<p><strong> </strong></p>
<p><strong> } </strong></p>
<p><strong><span style="font-family: 等线">子</span>(</strong><strong>></strong><strong>)</strong><strong> </strong></p>
<p><strong>#hezi>p{</strong></p>
<p><strong> </strong></p>
<p><strong> }</strong></p>
<p><strong><span style="font-family: 等线">相邻兄弟</span>(</strong><strong>+</strong><strong>) </strong></p>
<p><strong>.zi+p{</strong></p>
<p><strong> </strong></p>
<p><strong> } </strong></p>
<p><strong><span style="font-family: 等线">通用兄弟</span>(</strong><strong>~</strong><strong>)</strong></p>
<p><strong>.zi~p{</strong></p>
<p><strong> </strong></p>
<p><strong>}</strong></p>
<p><strong><span style="font-family: 等线">结构伪类</span> </strong><strong>div>p:nth-of-type(数字/odd/even){}</strong></p>
<p><strong> </strong><strong>#hezi>p:nth-of-type(odd){</strong></p>
<p><strong> </strong></p>
<p><strong> }</strong></p>
<p><strong> </strong><strong>#hezi>p:nth-of-type(even){</strong></p>
<p><strong> </strong></p>
<p><strong> }</strong></p>
<p><strong> <span style="font-family: 等线">属性</span> </strong><strong>p[id] [id=""]</strong></p>
<p><strong> [id^=""]以开始</strong></p>
<p><strong> [id$=""]以结尾</strong></p>
<p><strong> [id*=""]包含</strong></p>
<p><strong> </strong><strong>例子：</strong></p>
<p><strong>p[id*="l"]{</strong></p>
<p><strong> </strong></p>
<p><strong> }</strong></p>
<p><strong><div id="hezi"></strong></p>
<p><strong> </strong><strong><p id="ldl1">第1个p标签</p></strong></p>
<p><strong> </strong><strong><p id="dl2">第2个p标签</p></strong></p>
<p><strong> </strong><strong><p id="hal">第3个p标签</p></strong></p>
<p><strong> </strong></p>
<p><strong> </strong><strong>第五章</strong></p>
<p><strong> </strong><strong> CSS</strong><strong>3美化网页元素</strong></p>
<p><strong><span style="font-family: 等线">字体标签有哪些？有什么作用？</span></strong></p>
<p><strong>span标签 突出显示段落里某几个字</strong></p>
<p><strong>p{</strong></p>
<p><strong> </strong><strong>font-family: </strong><strong>"宋体"; 类型</strong></p>
<p><strong> font-size: 30px; 大小</strong></p>
<p><strong> font-weight: bold; 加粗</strong></p>
<p><strong> font-style: italic; 风格:斜体</strong></p>
<p><strong> </strong></p>
<p><strong> color:red;</strong></p>
<p><strong> color:#d80000;</strong></p>
<p><strong> color:rgb(250,25,215);</strong></p>
<p><strong> color:rgba(0,0,0,0.2); 透明度(0-1)</strong></p>
<p><strong><span style="font-family: 等线">文本标签有哪些？有什么作用？</span></strong></p>
<p><strong> text-indent: 2em; </strong><strong><span style="font-family: 等线">首行缩进</span>2字符</strong></p>
<p><strong> text-align:center; </strong><strong><span style="font-family: 等线">对齐方式</span>(left/right)</strong></p>
<p><strong> line-height: 35px; </strong><strong>行高</strong></p>
<p><strong> text-decoration:underline; 下划线 line-through;删除线</strong></p>
<p><strong> text-shadow: #000 2px 2px 10px; 文本阴影</strong></p>
<p><strong> }</strong></p>
<p><strong> </strong><strong>a{text-decoration: none;} </strong><strong>去下划线</strong></p>
<p><strong> </strong><strong>a:hover{} </strong><strong>鼠标悬</strong></p>
<p><strong> </strong><strong>li{list-style: none;} </strong><strong>li去点</strong></p>
<p><strong> </strong><strong><span style="font-family: 等线">图片</span> <span style="font-family: 等线">垂直</span> </strong><strong> </strong><strong><span style="font-family: 等线">一行</span> </strong><strong> </strong><strong>中间</strong></p>
<p><strong>img{vertical-align: middle;} </strong><strong>垂直对齐</strong></p>
<p><strong> </strong></p>
<p><strong><span style="font-family: 等线">如何加背景颜色和图片以及图片位置？</span></strong></p>
<p><strong> <span style="font-family: 等线">背景颜色</span> <span style="font-family: 等线">图片路径</span> <span style="font-family: 等线">水平</span> <span style="font-family: 等线">垂直</span> <span style="font-family: 等线">不平铺</span></strong></p>
<p><strong> background: #518700 url(image/bang.gif) 125px center no-repeat;</strong></p>
<p><strong> </strong><strong><span style="font-family: 等线">背景</span> </strong><strong> </strong><strong><span style="font-family: 等线">直线的</span> </strong><strong> </strong><strong><span style="font-family: 等线">变化率</span> </strong><strong> </strong><strong><span style="font-family: 等线">到下方</span> </strong><strong> </strong><strong><span style="font-family: 等线">颜色</span> </strong><strong> </strong><strong>颜色</strong></p>
<p><strong>background: linear-gradient(to bottom,#F9FBD0,#F8F8F2); 线性渐变</strong></p>
<p><strong> </strong></p>
<p><strong> </strong><strong>第六章</strong></p>
<p class="17"><strong>盒子模型</strong></p>
<p><strong><span style="font-family: 等线">画一个</span>:1像素 实线 绿色的边框</strong></p>
<p><strong>border:1px solid green; 四个边框:1像素 实线 绿色 </strong></p>
<p><strong>dashed</strong><strong>虚线</strong></p>
<p><strong> border-bottom: 1px solid red; 下边框</strong></p>
<p><strong><span style="font-family: 等线">设置外边距使用那个属性值？如何使用外边距属性可以在父元素水平居中</span></strong></p>
<p><strong> margin: 10px 20px; 外边距:上下 左右</strong></p>
<p><strong> margin: 0 auto; 在父元素水平居中(块元素,设置了宽度)</strong></p>
<p><strong><span style="font-family: 等线">设置内边距用哪个属性？</span></strong></p>
<p><strong> padding:10px; 内边距</strong><strong>调整</strong></p>
<p><strong><span style="font-family: 等线">拯救布局的语法？</span></strong></p>
<p><strong>box-sizing: border-box; (内容+内边距+边框) </strong></p>
<p><strong><span style="font-family: 等线">默认解析方式</span>: content-box(内容)</strong></p>
<p><strong><span style="font-family: 等线">如何设置一个圆角边框？</span></strong></p>
<p><strong>border-radius: 50%; 圆角:圆</strong></p>
<p><strong><span style="font-family: 等线">如何设置盒子阴影？</span></strong></p>
<p><strong>box-shadow:10px 15px 5px #666; 阴影:x轴 y轴 模糊 颜色</strong></p>
<p><strong> </strong></p>
<p><strong>第七章</strong></p>
<p><strong><span style="font-family: 等线">浮</span> </strong><strong> </strong><strong>动</strong></p>
<p><strong>display里的四个值是什么 分别有什么作用？</strong></p>
<p><strong>display: inline 行内</strong></p>
<p><strong> inline-block </strong><strong>行内的块</strong></p>
<p><strong> block </strong><strong><span style="font-family: 等线">块</span>(支持宽,高)</strong></p>
<p><strong> none </strong><strong>隐藏</strong></p>
<p><strong><span style="font-family: 等线">浮动使用那个属性？</span></strong></p>
<p><strong>float: left/right 左/右 浮动</strong></p>
<p><strong><span style="font-family: 等线">如何清除浮动块</span> <span style="font-family: 等线">使用</span>clear实现？</strong><strong> </strong></p>
<p><strong><span style="font-family: 等线">清除浮动</span> .clear:after{</strong></p>
<p><strong> content: ""; 内容</strong><strong> <span style="font-family: 等线">容量</span></strong></p>
<p><strong> display: block; 块</strong></p>
<p><strong> clear: both; 清除两边浮动</strong></p>
<p><strong> }</strong></p>
<p><strong> </strong></p>
<p><strong>第八章</strong></p>
<p><strong>定位网页元素</strong></p>
<p><strong><span style="font-family: 等线">默认定位</span></strong></p>
<p><strong> </strong></p>
<p><strong>position:static</strong></p>
<p><strong>s</strong><strong>tatic:</strong><strong>默认值，没有定位，元素按照标准文档流进行布局。</strong></p>
<p><strong> </strong></p>
<p><strong><span style="font-family: 等线">相对定位</span></strong></p>
<p><strong><span style="font-family: 等线">位置</span> </strong><strong> </strong><strong>相关的</strong></p>
<p><strong>position:relative </strong></p>
<p><strong>relative: 相对定位: 自身原来的位置(父元素)</strong></p>
<p><strong><span style="font-family: 等线">绝对定位</span></strong></p>
<p><strong><span style="font-family: 等线">位置</span> </strong><strong> </strong><strong>绝对的</strong></p>
<p><strong>position:absolute</strong></p>
<p><strong>absolute: 绝对定位; 以设置过定位的父元素为参考基准</strong></p>
<p><strong><span style="font-family: 等线">固定定位</span></strong></p>
<p><strong><span style="font-family: 等线">位置</span> </strong><strong> </strong><strong>固定的</strong></p>
<p><strong>position:fixed</strong></p>
<p><strong>f</strong><strong>ixed:</strong><strong>固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器窗口的滚动条时，依然保持对象位置不变。</strong></p>
<p><strong>例如：</strong><strong> </strong></p>
<p><strong><span style="font-family: 等线">父元素</span>:position: relative;</strong></p>
<p><strong> </strong><strong><span style="font-family: 等线">子元素</span>:position: absolute;</strong></p>
<p><strong> </strong><strong>left: 50px;</strong></p>
<p><strong> </strong><strong>top:10px;</strong></p>
<p><strong>第九章</strong></p>
<p><strong>CSS3动画</strong></p>
<p><strong>CSS3有几种基本动画效果？</strong></p>
<p><strong><span style="font-family: 等线">改变</span> <span style="font-family: 等线">变换</span> </strong><strong> </strong><strong>转化</strong></p>
<p><strong>transform: translate(0px,20px); </strong><strong>位移</strong></p>
<p><strong> </strong><strong>级别</strong></p>
<p><strong>scale(0.7); </strong><strong><span style="font-family: 等线">缩放</span>0-1缩小 >1放大</strong></p>
<p><strong> </strong><strong>斜的</strong></p>
<p><strong>skew(30deg); 倾斜 deg度</strong></p>
<p><strong> </strong><strong>旋转</strong></p>
<p><strong>rotate(360deg); 旋转 deg度</strong></p>
<p><strong><span style="font-family: 等线">怎么去设置动画过度时间？</span></strong></p>
<p><strong> </strong></p>
<p><strong><span style="font-family: 等线">过渡</span> <span style="font-family: 等线">属性</span> <span style="font-family: 等线">过渡时间</span> <span style="font-family: 等线">方式</span></strong></p>
<p><strong> transition: all 2s ease;</strong></p>
<p><strong><span style="font-family: 等线">怎么自定动画？</span></strong></p>
<p><strong> 2.自定义动画</strong></p>
<p><strong> @keyframes 名称 {</strong></p>
<p><strong> 25%{</strong></p>
<p><strong> background: url(image/2.jpg);</strong></p>
<p><strong> </strong><strong> </strong><strong>遮盖</strong></p>
<p><strong> background-size: cover;</strong></p>
<p><strong> }</strong></p>
<p><strong> }</strong></p>
<p><strong>无限的</strong></p>
<p><strong> animation: 名称 10s ease infinite;</strong></p>
</div>
<!--conend-->
<div class="p-2"></div>
<div class="arcinfo my-3 fs-7 text-center">
<a href='/t/etagid263-0.html' class='tagbtn' target='_blank'>html</a>
</div>
<div class="p-2"></div>
</div>
<div class="p-2"></div>
<!--xg-->
<div class="lbox p-4 shadow-sm rounded-3">
<div class="boxtitle"><h2 class="fs-4">相关</h2></div>
<hr>
<div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566535.html">html标签</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564642.html">HTML和CSS</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561490.html">HTML表单</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-558169.html">HTML5新增</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557384.html">Jmeter+ant实现自动生成基于HTML报告及自动发送邮件</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555707.html">Python 发送HTML格式的邮件</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555700.html">shell 拼接html table 发送邮件</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555084.html">html入门-狂神学java</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-552454.html">SAP导出报表格式XXl、XML、XLSX、MHTML选择</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-549821.html">HTML5手机APP开发入门(2)</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-548983.html">https://m.php.cn/vuejs/464077.html</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-547475.html">HTML+CSS系列:登录界面实现</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div>
<!---->
<!---->
</div>
<!--xgend-->
</div>
<div class="col-lg-3 col-12 p-0 ps-lg-2">
<!--box-->
<!--boxend-->
<!--<div class="p-2"></div>-->
<!--box-->
<div class="lbox p-4 shadow-sm rounded-3">
<div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div>
<div class="clearfix"></div>
<ul class="m-0 p-0 fs-7 r-tag">
</ul>
<div class="clearfix"></div>
</div>
<!--box end-->
</div>
</div>
</div>
</main>
<div class="p-2"></div>
<footer>
<div class="container-fluid p-0 bg-black">
<div class="container p-0 fs-8">
<p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p>
</div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
</body>
</html>