<p><span style="color:#34495e;">4. </span><span style="color:#34495e;">文本标签通常都是行内元素。</span></p>
<h5><span style="color:#34495e;">2.</span>文本修饰标签</h5>
<ul><li> <p>加粗：</p> </li><li> <p>斜体：</p> </li><li> <p>上标文本：</p> </li></ul>
<pre></pre>
<ul><li> <p>下标文本：</p> </li></ul>
<pre></pre>
<p></p>
<ul><li> <p>删除文本：</p> </li><li> <p>插入文本：</p> </li></ul>
<pre></pre>
<ul><li> <p>包裹容器，无语义（div的缩小版）：</p> </li></ul>
<h4><strong>5.不常用的文本标签</strong></h4>
<p><img alt="" height="1166" src="https://i-blog.csdnimg.cn/direct/7779ae4ac73946269733275632eeb424.png" width="968" /></p>
<p></p>
<p><span style="color:#777777;">备注： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#777777;">这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#e96900;">blockquote </span><span style="color:#777777;">与 </span><span style="color:#e96900;">address </span><span style="color:#777777;">是块级元素，其他的文本标签，都是行内元素。 </span></p>
<p><span style="color:#777777;">3. </span><span style="color:#777777;">有些语义感不强的标签，我们很少使用，例如： </span></p>
<p><span style="color:#e96900;">small </span><span style="color:#777777;">、 </span><span style="color:#e96900;">b </span><span style="color:#777777;">、 </span><span style="color:#e96900;">u </span><span style="color:#777777;">、 </span><span style="color:#e96900;">q </span><span style="color:#777777;">、 </span><span style="color:#e96900;">blockquote </span></p>
<p><span style="color:#777777;">4. HTML</span><span style="color:#777777;">标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些： </span></p>
<p><span style="color:#e96900;">h1~h6 </span><span style="color:#777777;">、 </span><span style="color:#e96900;">p </span><span style="color:#777777;">、 </span><span style="color:#e96900;">div </span><span style="color:#777777;">、 </span><span style="color:#e96900;">em </span><span style="color:#777777;">、 </span><span style="color:#e96900;">strong </span><span style="color:#777777;">、 </span><span style="color:#e96900;">span </span></p>
<h4><span style="color:#34495e;"><strong>1. </strong></span><span style="color:#34495e;"><strong>基本使用</strong></span></h4>
<p><img alt="" height="270" src="https://i-blog.csdnimg.cn/direct/f18038dca9fc4583b0032e076373592e.png" width="979" /></p>
<pre></pre>
<p><span style="color:#34495e;">总结： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#777777;">像素（ </span><span style="color:#e96900;">px </span><span style="color:#777777;">）是一种单位</span><span style="color:#777777;">。 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#777777;">尽量不同时修改图片的宽和高，可能会造成比例失调。 </span></p>
<p><span style="color:#777777;">3. </span><span style="color:#777777;">暂且认为 </span><span style="color:#e96900;">img </span><span style="color:#777777;">是行内元素。</span></p>
<p><span style="color:#777777;">4. </span><span style="color:#e96900;">alt </span><span style="color:#777777;">属性的作用： </span></p>
<p><span style="color:#777777;">搜索引擎通过 </span><span style="color:#e96900;">alt </span><span style="color:#777777;">属性，得知图片的内容。</span><span style="color:#777777;">—— </span><span style="color:#777777;">最主要的作用。 </span></p>
<p><span style="color:#777777;">当图片无法展示时候，有些浏览器会呈现 </span><span style="color:#e96900;">alt </span><span style="color:#777777;">属性的值。 </span></p>
<p><span style="color:#777777;">盲人阅读器会朗读 </span><span style="color:#e96900;">alt </span><span style="color:#777777;">属性的值。 </span></p>
<h4><span style="color:#34495e;"><strong>2. </strong></span><span style="color:#34495e;"><strong>路径的分类</strong></span></h4>
<h5><span style="color:#34495e;"><strong>1.相对路径</strong></span></h5>
<p><span style="color:#34495e;">以</span><span style="color:#ff0000;"><strong>当前位置</strong></span><span style="color:#34495e;">作为参考点，去建立路径。</span></p>
<p><img alt="" height="208" src="https://i-blog.csdnimg.cn/direct/58614da154324b178e3146a698c7d0d0.png" width="646" /></p>
<pre></pre>
<h5>2.<span style="color:#34495e;"><strong>绝对路径</strong></span></h5>
<p><span style="color:#34495e;">以</span><span style="color:#ff0000;"><strong>根位置</strong></span><span style="color:#34495e;">作为参考点，去建立路径。</span></p>
<p><span style="color:#34495e;">1. </span><span style="color:#34495e;">本地绝对路径： </span><span style="color:#e96900;">E:/a/b/c/</span><span style="color:#e96900;">奥特曼</span><span style="color:#e96900;">.jpg </span><span style="color:#34495e;">。（很少使用） </span></p>
<pre></pre>
<p><span style="color:#34495e;">2. </span><span style="color:#34495e;">网络绝对路径： </span><span style="color:#e96900;">http://www.atguigu.com/images/index_new/logo.png </span><span style="color:#34495e;">。</span></p>
<pre></pre>
<p><span style="color:#777777;">注意点： </span></p>
<p><span style="color:#777777;">使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。 </span></p>
<p><span style="color:#777777;">使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入 </span></p>
<p><span style="color:#777777;">失败。</span></p>
<h4>3.常见的图片格式</h4>
<h6><span style="color:#34495e;">1.</span><span style="color:#e96900;">jpg </span><span style="color:#34495e;">格式</span></h6>
<p><span style="color:#777777;">概述：扩展名为 </span><span style="color:#e96900;">.jpg </span><span style="color:#777777;">或 </span><span style="color:#e96900;">.jpeg </span><span style="color:#777777;">，是一种有损的压缩格式（把肉眼不容易观察出来的细节 </span></p>
<div>
<p><span style="color:#777777;">丢弃了）。 </span></p>
<p><span style="color:#777777;">主要特点：</span><span style="color:#008000;"><strong>支持的颜色丰富、占用空间较小</strong></span><span style="color:#777777;">、不支持透明背景、不支持动态图。 </span></p>
<p><span style="color:#777777;">使用场景：对图片细节</span><span style="color:#0000ff;"><strong>没有极高要求</strong></span><span style="color:#777777;">的场景，例如：网站的产品宣传图等 。</span><span style="color:#777777;">该格式网 </span></p>
<p><span style="color:#777777;">页中很常见。 </span></p>
</div>
<h6>2.<span style="color:#e96900;">png </span><span style="color:#34495e;">格式</span></h6>
<p><span style="color:#777777;">概述：扩展名为 </span><span style="color:#e96900;">.png </span><span style="color:#777777;">，是一种无损的压缩格式，能够更高质量的保存图片。 </span></p>
<p><span style="color:#777777;">主要特点：</span><span style="color:#008000;"><strong>支持的颜色丰富</strong></span><span style="color:#777777;">、占用空间略大、</span><span style="color:#008000;"><strong>支持透明背景</strong></span><span style="color:#777777;">、不支持动态图。 </span></p>
<p><span style="color:#777777;">使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司</span><span style="color:#777777;">logo</span><span style="color:#777777;">图、重要配 </span></p>
<p><span style="color:#777777;">图等。 </span></p>
<h6>3.<span style="color:#e96900;">bmp </span><span style="color:#34495e;">格式</span></h6>
<p><span style="color:#777777;">概述：扩展名为 </span><span style="color:#e96900;">.bmp </span><span style="color:#777777;">，不进行压缩的一种格式，在最大程度上保留图片更多的细节。 </span></p>
<p><span style="color:#777777;">主要特点：</span><span style="color:#008000;"><strong>支持的颜色丰富、保留的细节更多</strong></span><span style="color:#777777;">、占用空间极大、不支持透明背景、不支持动 </span></p>
<p><span style="color:#777777;">态图。 </span></p>
<p><span style="color:#777777;">使用场景：对图片细节</span><span style="color:#0000ff;"><strong>要求极高</strong></span><span style="color:#777777;">的场景，例如：一些大型游戏中的图片 。（网页中很少使 </span></p>
<p><span style="color:#777777;">用） </span></p>
<h6>4.<span style="color:#e96900;">gif </span><span style="color:#34495e;">格式</span></h6>
<p><span style="color:#777777;">概述：扩展名为 </span><span style="color:#e96900;">.gif </span><span style="color:#777777;">，仅支持</span><span style="color:#777777;">256</span><span style="color:#777777;">种颜色，色彩呈现不是很完整。 </span></p>
<p><span style="color:#777777;">主要特点：支持的颜色较少、</span><span style="color:#008000;"><strong>支持</strong></span><span style="color:#ff0000;"><strong>简单</strong></span><span style="color:#008000;"><strong>透明背景、支持动态图</strong></span><span style="color:#777777;">。 </span></p>
<p><span style="color:#777777;">使用场景：网页中的动态图片。</span></p>
<h6>5.<span style="color:#e96900;">webp </span><span style="color:#34495e;">格式</span></h6>
<p><span style="color:#777777;">概述：扩展名为 </span><span style="color:#e96900;">.webp </span><span style="color:#777777;">，谷歌推出的一种格式，专门用来在网页中呈现图片。 </span></p>
<p><span style="color:#777777;">主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。 </span></p>
<p><span style="color:#777777;">使用场景：网页中的各种图片。 </span></p>
<h6>6.<span style="color:#e96900;">base64 </span><span style="color:#34495e;">格式 </span></h6>
<p><span style="color:#777777;">1. </span><span style="color:#777777;">本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#777777;">原理：把图片进行 </span><span style="color:#e96900;">base64 </span><span style="color:#777777;">编码，形成一串文本。 </span></p>
<p><span style="color:#777777;">3. </span><span style="color:#777777;">如何生成：靠一些工具或网站。 </span></p>
<p><span style="color:#777777;">4. </span><span style="color:#777777;">如何使用：直接作为 </span><span style="color:#e96900;">img </span><span style="color:#777777;">标签的 </span><span style="color:#e96900;">src </span><span style="color:#777777;">属性的值即可，并且不受文件位置的影响。 </span></p>
<p><span style="color:#777777;">5. </span><span style="color:#777777;">使用场景：一些较小的图片，或者需要和网页一起加载的图片。 </span></p>
<p><span style="color:#34495e;">主要作用：从当前页面进行跳转</span></p>
<p><span style="color:#34495e;">可以实现：</span></p>
<p><span style="color:#34495e;">①跳转到指定页面</span></p>
<p><span style="color:#34495e;">②跳转到指定文件（也可触发下载）</span></p>
<p><span style="color:#34495e;">③跳转到锚点位置</span></p>
<p><span style="color:#34495e;">④唤起指定应用</span></p>
<p><img alt="" height="186" src="https://i-blog.csdnimg.cn/direct/bf7b1104e7fe462a82f96be4f0c478d9.png" width="666" /></p>
<h5>1.跳转到网页</h5>
<p><span style="color:#777777;">注意点： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#777777;">代码中的</span><span style="color:#777777;"><strong>多个空格</strong></span><span style="color:#777777;">、</span><span style="color:#777777;"><strong>多个回车</strong></span><span style="color:#777777;">，都会被浏览器解析成一个空格！ </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#777777;">虽然 </span><span style="color:#e96900;">a </span><span style="color:#777777;">是行内元素，但 </span><span style="color:#e96900;">a </span><span style="color:#777777;">元素可以包裹除它自身外的任何元素！ </span></p>
<p>当前窗口跳转至京东去秒杀：</p>
<pre></pre>
<p>新窗口跳转至百度：</p>
<pre></pre>
<p>当前窗口跳转至本地网页：</p>
<pre></pre>
<p>用图片使当前窗口跳转至本地网页：</p>
<pre></pre>
<h5>2.跳转到文件</h5>
<p><span style="color:#777777;">注意</span><span style="color:#777777;">1</span><span style="color:#777777;">：若浏览器无法打开文件，则会引导用户下载。 </span></p>
<p><span style="color:#777777;">注意</span><span style="color:#777777;">2</span><span style="color:#777777;">：若想强制触发下载，请使用 </span><span style="color:#e96900;">download </span><span style="color:#777777;">属性，属性值即为下载文件的名称。</span></p>
<pre></pre>
<h5>3.跳转到锚点</h5>
<p><span style="color:#34495e;">使用方式：</span></p>
<ul><li> <p><span style="color:#34495e;"><strong>第一步：设置锚点 </strong></span></p> </li></ul>
<p><span style="color:#777777;">注意点： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#777777;">具有 </span><span style="color:#e96900;">href </span><span style="color:#777777;">属性的 </span><span style="color:#e96900;">a </span><span style="color:#777777;">标签是</span><span style="color:#777777;"><strong>超链接</strong></span><span style="color:#777777;">，具有 </span><span style="color:#e96900;">name </span><span style="color:#777777;">属性的 </span><span style="color:#e96900;">a </span><span style="color:#777777;">标签是</span><span style="color:#777777;"><strong>锚点</strong></span><span style="color:#777777;">。 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#e96900;">name </span><span style="color:#777777;">和 </span><span style="color:#e96900;">id </span><span style="color:#777777;">都是区分大小写的，且 </span><span style="color:#e96900;">id </span><span style="color:#777777;">最好别是数字开头。 </span></p>
<pre></pre>
<ul><li> <p><span style="color:#34495e;"><strong>第二步：跳转锚点 </strong></span></p> </li></ul>
<p>注意点：</p>
<p>“#”代表跳转至锚点，不加后系统则认为是超链接，会导致乱码。</p>
<pre></pre>
<p>示例：</p>
<pre></pre>
<h5><span style="color:#34495e;">4.唤起指定应用</span></h5>
<p><span style="color:#34495e;">通过 </span><span style="color:#e96900;">a </span><span style="color:#34495e;">标签，可以唤起设备应用程序。 </span></p>
<pre></pre>
<p><span style="color:#777777;">注意： </span><span style="color:#e96900;">li </span><span style="color:#777777;">标签最好写在 </span><span style="color:#e96900;">ul </span><span style="color:#777777;">或 </span><span style="color:#e96900;">ol </span><span style="color:#777777;">中，不要单独使用。</span></p>
<h4><span style="color:#34495e;"><strong>1. </strong></span><span style="color:#34495e;"><strong>有序列表（ol）</strong></span></h4>
<p><span style="color:#34495e;">概念：有顺序或侧重顺序的列表。 </span></p>
<pre></pre>
<h4><span style="color:#34495e;"><strong>2. </strong></span><span style="color:#34495e;"><strong>无序列表（ul）</strong></span></h4>
<p><span style="color:#34495e;">概念：无顺序或不侧重顺序的列表。 </span></p>
<pre></pre>
<h4><span style="color:#34495e;"><strong>3. </strong></span><span style="color:#34495e;"><strong>列表嵌套</strong></span></h4>
<p><span style="color:#34495e;">概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）。</span></p>
<pre></pre>
<h4><span style="color:#34495e;"><strong>4. </strong></span><span style="color:#34495e;"><strong>自定义列表</strong></span></h4>
<p><span style="color:#34495e;">1. </span><span style="color:#34495e;">概念：所谓自定义列表，就是一个包含</span><span style="color:#ff0000;"><strong>术语名称</strong></span><span style="color:#34495e;">以及</span><span style="color:#ff0000;"><strong>术语描述</strong></span><span style="color:#34495e;">的列表。 </span></p>
<p><span style="color:#34495e;">2. </span><span style="color:#34495e;">一个 </span><span style="color:#e96900;">dl </span><span style="color:#34495e;">就是一个自定义列表，一个 </span><span style="color:#e96900;">dt </span><span style="color:#34495e;">就是一个术语名称（标题），一个 </span><span style="color:#e96900;">dd </span><span style="color:#34495e;">就是术语描述（可以有多个）。 </span></p>
<pre></pre>
<h4><span style="color:#34495e;"><strong>1. </strong></span><span style="color:#34495e;"><strong>基本结构 </strong></span></h4>
<div>
<span style="color:#34495e;">1. </span>
<span style="color:#34495e;">一个完整的表格由：</span>
<span style="color:#34495e;"><strong>表格标题</strong></span>
<span style="color:#34495e;">、</span>
<span style="color:#34495e;"><strong>表格头部</strong></span>
<span style="color:#34495e;">、</span>
<span style="color:#34495e;"><strong>表格主体</strong></span>
<span style="color:#34495e;">、</span>
<span style="color:#34495e;"><strong>表格脚注</strong></span>
<span style="color:#34495e;">，四部分组成。 </span>
</div>
<p><img alt="" height="979" src="https://i-blog.csdnimg.cn/direct/87fb5a1939144e01a580833e4e8e85aa.png" width="1200" /></p>
<div>
<span style="color:#34495e;">2. </span>
<span style="color:#34495e;">表格涉及到的标签： </span>
</div>
<div>
<p><span style="color:#e96900;">table </span><span style="color:#34495e;">：表格 </span></p>
<p><span style="color:#e96900;">border </span><span style="color:#34495e;">：边框（写在table后）</span></p>
<p><span style="color:#e96900;">caption </span><span style="color:#34495e;">：表格标题 </span></p>
<p><span style="color:#e96900;">thead </span><span style="color:#34495e;">：表格头部 </span></p>
<p><span style="color:#e96900;">tbody </span><span style="color:#34495e;">：表格主体 </span></p>
<p><span style="color:#e96900;">tfoot </span><span style="color:#34495e;">：表格注脚 </span></p>
<p><span style="color:#e96900;">tr </span><span style="color:#34495e;">：每一行 </span></p>
<p><span style="color:#e96900;">th </span><span style="color:#34495e;">、 </span><span style="color:#e96900;">td </span><span style="color:#34495e;">：每一个单元格（备注：表格头部中用 </span><span style="color:#e96900;">th </span><span style="color:#34495e;">，表格主体、表格脚注中用： </span><span style="color:#e96900;">td </span><span style="color:#34495e;">） </span></p>
<pre></pre>
<p>其中“1”表示1px</p>
</div>
<p><img alt="" height="571" src="https://i-blog.csdnimg.cn/direct/099595c75929441692a4badf49dababd.png" width="1200" /></p>
<p><img alt="" height="837" src="https://i-blog.csdnimg.cn/direct/c67ac8ba2eed41519ff62bfbef83dacb.png" width="1200" /></p>
<p><img alt="" height="868" src="https://i-blog.csdnimg.cn/direct/3b9491bf606043a3bc9411ebd3f6ffea.png" width="1200" /></p>
<div>
<span style="color:#34495e;">3. </span>
<span style="color:#34495e;">具体编码：</span>
</div>
<div>
<pre></pre>
<h4><span style="color:#34495e;"><strong>2. </strong></span><span style="color:#34495e;"><strong>常用属性</strong></span></h4>
</div>
<p><span style="color:#34495e;">注意点： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#e96900;"><table> </span><span style="color:#777777;">元素的 </span><span style="color:#e96900;">border </span><span style="color:#777777;">属性可以控制表格边框，但 </span><span style="color:#e96900;">border </span><span style="color:#777777;">值的大小，并不控制单元格 </span></p>
<p><span style="color:#777777;">边框的宽度， </span></p>
<p><span style="color:#777777;">只能控制表格最外侧边框的宽度，这个问题如何解决？</span><span style="color:#777777;">—— </span><span style="color:#777777;">后期靠 </span><span style="color:#e96900;">CSS </span><span style="color:#777777;">控制。 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#777777;">默认情况下，每列的宽度，得看这一列单元格最长的那个文字。 </span></p>
<p><span style="color:#777777;">3. </span><span style="color:#777777;">给某个 </span><span style="color:#e96900;">th </span><span style="color:#777777;">或 </span><span style="color:#e96900;">td </span><span style="color:#777777;">设置了宽度之后，他们所在的那一列的宽度就确定了。 </span></p>
<p><span style="color:#777777;">4. </span><span style="color:#777777;">给某个 </span><span style="color:#e96900;">th </span><span style="color:#777777;">或 </span><span style="color:#e96900;">td </span><span style="color:#777777;">设置了高度之后，他们所在的那一行的高度就确定了。</span></p>
<p><img alt="" height="1053" src="https://i-blog.csdnimg.cn/direct/68b7adb178064b07b284de53f09d73c5.png" width="880" /></p>
<pre></pre>
<h4><span style="color:#34495e;"><strong>3. </strong></span><span style="color:#34495e;"><strong>跨行跨列 </strong></span></h4>
<p><span style="color:#34495e;">1. </span><span style="color:#e96900;">colspan </span><span style="color:#34495e;">：指定要跨的列数。 </span></p>
<p>表示跨了5列</p>
<pre></pre>
<pre></pre>
<p><span style="color:#34495e;">2. </span><span style="color:#e96900;">rowspan </span><span style="color:#34495e;">：指定要跨的行数。</span></p>
<p>表示垮了4列</p>
<pre></pre>
<pre></pre>
<div>
<span style="color:#34495e;">课程表效果： </span>
</div>
<p><img alt="" height="950" src="https://i-blog.csdnimg.cn/direct/056a60fac467498c8a802558492b9b6b.png" width="1053" /></p>
<div>
<span style="color:#34495e;">编写思路：</span>
</div>
<p></p>
<p><img alt="" height="937" src="https://i-blog.csdnimg.cn/direct/1b23bccc7dc94e3cbd2ca945dd247982.png" width="1034" /></p>
<pre></pre>
<p><img alt="" height="285" src="https://i-blog.csdnimg.cn/direct/ee016002ae064ac8935c6e2052d0f11b.png" width="1200" /></p>
<p><span style="color:#777777;">注意点： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#777777;">不要用 </span><span style="color:#e96900;"><br> </span><span style="color:#777777;">来增加文本之间的行间隔，应使用 </span><span style="color:#e96900;"><p> </span><span style="color:#777777;">元素，或后面即将学到的 </span><span style="color:#e96900;">CSS </span></p>
<p><span style="color:#e96900;">margin </span><span style="color:#777777;">属性。 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#e96900;"><hr> </span><span style="color:#777777;">的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 </span><span style="color:#e96900;">CSS </span><span style="color:#777777;">完成。 </span></p>
<pre></pre>
<p><span style="color:#34495e;">概念：一个包含交互的区域，用于收集用户提供的数据。</span></p>
<h4><span style="color:#34495e;"><strong>1. </strong></span><span style="color:#34495e;"><strong>基本结构</strong></span></h4>
<p><img alt="" height="389" src="https://i-blog.csdnimg.cn/direct/248d7708b1374f34a027edff55a7b119.png" width="676" /></p>
<pre></pre>
<p>action和name中的内容应由对应的后端人员确定，如上百度地址后加“/s”，提交数据名为“wd”。京东地址后加“/search”，提交数据名为“keyword”</p>
<h4><span style="color:#34495e;"><strong>2. </strong></span><span style="color:#34495e;"><strong>常用表单控件 </strong></span></h4>
<h5><span style="color:#34495e;"><strong>① 文本输入框 </strong></span></h5>
<pre></pre>
<p><span style="color:#777777;">常用属性如下： </span></p>
<p><span style="color:#e96900;">name </span><span style="color:#777777;">属性：数据的名称。 </span></p>
<p><span style="color:#e96900;">value </span><span style="color:#777777;">属性：输入框的默认输入值。 </span></p>
<p><span style="color:#e96900;">maxlength </span><span style="color:#777777;">属性：输入框最大可输入长度。</span></p>
<pre></pre>
<h5><span style="color:#34495e;"><strong>② 密码输入框 </strong></span></h5>
<pre></pre>
<p><span style="color:#777777;">常用属性如下： </span></p>
<p><span style="color:#e96900;">name </span><span style="color:#777777;">属性：数据的名称。 </span></p>
<p><span style="color:#e96900;">value </span><span style="color:#777777;">属性：输入框的默认输入值（一般不用，无意义）。 </span></p>
<p><span style="color:#e96900;">maxlength </span><span style="color:#777777;">属性：输入框最大可输入长度。</span></p>
<pre></pre>
<h5><span style="color:#34495e;"><strong>③ 单选框 </strong></span></h5>
<pre></pre>
<p><span style="color:#777777;">常用属性如下： </span></p>
<p><span style="color:#e96900;">name </span><span style="color:#777777;">属性：数据的名称，注意：想要单选效果，多个 </span><span style="color:#e96900;">radio </span><span style="color:#777777;">的 </span><span style="color:#e96900;">name </span><span style="color:#777777;">属性值要保持一致。 </span></p>
<p><span style="color:#e96900;">value </span><span style="color:#777777;">属性：提交的数据值。 </span></p>
<p><span style="color:#e96900;">checked </span><span style="color:#777777;">属性：让该单选按钮默认选中。</span></p>
<p><span style="color:#777777;">比如默认选男：</span></p>
<pre></pre>
<h5><span style="color:#34495e;"><strong>④ 复选框 </strong></span></h5>
<pre></pre>
<p><span style="color:#777777;">常用属性如下：： </span></p>
<p><span style="color:#e96900;">name </span><span style="color:#777777;">属性：数据的名称。 </span></p>
<p><span style="color:#e96900;">value </span><span style="color:#777777;">属性：提交的数据值。 </span></p>
<p><span style="color:#e96900;">checked </span><span style="color:#777777;">属性：让该复选框默认选中。 </span></p>
<h5><span style="color:#34495e;"><strong>⑤ 隐藏域</strong></span></h5>
<pre></pre>
<p><span style="color:#777777;">用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。 </span></p>
<p><span style="color:#e96900;">name </span><span style="color:#777777;">属性：指定数据的名称。 </span></p>
<p><span style="color:#e96900;">value </span><span style="color:#777777;">属性：指定的是真正提交的数据。 </span></p>
<h5><span style="color:#34495e;"><strong>⑥ 提交按钮 </strong></span></h5>
<pre></pre>
<p><span style="color:#777777;">注意： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#e96900;">button </span><span style="color:#777777;">标签 </span><span style="color:#e96900;">type </span><span style="color:#777777;">属性的默认值是 </span><span style="color:#e96900;">submit </span><span style="color:#777777;">。 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#e96900;">button </span><span style="color:#777777;">不要指定 </span><span style="color:#e96900;">name </span><span style="color:#777777;">属性 </span></p>
<p><span style="color:#777777;">3. </span><span style="color:#e96900;">input </span><span style="color:#777777;">标签编写的按钮，使用 </span><span style="color:#e96900;">value </span><span style="color:#777777;">属性指定按钮文字</span></p>
<h5><span style="color:#34495e;"><strong>⑦ 重置按钮 </strong></span></h5>
<pre></pre>
<p><span style="color:#777777;">注意点： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#e96900;">button </span><span style="color:#777777;">不要指定 </span><span style="color:#e96900;">name </span><span style="color:#777777;">属性 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#e96900;">input </span><span style="color:#777777;">标签编写的按钮，使用 </span><span style="color:#e96900;">value </span><span style="color:#777777;">属性指定按钮文字。 </span></p>
<h5><span style="color:#34495e;"><strong>⑧ 普通按钮 </strong></span></h5>
<pre></pre>
<p><span style="color:#777777;">注意点：普通按钮的 </span><span style="color:#e96900;">type </span><span style="color:#777777;">值为 </span><span style="color:#e96900;">button </span><span style="color:#777777;">，若不写 </span><span style="color:#e96900;">type </span><span style="color:#777777;">值是 </span><span style="color:#e96900;">submit </span><span style="color:#777777;">会引起表单的提交。 </span></p>
<h5><span style="color:#34495e;"><strong>⑨文本域 </strong></span></h5>
<pre></pre>
<p><span style="color:#777777;">常用属性如下： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#e96900;">rows </span><span style="color:#777777;">属性：指定默认显示的行数，会影响文本域的高度。 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#e96900;">cols </span><span style="color:#777777;">属性：指定默认显示的列数，会影响文本域的宽度。 </span></p>
<p><span style="color:#777777;">3. </span><span style="color:#777777;">不能编写 </span><span style="color:#e96900;">type </span><span style="color:#777777;">属性，其他属性，与普通文本输入框一致。 </span></p>
<h5><span style="color:#34495e;"><strong>⑩ 下拉框 </strong></span></h5>
<pre></pre>
<p><span style="color:#777777;">常用属性及注意事项： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#e96900;">name </span><span style="color:#777777;">属性：指定数据的名称。 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#e96900;">option </span><span style="color:#777777;">标签设置 </span><span style="color:#e96900;">value </span><span style="color:#777777;">属性， 如果没有 </span><span style="color:#e96900;">value </span><span style="color:#777777;">属性，提交的数据是 </span><span style="color:#e96900;">option </span><span style="color:#777777;">中间的文 </span></p>
<p><span style="color:#777777;">字；如果设置了 </span><span style="color:#e96900;">value </span><span style="color:#777777;">属性，提交的数据就是 </span><span style="color:#e96900;">value </span><span style="color:#777777;">的值（建议设置 </span><span style="color:#e96900;">value </span><span style="color:#777777;">属性） </span></p>
<p><span style="color:#777777;">3. </span><span style="color:#e96900;">option </span><span style="color:#777777;">标签设置了 </span><span style="color:#e96900;">selected </span><span style="color:#777777;">属性，表示默认选中。 </span></p>
<pre></pre>
<h4><span style="color:#34495e;"><strong>3. </strong></span><span style="color:#34495e;"><strong>禁用表单控件 </strong></span></h4>
<p><span style="color:#34495e;">给表单控件的标签设置 </span><span style="color:#e96900;">disabled </span><span style="color:#34495e;">既可禁用表单控件。</span></p>
<p><span style="color:#e96900;">input </span><span style="color:#777777;">、 </span><span style="color:#e96900;">textarea </span><span style="color:#777777;">、 </span><span style="color:#e96900;">button </span><span style="color:#777777;">、 </span><span style="color:#e96900;">select </span><span style="color:#777777;">、 </span><span style="color:#e96900;">option </span><span style="color:#777777;">都可以设置 </span><span style="color:#e96900;">disabled </span><span style="color:#777777;">属性</span></p>
<pre></pre>
<h4><span style="color:#34495e;"><strong>4.label </strong></span><span style="color:#34495e;"><strong>标签 </strong></span></h4>
<p><span style="color:#e96900;">label </span><span style="color:#34495e;">标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。 </span></p>
<p><span style="color:#34495e;">两种与 </span><span style="color:#e96900;">label </span><span style="color:#34495e;">关联方式如下：</span></p>
<p><span style="color:#34495e;">1. </span><span style="color:#34495e;">让 </span><span style="color:#e96900;">label </span><span style="color:#34495e;">标签的 </span><span style="color:#e96900;">for </span><span style="color:#34495e;">属性的值等于表单控件的 </span><span style="color:#e96900;">id </span><span style="color:#34495e;">。 </span></p>
<p><span style="color:#34495e;">2. </span><span style="color:#34495e;">把表单控件套在 </span><span style="color:#e96900;">label </span><span style="color:#34495e;">标签的里面。 </span></p>
<p><span style="color:#34495e;">for属性：</span></p>
<pre></pre>
<p>label内：</p>
<pre></pre>
<p>单选框：</p>
<pre></pre>
<p>复选框：</p>
<pre></pre>
<p>注意：<br /> 只要id对应，即使代码嗝很远也能定位到。</p>
<h4><span style="color:#34495e;"><strong>5. fieldset </strong></span><span style="color:#34495e;"><strong>与 </strong></span><span style="color:#34495e;"><strong>legend </strong></span><span style="color:#34495e;"><strong>的使用</strong></span></h4>
<p><span style="color:#e96900;">fieldset </span><span style="color:#34495e;">可以为表单控件分组、 </span><span style="color:#e96900;">legend </span><span style="color:#34495e;">标签是分组的标题。 </span></p>
<pre></pre>
<h4><span style="color:#34495e;"><strong>6. </strong></span><span style="color:#34495e;"><strong>表单总结</strong></span></h4>
<p><img alt="" height="1148" src="https://i-blog.csdnimg.cn/direct/5cc720eb2afb4fbf88f0d6e1de272fba.png" width="649" /></p>
<p><img alt="" height="211" src="https://i-blog.csdnimg.cn/direct/13bd462018ab41309186a22b549e0252.png" width="679" /></p>
<p><span style="color:#e96900;">iframe </span><span style="color:#777777;">标签的实际应用： </span></p>
<p><span style="color:#777777;">1. </span><span style="color:#777777;">在网页中嵌入广告。 </span></p>
<p><span style="color:#777777;">2. </span><span style="color:#777777;">与超链接或表单的 </span><span style="color:#e96900;">target </span><span style="color:#777777;">配合，展示不同的内容。</span></p>
<pre></pre>
<p><span style="color:#34495e;">在 </span><span style="color:#e96900;">HTML </span><span style="color:#34495e;">中我们可以用一种</span><span style="color:#0000ff;"><strong>特殊的形式</strong></span><span style="color:#34495e;">的内容，来表示某个</span><span style="color:#34495e;"><strong>符号</strong></span><span style="color:#34495e;">，这种特殊形式的内容，就是 </span><span style="color:#e96900;">HTML </span><span style="color:#34495e;">实 体。比如小于号 </span><span style="color:#e96900;">< </span><span style="color:#34495e;">用于定义 </span><span style="color:#34495e;">HTML </span><span style="color:#34495e;">标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须 在 </span><span style="color:#e96900;">HTML </span><span style="color:#34495e;">源码中插入字符实体。</span></p>
<p><span style="color:#777777;"><strong>字符实体</strong></span><span style="color:#777777;">由三部分组成：一个 </span><span style="color:#e96900;">& </span><span style="color:#777777;">和 一个实体名称（或者一个 </span><span style="color:#e96900;"># </span><span style="color:#777777;">和 一个实体编号），最后加上一 个分号 </span><span style="color:#e96900;">; </span><span style="color:#777777;">。 </span></p>
<p><span style="color:#34495e;">常见字符实体总结：</span></p>
<p><img alt="" height="601" src="https://i-blog.csdnimg.cn/direct/e21f5457ad474241b655a131ca06482c.png" width="653" /></p>
<p><span style="color:#34495e;">完整实体列表，参考：</span></p>
<pre></pre>
<p><span style="color:#34495e;">常用的全局属性：</span></p>
<p><img alt="" height="301" src="https://i-blog.csdnimg.cn/direct/fd91a9503eec4385a0beb351a1125692.png" width="654" /></p>
<p>注：“<span style="color:#fe2c24;"><strong>id</strong></span>”、“<span style="color:#fe2c24;"><strong>dir</strong></span>”、“<span style="color:#fe2c24;"><strong>title</strong></span>”不可以在<span style="color:#fe2c24;"><strong><span style="background-color:#38d8f0;"><head>、<html>、<meta>、<<script>、<style>、<title></span></strong></span>中使用</p>
<p><span style="color:#34495e;">完整的全局属性，参考：</span></p>
<pre></pre>
<p>网页内的基本信息</p>
<h4><span style="color:#34495e;">1. </span><span style="color:#34495e;">配置字符编码</span></h4>
<pre></pre>
<h4><span style="color:#34495e;">2. </span><span style="color:#34495e;">针对 </span><span style="color:#e96900;">IE </span><span style="color:#34495e;">浏览器的兼容性配置。</span></h4>
<pre></pre>
<h4><span style="color:#34495e;">3. </span><span style="color:#34495e;">针对移动端的配置</span></h4>
<pre></pre>
<h4><span style="color:#34495e;">4. </span><span style="color:#34495e;">配置网页关键字 </span></h4>
<pre></pre>
<h4><span style="color:#34495e;">5. </span><span style="color:#34495e;">配置网页描述信息 </span></h4>
<pre></pre>
<h4><span style="color:#34495e;">6. </span><span style="color:#34495e;">针对搜索引擎爬虫配置</span></h4>
<pre></pre>
<p><img alt="" height="370" src="https://i-blog.csdnimg.cn/direct/92f6278a51a840da8be0d2e8be8b042c.png" width="669" /></p>
<h4><span style="color:#34495e;">7. </span><span style="color:#34495e;">配置网页作者</span></h4>
<pre></pre>
<h4><span style="color:#34495e;">8. </span><span style="color:#34495e;">配置网页生成工具 </span></h4>
<pre></pre>
<h4><span style="color:#34495e;">9. </span><span style="color:#34495e;">配置定义网页版权信息</span></h4>
<pre></pre>
<h4><span style="color:#34495e;">10. </span><span style="color:#34495e;">配置网页自动刷新 </span></h4>
<pre></pre>
<p>若不写链接，则原网页自刷新</p>
<h4>11.其他</h4>
<p><span style="color:#34495e;">完整的网页元信息，参考：</span></p>
<p><img alt="" height="1200" src="https://i-blog.csdnimg.cn/direct/631f9fb890554d4eb7a77179b68d792c.png" width="637" /></p>
<p>Ctrl+/ ——注释/取消注释光标所在行</p>
<p>Ctrl+Alt+↑ ——向上复制一行</p>
<p>Ctrl+Alt+↓ ——向下复制一行</p>
<p><span style="color:#777777;">Ctrl+Shift++ ——页面整体放大</span></p>
<p><span style="color:#777777;">Ctrl+Shift+- ——页面整体缩小</span></p>
<p>Ctrl+Shift+Delete ——跳转清楚浏览数据</p>
<p>Shift+Tab ——与Tab作用相反</p>
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/177024.html