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

文章目录

• 导读
• • 网页
  • 什么是HTML
  • 🌟Web标准
• 1.基本标签
• • 1.1 HTML标签
  • 1.2 头部标签
  • 1.3 身体标签
  • 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 标签
    • 2.6.2 链接分类
• 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 表单元素
    • 6.3.3 表单元素</li> </ul> </li> </ul> </li> </ul> <p> <img src="https://img2.baidu.com/it/u=3989386929,2695180838&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" width="200" /> </p> <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>称之为根标签，是最大的标签，文件从开始到结束</p> <h2>1.2 头部标签</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 身体标签</h2> <p>定义的就是网页展示出来的内容</p> <h2>1.4 类型声明标签</h2> <p><font color="red"></font><br /> 告诉浏览器采取HTML5版本<br /> <strong>开头声明</strong></p> <h2>1.5 部分标签内部属性</h2> <ul> <li><strong></strong> 本页面采用英文显示<br /> <mark>en是英文显示、zh-CN是中文显示</mark></li> <li><strong></strong> 采用UTF-8来保存文字，不写会出现乱码的情况<br /> charset是字符集的意思，而<font color="blue">UTF-8</font>基本包含所有的字符</li> </ul> <h1>2.常用标签</h1> <h2>2.1 标题标签</h2> <ul> <li>双标签从<br /> <h1>到</p> <h6>重要性以此递减</li> <li>表达格式：<code><br /> <h1> 一级标签 </h1> <p></code></li> <li><strong>注意：</strong> 一个标题独占一行且文字会变粗变大</li> </ul> <h2>2.2 段落与换行标签</h2> <ul> <li><strong>段落标签：</strong><br /> <code> <p> 某段落 </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></p> <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>^上标文字</code></p> </li> <li> <p><strong>下标：</strong><br /> <code>_下标文字</code></p> </li> </ul> <h2>2.4 “盒子”标签</h2> <ul> <li> <p><strong></p> <div>标签</strong><br /> division，表示分割分区，一行只能放一个大盒子</p> <div> <code></p> <div> </div> <p></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> <img src="index.html" /></a></code></li> <li>锚点链接：点击链接跳转到本页面的某个位置<br /> 需两步：<br /> （1）在链接标签的href属性中，设置为"#名字"的形式，如<code><a href="#power" 力量</a></code><br /> （2）在目标位置标签，添加id属性= 名字，如：<br /> <code><br /> <h2 id="power"></code><br /> 此时点击文本中的<font color="blue">力量</font>，便可跳转到目的位置</li> </ol> <h1>3.注释和特殊字符</h1> <h2>3.1注释</h2> <p><code></code>,一些编辑器，可以直接<kbd>ctrl</kbd>+<kbd>/</kbd></p> <h2>3.2 特殊字符表</h2> <p><mark>收藏一下，忘了可以直接在目录点过来查哦</mark>🤗🤗🤗<br /> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2F20210301220845973.png%3Fx-oss-process%3Dimage%2Fwatermark%2Ctype_ZmFuZ3poZW5naGVpdGk%2Cshadow_10%2Ctext_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTIyOTk4%2Csize_16%2Ccolor_FFFFFF%2Ct_70&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654516802&t=cb008795bbe42fbea397ae253518f798" /><br /> 常用的主要是空格、大于号和小于号,其他的查个几次就记住了🤪</p> <h1>4.表格</h1> <h2>4.1 基本语法</h2> <blockquote> <p><table> </p> <tr>   </p> <td></td> <td></td> <td></td> <p>   </tr> <p> </p> <tr>   </p> <td></td> <td></td> <td></td> <p>   </tr> <p> …<br /> </table> </p> </blockquote> <p>以下进行解释：</p> <ol> <li><code><br /> <table></table> <p></code>是用于定义表格的标签，需要将整个表格包含</li> <li><code><br /> <tr></tr> <p></code>定义行，<code></p> <td></td> <p></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></p> <thead></code>标签，表示表格的头部，包含第一行<br /> <code></p> <tbody></code>标签，表示表格的主体，包含第二行及以下的<br /> <code></p> <caption></code>标签，表示表格的标题</p> <p><font color="red">以上三个是使表格结构更加清晰的工具，可以不用</font></p> <h2>4.4 合并单元格</h2> <h3>4.4.1 跨行合并</h3> <p>在最上面单元格的标签中加入——<code>rowspan="单元格合并个数"</code>，再将下面被合并的单元格<code></p> <td></code>标签删去</p> <h3>4.4.2 跨列合并</h3> <p>在最左边的单元格的标签中加入——<code>colspan="单元格合并个数"</code>，再将右边被合并的单元格<code></p> <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></p> <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"> </p> <ol>中只可嵌套</p> <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> 定义名词 </p> <dd> 定义描述 </dd> </dl> <p><code>通常是一个</p> <dt>标签对应多个</p> <dd>标签</code></p> <h1>6.表单标签</h1> <p>使用表单——收集用户信息</p> <h2>6.1 组成</h2> <p>表单=<kbd>表单域</kbd>+<kbd>表单控件（元素）</kbd>+<kbd>提示信息</kbd></p> <h2>6.2 表单域</h2> <p>包含表单元素的区域</p> <p><code></code>标签——定义表单域<br /> <mark><code></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 表单元素</h3> <ol> <li>input是输入的意思，因此在表单元素中，<code></code>标签用于收集用户信息</li> <li>单标签</li> <li>属性：type属性（输入字段的形式）<br /> <code></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 表单元素</h3> <p>功能：当有多个选项供用户选择，且想节约空间时，可以用<code></code>标签<strong>定义下拉列表</strong></p> <p><strong>语法：</strong></p> <pre><code class="prism language-css"> 选项一 选项二 选项三</code></pre> <ol> <li><code></code>标签中至少包含一对<code></code></li> <li><code>在 中定义 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

      🍔🍔🍔

      各位看官觉得还不错可以点赞关注一下吗，我是前端小刘不怕牛牛，期待与您共同进步🤗🤗🤗