【HTML总复习】一文带你查漏补缺，暖你一整天

发布时间：2023-07-19 11:00

文章目录

导读
- 网页
- 什么是HTML
- Web标准
1.基本标签
- 1.1 HTML标签
- 1.2 头部标签< head >
- 1.3 身体标签< body >
- 1.4 类型声明标签
- 1.5 部分标签内部属性
2.常用标签
- 2.1 标题标签
- 2.2 段落与换行标签
- 2.3 文本格式化标签
- 2.4 “盒子”标签
- 2.5 图像标签和路径
- - 2.5.1 图像标签
  - 2.5.2 路径
- 2.6 超链接标签
- - 2.6.1 标签

3.注释和特殊字符

3.1注释
3.2 特殊字符表

4.表格

4.1 基本语法
4.2 表格属性
4.3 表格结构标签
4.4 合并单元格
- 4.4.1 跨行合并
- 4.4.2 跨列合并

5.列表标签

5.1 无序列表
- 5.1.1 语法
- 5.1.2 type属性
5.2 有序列表
- 5.2.1 语法
- 5.2.2 type属性
5.3 定义列表
- 5.3.1 语法

6.表单标签

6.1 组成
6.2 表单域
6.3 表单控件（表单元素）
- 6.3.1 表单元素
- 6.3.2 表单元素</li> </ul> </li> </ul> </li> </ul> </div> <p></p> <a href=\"https://img.it610.com/image/info8/0ce140c6732c4fbfbc0bf45ca4ed362d.jpg\" target=\"_blank\"><img src=\"https://img.it610.com/image/info8/0ce140c6732c4fbfbc0bf45ca4ed362d.jpg\" width=\"500\" height=\"500\" alt=\"【HTML总复习】一文带你查漏补缺，暖你一整天_第1张图片\" style=\"border:1px solid black;\"></a> <h1>导读</h1> <h2>网页</h2> <p><font color=\"red\">网站</font>是指在因特网中根据一定的规则，使用<strong>HTML</strong>等制作的用于展示特定内容相关的<mark>网页集合</mark></p> <p><font color=\"red\">网页</font>是网站中的一页，通常就是<font color=\"red\">HTML格式的文件</font></p> <h2>什么是HTML</h2> <p>一种描述网页的<font color=\"red\">超文本语言</font></p> <p>它并非编程语言，是一套标记标签</p> <p>而所谓<font color=\"red\">超文本</font>有两种含义</p> <ol> <li><strong>超越了文本限制：</strong> 可以加入图片、声音、动漫等内容</li> <li><strong>含超级链接：</strong> 可以从一个文件跳转到另一个文件，也就是网站中网页的替换呈现</li> </ol> <h2>Web标准</h2> <p>（<strong>面试考点</strong>）</p> <p>由W3C组织和其他标准化组织制定的一系列标准集合<br> 制定标准就像是制定规则，增大了设备、浏览器、搜索引擎的等兼容性</p> <table> <thead> <tr> <th>标准</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>结构</td> <td>结构用于对网页元素进行整理和分类</td> </tr> <tr> <td>表现</td> <td>设置网页元素的版式、颜色、大小等外观样式（CSS）</td> </tr> <tr> <td>行为</td> <td>网页模型的定义以及交互的编写（JavaScript）</td> </tr> </tbody> </table> <p>以上三类规定分离，即<font color=\"red\">html文件写结构、css文件写表现、JavaScript文件写行为</font></p> <h1>1.基本标签</h1> <h2>1.1 HTML标签</h2> <p>称之为根标签，是最大的标签，文件从< html >开始到< /html >结束</p> <h2>1.2 头部标签< head ></h2> <p>定义一些往往不可见的内容</p> <pre><code class=\"prism language-bash\"><span class=\"token operator\"><</span>head<span class=\"token operator\">></span>内部标签<span class=\"token operator\">|</span> 说明 <span class=\"token operator\"><</span>title<span class=\"token operator\">></span> 定义网页标题 <span class=\"token operator\"><</span>meta<span class=\"token operator\">></span> 定义网页基本内容（搜索引擎的关键字） <span class=\"token operator\"><</span>style<span class=\"token operator\">></span> 定义CSS样式 <span class=\"token operator\"><</span>link<span class=\"token operator\">></span> 链接外部CSS文件或脚本文件 <span class=\"token operator\"><</span>script<span class=\"token operator\">></span> 定义脚本语言 <span class=\"token operator\"><</span>base<span class=\"token operator\">></span> 定义页面所有链接的基础定位（少用） </code></pre> <p>前期除title标签外，其他只需认识就行</p> <h2>1.3 身体标签< body ></h2> <p>定义的就是网页展示出来的内容</p> <h2>1.4 类型声明标签</h2> <p><font color=\"red\">< !DOCTYPE html ></font><br> 告诉浏览器采取HTML5版本<br> <strong>开头声明</strong></p> <h2>1.5 部分标签内部属性</h2> <ul> <li><strong><html lang= “en” ></strong> 本页面采用英文显示<br> <mark>en是英文显示、zh-CN是中文显示</mark></li> <li><strong><meta charset= “UTF-8” /></strong> 采用UTF-8来保存文字，不写会出现乱码的情况<br> charset是字符集的意思，而<font color=\"blue\">UTF-8</font>基本包含所有的字符</li> </ul> <h1>2.常用标签</h1> <h2>2.1 标题标签</h2> <ul> <li>双标签从<h1>到<h6>重要性以此递减</li> <li>表达格式：<code><h1> 一级标签 </h1></code></li> <li><strong>注意：</strong> 一个标题独占一行且文字会变粗变大</li> </ul> <h2>2.2 段落与换行标签</h2> <ul> <li><strong>段落标签：</strong><br> <code><p> 某段落 </p></code><br> <mark>段落文本会根据浏览器窗口的大小自动换行</mark><br> <mark>段落之间存在空行间隙</mark></li> <li><strong>换行标签：</strong><br> <code><br /></code><br> <mark>强制换行</mark><br> <mark>与段落不同，换行不会出现间距</mark></li> </ul> <p>有时会看到<code><hr/></code>标签，这是显示水平线的标签</p> <hr> <h2>2.3 文本格式化标签</h2> <ul> <li> <p><strong>加粗：</strong><br> <code><strong> 加粗文字 </strong></code><br> strong也可用<mark>b</mark>替代</p> </li> <li> <p><strong>倾斜：</strong><br> <code><em> 倾斜文字 </em></code><br> em也可用<mark>i</mark>替代</p> </li> <li> <p><strong>删除线：</strong><br> <code><del> 删除线文字 </del></code><br> del也可用<mark>s</mark>替代</p> </li> <li> <p><strong>下划线：</strong><br> <code><ins> 下划线文字 <ins></code><br> ins也可以<mark>u</mark>替代</p> </li> <li> <p><strong>上标：</strong><br> <code><sup> 上标文字</sup></code></p> </li> <li> <p><strong>下标：</strong><br> <code><sub> 下标文字 </sub></code></p> </li> </ul> <h2>2.4 “盒子”标签</h2> <ul> <li> <p><strong><div>标签</strong><br> division，表示分割分区，一行只能放一个大盒子<div><br> <code><div> </div></code></p> </li> <li> <p><strong><span>标签</strong><br> span，表示跨度、跨距，一行可以放多个小盒子<span><br> <code><span> </span></code></p> </li> </ul> <h2>2.5 图像标签和路径</h2> <h3>2.5.1 图像标签</h3> <p><code><img src=\"图像URL\" /></code><br> <img>标签用于定义HTML页面中的图像<br> src 是其里面的<font color=\"red\"> 必须属性 </font><br> 指定图像文件的路径和文件名</p> <p><mark>img标签的其他属性：</mark></p> <table> <thead> <tr> <th>属性</th> <th>属性值（输入类型）</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>alt</td> <td>文本</td> <td>替换文本，当文本不能显示时，在其后面显示的文字</td> </tr> <tr> <td>title</td> <td>文本</td> <td>提示文本，鼠标放在图像上显示的文字</td> </tr> <tr> <td>width</td> <td>像素</td> <td>图像宽度</td> </tr> <tr> <td>height</td> <td>像素</td> <td>图像高度</td> </tr> <tr> <td>border</td> <td>像素</td> <td>图像边框粗细</td> </tr> </tbody> </table> <p><font color=\"blue\"> 属性之间不分先后、以空格隔开 </font></p> <h3>2.5.2 路径</h3> <ul> <li><strong>相对路径</strong><br> 以引用文件所在位置为参考基础<br> 如某一图片名nb.gif</li> </ul> <table> <thead> <tr> <th>分类</th> <th>符号</th> <th>表达</th> </tr> </thead> <tbody> <tr> <td>同一级</td> <td></td> <td><img src=“nb.gif” /></td> </tr> <tr> <td>下一级</td> <td>/</td> <td><img src =“images/nb.gif” /></td> </tr> <tr> <td>上一级</td> <td>…/</td> <td><img src=“…/nb.gif” /></td> </tr> </tbody> </table> <ul> <li><strong>绝对路径</strong><br> 指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径<br> 例如：<br> <code>D:\\web\\img\\baidu.gif</code><br> 或完整的网络地址<br> <code>http://www.baidu.com</code><br> <mark>前者实际开发中基本不用，不能在每个电脑兼容</mark><br> <mark>后者由于网络地址具有唯一性，可以实现兼容情况</mark></li> </ul> <h2>2.6 超链接标签</h2> <h3>2.6.1 <a>标签</h3> <ul> <li> <p><code><a href=\"跳转目标\" target=\"目标窗口的弹出方式\"> 文本或图像 </a></code><br> anchor 表示为锚<br> <strong>herf：</strong> 制定链接的URL地址（必须属性）</p> <p><strong>target：</strong> 打开链接页面方式<br> （1）_self为默认值，在当前窗口打开<br> （2）_blank ，在新窗口打开</p> </li> </ul> <h3>2.6.2 链接分类</h3> <ol> <li>外部链接，如网络链接</li> <li>内部链接：网站内页面之间的相互链接，如<br> <code><a href=\"index.html\">首页 </a></code></li> <li>空链接：当还没有确定的链接目标，可以先指向空<br> <code><a href=\"#\" 目录 </a></code></li> <li>下载链接：如指向rar压缩包，便会下载该包</li> <li>网页元素链接，在网页中，文本、图像、表格等等都可添加超链接，如给图片添加超链接：<br> <code><a href =\"https//www.baidu.com > <img src=\"index.html\" /></a></code></li> <li>锚点链接：点击链接跳转到本页面的某个位置<br> 需两步：<br> （1）在链接标签的href属性中，设置为\"#名字\"的形式，如<code><a href=\"#power\" 力量</a></code><br> （2）在目标位置标签，添加id属性= 名字，如：<br> <code><h2 id= \"power\" ></code><br> 此时点击文本中的<font color=\"blue\">力量</font>，便可跳转到目的位置</li> </ol> <h2>2.7 音频标签</h2> <p><code><audio></audio></code>标签，插入音频链接<br> <strong>属性：</strong><br> <a href=\"https://img.it610.com/image/info8/2601a45a194244f8a405489de1d167c2.jpg\" target=\"_blank\"><img src=\"https://img.it610.com/image/info8/2601a45a194244f8a405489de1d167c2.jpg\" alt=\"【HTML总复习】一文带你查漏补缺，暖你一整天_第2张图片\" width=\"626\" height=\"311\" style=\"border:1px solid black;\"></a><br> <strong>语法：</strong></p> <pre><code class=\"prism language-css\"><audio src=<span class=\"token string\">\"音频地址\"</span> controls autoplay loop> </audio> </code></pre> <p><mark>注意：</mark><br> <font color=\"red\">音频链接目前支持三种格式：MP3、WAV、Ogg</font></p> <h2>2.8 视频链接</h2> <p><code><video></video></code>标签，插入视频链接<br> <strong>属性：</strong><br> <a href=\"https://img.it610.com/image/info8/6f53ed0a05d14f52b9e5d1113c1d80ef.jpg\" target=\"_blank\"><img src=\"https://img.it610.com/image/info8/6f53ed0a05d14f52b9e5d1113c1d80ef.jpg\" alt=\"【HTML总复习】一文带你查漏补缺，暖你一整天_第3张图片\" width=\"650\" height=\"233\" style=\"border:1px solid black;\"></a><br> <strong>语法：</strong></p> <pre><code class=\"prism language-css\"><video src=<span class=\"token string\">\"视频地址\"</span> controls autoplay loop </video> </code></pre> <p><mark>注意：</mark><br> <font color=\"red\"> 视频静音下，谷歌浏览器才给自动播放</font></p> <h2>2.9 有语义的结构标签</h2> <p>H5新版本推出的语义化标签，<mark>主要用于手机端网页的制作</mark></p> <p><a href=\"https://img.it610.com/image/info8/0614c35ff88e491193182b8bd1555ea5.jpg\" target=\"_blank\"><img src=\"https://img.it610.com/image/info8/0614c35ff88e491193182b8bd1555ea5.jpg\" alt=\"【HTML总复习】一文带你查漏补缺，暖你一整天_第4张图片\" width=\"650\" height=\"324\" style=\"border:1px solid black;\"></a><br> <a href=\"https://img.it610.com/image/info8/ea8d2b4995824c31a6991f286d0c8d47.jpg\" target=\"_blank\"><img src=\"https://img.it610.com/image/info8/ea8d2b4995824c31a6991f286d0c8d47.jpg\" alt=\"【HTML总复习】一文带你查漏补缺，暖你一整天_第5张图片\" width=\"443\" height=\"424\" style=\"border:1px solid black;\"></a></p> <h1>3.注释和特殊字符</h1> <h2>3.1注释</h2> <p><code><! -- 注释语句 --></code>,一些编辑器，可以直接ctrl+/</p> <h2>3.2 特殊字符表</h2> <p><mark>收藏一下，忘了可以直接在目录点过来查哦</mark><br> <a href=\"https://img.it610.com/image/info8/1a765998a1a54ec0bce280bccd922ae3.jpg\" target=\"_blank\"><img src=\"https://img.it610.com/image/info8/1a765998a1a54ec0bce280bccd922ae3.jpg\" width=\"650\" height=\"290\" alt=\"【HTML总复习】一文带你查漏补缺，暖你一整天_第6张图片\" style=\"border:1px solid black;\"></a><br> 常用的主要是空格、大于号和小于号,其他的查个几次就记住了</p> <h1>4.表格</h1> <h2>4.1 基本语法</h2> <blockquote> <p><table><br> <tr> <td></td> <td></td> <td></td> </tr><br> <tr> <td></td> <td></td> <td></td> </tr><br> …<br> </table></p> </blockquote> <p>以下进行解释：</p> <ol> <li><code><table></table></code>是用于定义表格的标签，需要将整个表格包含</li> <li><code><tr></tr></code>定义行，<code><td></td></code>定义单元格，因此一个表格中有几列，则tr标签嵌套几个td标签</li> <li>td标签内放内容</li> <li>还有一个表头标签（table head的缩写），是标题加成效果，因此一般是将第一行的包含，突出重要性</li> </ol> <h2>4.2 表格属性</h2> <p><mark>ps:</mark><br> 这部分属性实际开发并不常用，后面通过CSS设置</p> <p><strong>学习目的</strong>主要是这里用到的单词后面CSS也会用到<br> 同时直观感受表格的外观形态</p> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>align</td> <td>left\\center\\right</td> <td>表格的对齐方式</td> </tr> <tr> <td>border</td> <td>1或“”</td> <td>是否拥有边框，默认为“”“，表示无边框</td> </tr> <tr> <td>cellpadding</td> <td>像素值</td> <td>单元边沿与其内容之间的空白，默认为1像素</td> </tr> <tr> <td>cellspacing</td> <td>像素值</td> <td>单元格之间的空白，默认2像素</td> </tr> <tr> <td>width</td> <td>像素值或百分比</td> <td>规定表格的宽度</td> </tr> </tbody> </table> <h2>4.3 表格结构标签</h2> <p><code><thead></code>标签，表示表格的头部，包含第一行<br> <code><tbody></code>标签，表示表格的主体，包含第二行及以下的<br> <code><caption></code>标签，表示表格的标题</p> <p><font color=\"red\">以上三个是使表格结构更加清晰的工具，可以不用</font></p> <h2>4.4 合并单元格</h2> <h3>4.4.1 跨行合并</h3> <p>在最上面单元格的标签中加入——<code>rowspan=\"单元格合并个数\"</code>，再将下面被合并的单元格<code><td></code>标签删去</p> <h3>4.4.2 跨列合并</h3> <p>在最左边的单元格的标签中加入——<code>colspan=\"单元格合并个数\"</code>，再将右边被合并的单元格<code><td></code>标签删去</p> <h1>5.列表标签</h1> <h2>5.1 无序列表</h2> <h3>5.1.1 语法</h3> <pre><code class=\"prism language-css\"><ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </code></pre> <h3>5.1.2 type属性</h3> <ol> <li><code><ul></code>标签中只能嵌套<code><li></code></li> <li>属性</li> </ol> <table> <thead> <tr> <th>type属性值</th> <th>列表项的序号类型</th> </tr> </thead> <tbody> <tr> <td>disc</td> <td>默认值，实心圆</td> </tr> <tr> <td>circle</td> <td>空心圆</td> </tr> <tr> <td>square</td> <td>实心正方形</td> </tr> </tbody> </table> <h2>5.2 有序列表</h2> <h3>5.2.1 语法</h3> <pre><code class=\"prism language-css\"><ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol> </code></pre> <p><font color=\"red\"> <ol>中只可嵌套<li></font></p> <h3>5.2.2 type属性</h3> <table> <thead> <tr> <th>type属性值</th> <th>列表项的序号类型</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>数字</td> </tr> <tr> <td>a</td> <td>a,b,c…</td> </tr> <tr> <td>A</td> <td>A,B,C…</td> </tr> <tr> <td>i</td> <td>小写罗马数字i,ii,iii…</td> </tr> <tr> <td>I</td> <td>大写罗马数字I,II,III…</td> </tr> </tbody> </table> <p><mark>学习CSS后，列表列表项符号由list-style-type定义，到时候会摒弃type属性</mark></p> <h2>5.3 定义列表</h2> <h3>5.3.1 语法</h3> <pre><code class=\"prism language-css\"><dl> <dt> 定义名词 </dt> <dd> 定义描述 </dd> ... </dl> </code></pre> <p>效果呈现如下：</p> <dl> 定义名词 <dd> 定义描述 </dd> </dl> <p><code>通常是一个<dt>标签对应多个<dd>标签</code></p> <h1>6.表单标签</h1> <p>使用表单——收集用户信息</p> <h2>6.1 组成</h2> <p>表单=表单域+表单控件（元素）+提示信息</p> <h2>6.2 表单域</h2> <p>包含表单元素的区域</p> <p><code><form></code>标签——定义表单域<br> <mark><code><form></code>会把其范围内的表单元素提交给服务器</mark></p> <p>常用属性：</p> <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>action</td> <td>url地址</td> <td>用于指定接收并处理表单数据的服务器程序的url地址</td> </tr> <tr> <td>method</td> <td>get/post</td> <td>设置表单的提交方式</td> </tr> <tr> <td>name</td> <td>名称</td> <td>用于指定表单的名称，以区别同一个页面的多个表单域</td> </tr> </tbody> </table> <h2>6.3 表单控件（表单元素）</h2> <h3>6.3.1 <input>表单元素</h3> <ol> <li>input是输入的意思，因此在表单元素中，<code><input></code>标签用于收集用户信息</li> <li>单标签</li> <li>属性：type属性（输入字段的形式）<br> <code><input type=\"属性值\" /></code></li> </ol> <table> <thead> <tr> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>button</td> <td>定义可点击按钮（多数情况下通过<mark>JavaScript启动脚本</mark>）</td> </tr> <tr> <td>checkbox</td> <td>定义复选框</td> </tr> <tr> <td>file</td> <td>定义输入字段和“浏览”按钮，，供文件上传</td> </tr> <tr> <td>hidden</td> <td>定义隐藏的输入字段</td> </tr> <tr> <td>image</td> <td>定义图像形式的提交按钮</td> </tr> <tr> <td>password</td> <td>定义密码字段，该字段中的字符被掩码</td> </tr> <tr> <td>radio</td> <td>定义单选按钮</td> </tr> <tr> <td>reset</td> <td>定义重置按钮，<mark>重置按钮会清除表单中所有数据</mark></td> </tr> <tr> <td>submit</td> <td>定义提交按钮，<mark>提交按钮会把表单数据发送到服务器中</mark></td> </tr> <tr> <td>text</td> <td>定义单行输入字段，用户可在其中输入文本，默认宽度为20字符</td> </tr> </tbody> </table> <ol start=\"4\"> <li>其他常用属性：</li> </ol> <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>name</td> <td>由用户自定义</td> <td>定义input元素的名称</td> </tr> <tr> <td>value</td> <td>由用户自定义</td> <td>规定input元素的值</td> </tr> <tr> <td>checked</td> <td>checked</td> <td>规定此input元素<strong>首次加载时应当被选中</strong></td> </tr> <tr> <td>maxlength</td> <td>正整数</td> <td>规定输入字段中的字符的最大长度</td> </tr> </tbody> </table> <ul> <li>单选按钮和复选框需要相同的name值</li> <li>checked属性主要针对单选按钮和复选框，主要作用是一打开页面，就默认选中某个表单元素</li> <li>maxlength,规定输入的最大字符数</li> </ul> <ol start=\"5\"> <li><code><label></code>标签<br> 绑定一个表单元素，当点击<code><label></code>标签内文本时，自动将焦点转到或者选择对应的表单元素，<strong>来增加用户体验</strong><br> <strong>语法：</strong></li> </ol> <pre><code class=\"prism language-css\"><label for=<span class=\"token string\">\"sex\"</span>\">男 </label> <input type=<span class=\"token string\">\"radio\"</span> name=<span class=\"token string\">\"sex\"</span> id=<span class=\"token string\">\"sex\"</span>/> </code></pre> <p><font color=\"red\">for属性与相关元素的id属性相同</font></p> <h3>6.3.2 <select>表单元素</h3> <p>功能：当有多个选项供用户选择，且想节约空间时，可以用<code><select></code>标签<strong>定义下拉列表</strong></p> <p><strong>语法：</strong></p> <pre><code class=\"prism language-css\"><select> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> </code></pre> <ol> <li><code><select></code>标签中至少包含一对<code><option></code></li> <li><code>在<option> 中定义 selected =“ selected \"</code> 时，当前项即为默认选中项。</li> </ol> <h3>6.3.3 <textarea>表单元素</h3> <p>功能：用于定义多行文本输入的控件<br> 常见于留言板、评论等等</p> <p><strong>语法：</strong></p> <pre><code class=\"prism language-css\"><textarea rows=<span class=\"token string\">\"3\"</span> cols=<span class=\"token string\">\"20\"</span>> 文本内容
  - cols=\"每行中的字符数\"，rows=\"显示的行数\"
  - ==实际开发不常用，基本依靠CSS
  各位看官觉得还不错可以点赞关注一下吗，我是前端小刘不怕牛牛，期待与您共同进步

\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0

【HTML总复习】一文带你查漏补缺，暖你一整天

文章目录

相关推荐