标签学习

辉哥大约 19 分钟

html5标签学习

以下为学习过程中的极简提炼笔记，以供重温巩固学习

学习路线&目的

掌握标签含义
掌握标签书写规范
掌握html语法规范

准备工作

熟练掌握编译器的使用：见vscode的使用技巧

掌握html语法规范

标签使用尖括号包裹，如 <html>
双标签，成对出现，如 <html> 和 </html> 开始标签没有/，结束标签在标签名前带/
单标签，单个，相对少用、特殊，如 <br/>
标签可分包含关系和并列关系，大多数标签元素支持嵌套包含

掌握html基本结构标签

html结构/骨架标签如下

标签名	定义	说明
`<html></html>`	html标签	页面中最外层、最大的标签，根标签
`<head></head>`	文档头	必须要将`<title></title>`标题标签嵌套其中
`<body></body>`	文档主体	网页内容包含在`<body></body>`标签对中，与`<head></head>`并列

示例

语法格式案例

html基本结构

<html> 
  <head> 
    <title>标题</title>
  </head>
  <body>
    网页内容
  </body>
</html>

使用 VScode 编译器写html

暂忽略其他编译器，本文以使用 VScode 为例

编译器模板

在编译器中创建 *.html 文件后，打开编译，输入 ! 英文感叹号后回车，自动写入以下html模板

编译器快捷键与插件

认识编译器快捷键与插件，到软件使用vscode下查看

编译器生成的html模板说明

语法格式案例

编译器生成的html模板


<!DOCTYPE html>    <!-- <!DOCTYPE>标签，用于文档类型声明，如此处是使用html -->
<html lang="zh">   <!-- lang语言标签 -->
<head>
    <meta charset="UTF-8">   <!-- 字符集，使用UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    //body标签中写内容
</body>
</html>

学习标签语义

理解标签含义，结合文本情况，在合适的地方使用合适的标签，使得页面结构更清晰

标题标签

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的
<h1> 定义最大的标题 <h6> 定义最小的标题

注释1：浏览器会自动地在标题的前后添加空行。
注释2：默认情况下 HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

标题很重要

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

语法格式案例

标题标签

<h1>标题一共六级选，</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

段落与换行标签

段落是通过 <p> 一段文字 </p> 标签定义的。如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签

注释1：浏览器会根据窗口的大小，自动地在段落的前后添加空行。（<p> 是块级元素）
注释2：如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签，即将<br />嵌套在<p> 一段文字 </p>中注释3：<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签，是一个单标签

语法格式案例

段落与换行标签

<p>This is<br />a para<br />graph with line breaks</p>

文本格式化标签

文本格式化是语义标签

语义	标签	说明
加粗	或	使用容易懂的，语言更强烈的，熟练的话可以使用简写的
倾斜	或	使用容易懂的，语言更强烈的，熟练的话可以使用简写的
删除线	或	使用容易懂的，语言更强烈的，熟练的话可以使用简写的
下划线	或	使用容易懂的，语言更强烈的，熟练的话可以使用简写的

语法格式案例

文本格式化标签

我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>

`<div>`和`<span>`标签

<div>和<span>标签是非语义标签，是布局标签
一行只能放一个<div>标签，多个连续的<span>标签，将会在一行内显示

语法格式案例

`<div>`和`<span>`标签

<div>我是一个div标签我一个人单独占一行</div>
<div>我是一个div标签我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>

图像标签与路径

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性 src ，即指"source" src 源属性的值是图像的 URL 地址 src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名

替换文本属性（Alt）:
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

语法格式案例

图像标签

<img src="url" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像标签的各个属性与说明

属性键	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像无法显示时的代替文字
title	文本	提示文本，鼠标悬浮时的图片描述显示文字
width	像素	设置图像宽度
height	像素	设置图像高度
border	像素	设置图像边框粗细度

图像标签注意点

图像标签可以拥有多个属性，必须写在标签名的后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”

路径知识

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等。
根目录：打开目录文件夹的第一层就是根目录

路径可以分为：

相对路径
绝对路径

超链接标签

<a> 标签用于定义超链接

语法格式案例

超链接标签

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性键	属性值	说明
herf	链接路径	用于指定链接目标的url地址(必须属性)
target	打开方式	用于指定链接页面的打开方式

herf 用于指定链接目标的url地址(必须属性)，当为标签应用href属性时，它就具有了超链接的功能 target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

链接分类

外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >
内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >
空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a >
下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置. 在链接文本的 href 属性中，设置属性值为 #名字的形式，如:<a href="#two"> 第2集 </a> 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如:<h3 id="two">第2集介绍</h3>

表格标签

表格标签+表头标签的语法

语法格式案例

表格标签

