HTML——Part2-常用标签

琥鱼
151 阅读9分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

1、 HTML 常用标签

HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org）

1.1 排版标签

  • <h*></h*>：标题标签；共六级h1~h6，文字粗细及大小逐级递减，网页每行只能有一个标题
  • <p></p>：段落标签；
  • <hr/>：水平线标签；注意这是个单标签，且在编程过程中应该单独空一行码它！
  • <br/>：换行标签；注意这还是个单标签，如果你在一句话中插入它，这句话就会被分行
  • <div></div>和<span></span>：布局标签；装其余标签的盒子（额后面你就知道它们是干嘛的且有多重要)，注意：一行只能放一个div盒子，但是一行上可以放好多个span盒子

1.2 文本格式化标签

  • <b></b>和<strong></strong>：文本加粗效果，后者除了加粗效果还有强调效果，推荐使用
  • <i></i>和<em></em>：斜体效果，推荐后者
  • <s></s>和<del></del>：文字加删除线方式显现
  • <u></u>和<ins></ins>：文字加下划线方式显现

1.3 图像标签

  • <img src="图像URL" />：该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必需属性，注意它也是个单标签
  • 这里我们关心一下 路径问题 ：分为 相对路径 （以下三条以相对来说）和 绝对路径 （较少用）
    • 同一级路径，图片引用的时候，直接写图片的名字<img src="time.jpg"/>
    • 下一级路径，需访问的文件/文件内图片名<img src="images/time.jpg"/>
    • 上一级路径，先用 . . / 翻回上一级<img src="../images/time.jpg"/>

1.4 链接标签

  • <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>可细分为：
    • 外部链接 <a href="http://www.baidu.com">百度</a>
    • 内部链接 <a href="xxxx.html">内部链接</a>
    • 空链接 <a href="#">空链接</a>
    • 下载链接 <a href="xxxx.zip" title="文件名.zip"> .exe文件或 zip压缩包</a>
    • 网页元素链接：图片、音频、视频等 <a href="http://www.baidu.com"><img src="img.jpg" /></a>
    • 锚点链接：快速定位页面位置，注意：先找目标，后拉关系
      • 使用相应的id名标注跳转目标的位置<h3 id="XXX">...</h3>
      • 使用相应的id名标注跳转目标的位置<a href="#id名">链接文本</a>
  1. href 用于指定链接目标的url地址（必须属性），当为标签应用href属性时，它就具有了超链接的功能！
  2. target 用于指定链接页面的打开方式，其取值有 _self 和 _blank 两种，其中_self为默认值，__blank为在新窗口中打开。

1.5 注释标签

  • <!--注释内容-->：快捷键是： ctrl + / 或者 ctrl +shift + /
规定：我们习惯注释在代码上方，即
<!-- Comment Text -->
<div>...</div>
不推荐
<div>...</div>
<!-- Comment Text -->
or
<div><!-- Comment Text -->...</div>

1.6 表格标签

  • <table></table>：表格标签，其内部标签：
    • <thead></thead> 定义表格的头部，注意：thead之间必须有tr标签
    • <tbody></tbody> 定义表格的主体
    • <tfoot></tfoot> 定义表格的脚注（不常用）
    • <tr></tr> 用于定义表格中的行
    • <td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr>中
    • <th></th> 定义表头中的单元格，跟td相比加粗居中
    • <caption></caption>定义表格的标题
<!-- table表格标签  tr表格行标签  td表格单元格标签-->
<!-- border边框属性规定表格单元是否有边框，默认值""表示没有 -->
<!-- width/height控制单元格长、高 -->
<!-- align设置表格在网页中的水平对齐方式 属性值left/center/right -->
<!-- cellspacing单元格之间的距离，默认2像素 -->
<!-- cellpadding控制字与边框的距离，默认为1像素 -->
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20" >
    <caption><strong>个人信息表</strong></caption>、
    <thead>
        <!-- 表头单元格th：一般作表格第一行或第一列，文本居中且加粗 -->
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>女</td>
        </tr>
     </tbody>
</table>