<body>
    <!-- 这些属性要写到表格标签table 里面去 -->
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
        <tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr>   <!-- tr套th，表头行 -->
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>     <!-- tr套td，表格行 -->
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
    </table>
</body>

<table> </table> 是用于定义表格的标签
<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table> 标签中。
<td> </td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 标签中。
字母 td 指表格数据（table data），即数据单元格的内容
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
<th> 标签表示 HTML 表格的表头部分(table head 的缩写)
表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中

思路：

先制作表格的结构.

1.第一行里面是 th 表头单元格
2.第二行开始里面是 td 普通单元格单元格里面可以放任何元素
3.文字链接图片等都可以

后书写表格属性

1.用到宽度高度边框 cellpadding 和 cellspacing
2.表格浏览器中对齐 align

表格结构标签

使用场景: 因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域，这样可以更好的分清表格结构。

语法格式案例

表格结构标签

<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
    <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>

        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </tbody>           
    </table>
</body>

总结:

<thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。一般是位于第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
以上标签都是放在 <table></table> 标签中。

合并单元格方式：

跨行合并：rowspan="合并单元格的个数"

最上侧单元格为目标单元格, 写合并代码

跨列合并：colspan="合并单元格的个数"

最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并。

找到目标单元格. 写上合并方式 = 合并的单元格数量。

比如：<td colspan=“2”></td>。删除多余的单元格。

语法格式案例

表格标签-合并单元格

<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
           
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
           
            <td></td>
            <td></td>
        </tr>
    
    </table>
</body>

表格总结

标签

table thead body tr th td

相关属性

cellspacing cellpadding width height border

合并单元格

rowspan collspan

列表标签

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表

无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

语法格式案例

无序列表标签

<body>
    <h4>您喜欢的食物?</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>
            <p>123</p>
        </li>
    </ul>
</body>

无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。 <ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

语法格式案例

有序列表标签

<body>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>刘德华 10000</li>
        <li>刘若英 1000</li>
        <li>pink老师 1 (stephen实名感谢pink老师教学) </li>
    </ol>
</body>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
<li> 与 </li>之间相当于一个容器，可以容纳所有元素。
有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。 <dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

语法格式案例

自定义列表标签

<body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>

表单标签

一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成

表单域

<form> 标签就是表单域，表单域就是<form> 标签
<form> 标签用于定义表单域，以实现用户信息的收集和传递，<form> 会把它范围内的表单元素信息提交给服务器

语法格式案例

表单标签（VuePressThemeHope不支持展示，可自建html文件验证）

<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>

属性键	属性值	说明
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件(表单元素)

input标签

<input> 表单元素用于收集用户输入的信息

在 <input> 标签中，包含一个 type 属性键，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input /> 标签为单标签，在 type 属性键，设置不同的属性值，用来指定<input>标签为不同的控件类型

语法：<input type="属性值" />，type 属性的属性值及其描述如下：

属性键	属性值	说明
input type=	button	定义可点击按钮，多数情况下，用于通过JavaScript启动脚本
input type=	checkbox	定义复选框
input type=	file	定义输入字段和“浏览”按钮，供文件上传
input type=	hidden	定义隐藏的输入字段
input type=	image	定义图像形式的提交按钮
input type=	password	定义密码字段，该输入字段的字符以密码点形式掩码
input type=	radio	定义单选按钮
input type=	reset	定义重置按钮，执行后会清除当前表单中的所有数据
input type=	submit	定义提交按钮，执行后会将表单数据发送到服务器
input type=	text	定义单行的输入字段，用户可在其中输入文本，默认宽度20字符

语法格式案例

input 标签 + type 属性键


<body>
    <form action="xxx.php" method="get">
         <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  <br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
    </form>
</body>

label标签

<label> 标签为 input 元素定义标注（简单理解为，是 input 标签的描述标签，是 input 标签的其中一个属性）

<label> 标签用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验

核心知识： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

select标签

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

textarea标签

使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
cols=“每行中的字符数” ，rows=“显示的行数”，实际开发中多使用 CSS 来改变大小。

总结

这三组表单元素都应该包含在form表单域里面，并且都有 name 属性

语法格式案例

input 标签 + label 描述标签 + select 表单元素 + textarea 表单元素


<body>
  <form>
   <label for="text"> 用户名:</label> <input type="text" id="text" >
   <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
   <input type="radio" id="nv"  name="sex"> <label for="nv">女</label>
   <br>
   <br>
    籍贯: 
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
    </select>
    <br>
    <br>
    今日反馈:
    <br>
    <textarea cols="50" rows="5">这个反馈留言是textarea来做的，可以写入预写文本 </textarea>
    <br>
    <br>
    <input type="reset" value="重新填写">
  </form>
</body>