image.png

  • 合并单元格：
    • 跨行合并 rowspan="合并的单元格的个数"，最上侧单元格为目标单元格，写合并代码
    • 跨列合并 colspan="合并的单元格的个数"，最左侧单元格为目标单元格，写合并代码
<tr>
    <td>刘德华</td>
    <td>男</td>
    <td>18</td>
    <!-- 目标单元格  先上后下 -->
    <td rowspan="2">照片</td>
</tr>
<tr>
    <td>身高 180</td>
    <td>汉族</td>
    <td>已婚</td>
    <!-- <td>照片</td> 这个单元格是多余的 -->
</tr>
<tr>
    <td>个人作品</td>
    <!-- 第二个单元格是目标单元格 -->
    <td colspan="3">个人作品</td>
</tr>
<tr>
    <td>个人简历</td>
    <td colspan="3">个人简历</td>
</tr>

image.png

1.7 列表

列表用于布局，相对表格最大特点为整齐有序，自由度高

  • 无序列表<ul>...</ul>
<!-- li标签是指每一个子项 -->
<ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>榴莲</li>
    <li>芭乐</li>
</ul>
  • 有序列表<ul>...</ul>
<!-- 基本和ul很像，用的较少 -->
<ol>
    <li>中国</li>
    <li>美国</li>
    <li>俄罗斯</li>
</ol>
  • 自定义列表<dl>...</dl>
<!-- dl自定义列表，dt标签为名词，dd标签名词解释 -->
<dl>
    <dt>北京</dt>
    <dd>昌平区</dd>
    <dd>海定区</dd>
    <dd>东城区</dd>
</dl>

image.png

1.8 表单

表单由 表单域、表单控件（表单元素）、提示文本 组成

表单域：是一个 包含表单元素的区域

  • <form></form>标签用以实现用户信息的收集和传递，它会把范围内的表单元素信息提交给服务器
<form action="url地址:指定接收并处理表单数据的服务器程序的url地址" method="提交方式get/post" name="表单域名称"> 
    各种表单控件 
</form>

表单控件（表单元素）：主要的有input（是一个很重要的单标签）、button等

  • <input/>标签用以收集用户输入
    • type 属性：决定input表单形式
      • ="text"：单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
      • ="password"：密码字段，字符被掩码
      • ="radio"：单选安按钮
      • ="checkbox"：复选框
      • ="button"：可以点击的普通按钮，需要 value 值
      • ="submit"：提交按钮
      • ="reset"：重置按钮，清除表单所有数据
      • ="image"：图像形式的提交按钮，必须包含 src 属性，image 别写成 images
      • ="file属性值：输入字段和"浏览"按钮，供文件上传
    • value 属性：用户自定义 input控件中的默认文本值
    • name 属性：用户自定义 控件的名称，便于后台查找，注意：单选按钮和复选框要有相同的name值
    • size 属性：正整数 input控件在页面中的显示宽度
    • checked 属性：checked="checked" 表示该控件默认被选中
    • maxlength 属性：正整数 控件允许输入的最多字符数
<!-- input控件 为单标签 -->
用户名：<input type="text" value="请输入用户名" />  <br/>
昵称：<input type="text" name="username"/> <br/>
密码：<input type="password" /> <br/>
性别：
      男 <input type="radio" name="sex"/>
      女 <input type="radio" name="sex"/> <br/>
爱好：
      篮球 <input type="checkbox" name="hobby"/>
      爬山 <input type="checkbox" name="hobby"/>
      睡觉 <input type="checkbox" name="hobby"/> <br/>   
是否同意条款：<input type="radio" checked="checked"/><br/>
<!-- button需要value值，submit不需要但也可改 -->
<input type="button" value="获取短信验证码"/>
<input type="submit" />
<input type="reset" value="重置所填"><br/>
<input type="image" src="images2/btn(1).png" /><br/>
上传头像：<input type="file" /><br/>
  • <label></label>用于绑定一个表单元素，当点击label标签的时候，浏览器自动将光标转到或选择对应的表单元素上，用来增加用户体验
<!-- label标签  用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点 -->
<br/><hr/><br/>
<h3>第一种用法：label直接包含表单</h3>
    <label> 用户名：<input type="text" /> </label>
<h3>第二种用法：通过for和id控制 </h3>
    <label for="nc">昵称：</label> 
    <input type="text" id="nc" />
  • <button></button>它只是一个点击按钮，类似type类型为button的input
<!-- submit 提交表单 reset 重置表单 button 没有行为 -->
<button type="submit">Send your message</button>
  • <select></select>下拉表单元素
<!-- select下拉列表控件, select里至少有一个option, selected="selected"表示默认选中-->
<select>
    <option>--请选择省份</option>
    <option selectd="selected">北京</option>
    <option>上海</option>
    <option>上海</option>
</select>
  • <textarea></textarea>文本域元素，多行文本输入（留言板、评论）
<!-- select下拉列表控件, select里至少有一个option, selected="selected"表示默认选中-->
用户留言：
<textarea cols="每行中的字符数" rows="显示的行数">
     文本内容
</textarea>

2、 HTML5 主要新增标签

截图10.png

2.1 语义化标签

之前用到结构标签，我们只有朴素的<div></div>和<span></span>，有时候还会用到<template></template>空白标签，那么问题来了：
为什么要有语义化标签？ 因为根据内容的结构，选择合适的标签构建出便于开发者阅读的可维护性更⾼的代码结构，同时能够让机器更好地解析。

image.png

2.1.1 区块

image.png

< header >/头部标签, 页眉/
< nav > /导航标签/
< main > /主内容。主内容中还可以有各种子内容区段，可用< article >、< section >* 和*< div >等元素表示。/
< section> /定义文档某个区域/
< aside > /侧边栏标签/
< footer > /尾部标签/

  • <header>
    • 展现介绍性信息
    • 通常包含⼀组介绍性或是辅助导航的元素，如标题、Logo、搜索框、作者名称等
    • 不能放在<footer>、<address> 或者另⼀个<header> 元素内部
<header>
    <h1>禾几Ge长的还行</h1>
    <p><time pubdate datetime="2022-10-08"></p>
</header>
  • <nav>
    • 在当前⽂档或其他⽂档中提供导航链接，如菜单、目录、索引等
    • ⽤来放置⼀些热⻔的链接，不常⽤的链接通常放到<footer>里置于底部
<nav> 
    <ol> 
        <li><a href="#"> 1 </a></li> 
        <li><a href="#"> 2 </a></li> 
        <li><a href="#"> 3 </a></li> 
    </ol> 
</nav>
  • <article>
    • 独⽴的⽂档、⻚⾯、应⽤、站点
    • 可独⽴分配的或可复⽤的结构，如论坛帖⼦、新闻⽂章、博客、⽤户提 交的评论、交互式组件等
<article class="ge">
    <h1>禾几的笔记</h1>
    <article class="markdown">
        <h2>HTML</h2>
        <p>Part2-常用标签</p>
    </article>
    <article class="markdown">
        <h2>CSS基础</h2>
        <p>....</p>
    </article>
</article>
  • <section>
    • 按主题将内容分组，通常会有标题
    • <section> 通常出现在⽂档的⼤纲中
    • 不要把<section>作为普通容器来使⽤，⽐如说⽤于美化⽚段样式，此时⽤<div>更合适
    • 如果元素⾥边是独⽴的整块的内容， 可以单发布， 则更适合⽤<article>
<h1>HTML基础</h1>
<section>
    <h2>介绍</h2>
    <p>这个文档将提供一个引导，欢迎您阅读禾几Ge的博客，这是HTML基础笔记系列......</p>
</section>
<section>
    <h2>起步</h2>
    <p>我们先来看看HTML的发展历史吧~.....</p>
</section>
  • <aside>
    • 表示⼀个和其余⻚⾯内容⼏乎⽆关的部分，或者说单独拆出来不会影响整体的内容
    • 通常放在侧边栏，⽤于展示⼴告、tips、引⽤内容等
<p>我今天一定要把这个笔记写完！！</p>
<aside>
    <h4>广告</h4>
    <p>...</p>
</aside>
  • <footer>
    • 表示最近⼀个章节的⻚脚
    • 通常包含该章节作者、版权数据或者⽂档链接等信息
    • <footer>内的元素不属于章节内容，不包含在⼤纲中
<footer>
    <h1>别忘了一键三连哦~【禾几Ge】</h1>
    <p><time pubdate datetime="2022-10-08"></time></p>
</footer>

2.1.2 分组

  • <figure> 包裹被独⽴引⽤的内容：图表、插图、代码等，通常会有⼀个标题
  • <figcaption> 与其相关联的图表的说明/标题，通常位于<figure>的第⼀个或最后⼀个
<figure>
    <img src="#">
    <figcaption>禾几Ge logo</figcaption>
</figure>
  • <blockquote>块级引⽤元素,cite属性表示该来源的url
<figure>
    <blockquote cite="https://www......">
        <p>Words can be X-rays, if you use them properly - they'll go through anything.</p>
    </blockquote>
    <figcaption>-Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>

2.1.3 文本

  • <cite>
    • <cite>元素通常⽤于引⽤作品标题
    • 包括论⽂、⽂件、书籍、电影等的引⽤
  • <time>
    • 机器可读的时间和⽇期
    • datetime表示此元素关联的时间⽇期，若不指定则该元素不会被解析为⽇期
<p>这个博客写于<time datetime="2022-10-08 21:00">Oct 08</time>.</p>
  • <address> 某个⼈或组织的联系信息
  • <mark> 在引⽤中使⽤，表示需要引起注意
  • <code> 代码⽚段

2.2 多媒体标签

  • 我们熟悉的图片标签<img>
    • src 属性是必须的，嵌⼊图⽚的⽂件路径
    • alt 属性包含⼀条对图像的⽂本描述，⾮强制。屏幕阅读器会将这些描述读给需要使⽤阅读器的使⽤者听，让他们知道图像的含义。图像⽆法加载时(⽹络错误、内容被屏蔽或链接过期时)，浏览器会在⻚⾯上显示alt 属性中的⽂本
    • decoding 解码⽅式：异步、同步
    • loading 懒加载
<img src="ge.jpg" alt="禾几Ge">
  • 新一种图片标签<picture>
    • 元素通过包含零或多个<source> 元素和⼀个<img> 元素来为不同的显示/设备场景提供相应的图像版本
    • media属性：依据的媒体条件（窗口大小）适应性渲染图⽚，类似媒体查询
    • type属性：MIME类型，根据浏览器⽀持性渲染相应的图⽚
<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>
  • <audio>音频标签
    1. 音频格式：支持三种音频格式 截图11.png
    2. 语法格式： 
      <!-- src属性是必须的，嵌⼊视频⽂件路径 -->
<!-- source元素表示视频的可替代资源(不同格式、清晰度，读取失败或⽆法解码时可以依次尝试) -->
<audio src="文件地址" controls="controls"> </autio>
<audio controls="controls">
    <source src="happy.mp3" type="audio/mpeg">
    <source src="happy.ogg" type="audio/ogg" >
</audio>
    3. 常见属性: 截图12.png
  • <video>视频标签
    1. 视频格式：支持三种视频格式 截图13.png
    2. 语法格式： 
      <!-- src属性是必须的，嵌⼊视频⽂件路径 -->
<!-- source元素表示视频的可替代资源(不同格式、清晰度，读取失败或⽆法解码时可以依次尝试) -->
<video src="文件地址" controls="controls"> </video>
<video controls="controls">
    <source src="happy.mp4" type="video/mp4">
    <source src="happy.ogg" type="video/ogg" >
</video>
    3. 常见属性: 截图14.png

2.3 新增input表单类型、表单属性

对于很重要的表单大哥，H5为它新增了几种类型和新的属性

  • 常见表单 截图15.png
  • 表单属性 截图16.png

3、 总结

综上，就是个人了解的常见的一些HTML标签以及HTML5新增的主要内容，完整的标签表不建议去背诵掌握（背的没你忘得快），一些冷门的标签可以进行了解，需要的时候再去HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org）查询，我们的大把时间还是要用在Javascript大哥上的。
卷叭各位，该上号了 image.png

avatar
文章
阅读
粉丝