HTML超文本标记语言

如果说爱他

于 2024-07-31 15:57:35 发布

阅读量384

点赞数 6

文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/weixin_57952090/article/details/140817733

版权

HTML，即超文本标记语言（HyperText Markup Language）。

超文本，就是链接的意思。而标记，也就是html中经常使用的标签，即带尖括号的文本如<div></div>。

一、标签

双标签：

成对出现，中间包裹内容
< >里面放英文字母，即标签名
结束标签比开始标签多“/”

单标签则无结束标签，如换行标签<br>，水平线标签<hr>。

区分：需要包裹内容的一般为双标签，不需要包裹内容的为单标签。标签包裹的内容一般放在开始标签和结束标签之间。

保存HTML标签的文件拓展名为.html。

二、HTML基本骨架

在vscode中可以使用输入！(英文)之后按Enter键实现快速生成骨架。

HTML基本骨架如下：<>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

其中<html>标签代表的是整个网页，而<head>标签则是网页头部，存放给浏览器看的代码如css代码，<body>标签中则是书写网页的整体，放给用户看的代码如文字、图片等。<title>标签内包裹内容为网页的标题。

三、标签的关系

作用：明确代码的书写位置

标签有两种关系，一种是父子关系也叫嵌套关系，另外一种关系叫做兄弟关系也叫做并列关系。如上html基本框架中，<html>和<head>为父子关系，html标签中嵌套了head，而head和body则为平级，即兄弟关系。

四、注释

注释的出现是为了提高程序员代码的可读性，在html中使用ctrl+/快捷键来添加、删除注释。注意这里的/为键盘主体部分即键盘里面和问号？在同一个格子的/。

同时可以使用ctrl+s快速保存文件，Tab键和shift+Tab键快速调整代码缩进。

五、标签

1.标题标签

标签名：h1~h6，双标签

显示特点：从h1到h6，文字逐渐加粗，字号逐渐缩小，且标题标签一般独占一行

在一个网页中，h1标签一般只使用一次，用来放新闻标题或者网页logo。其他的标题标签没有具体使用次数的限制。

2.段落标签（一般使用在新闻段落、文章段落、产品描述信息等地方）

标签名：p，双标签

显示特点：一般独占一行，且段落之间存在间隙

3.换行标签

标签名：br，单标签

因为浏览器无法识别代码中的Enter换行，代码中文字换行，并不意味着文字在浏览器中显示时也会换行，所以要使用br标签进行换行。一个br会换一行，多个br标签会换多行。

4.水平线标签

标签名：hr，单标签

使用hr标签后会在网页出现一条黑色的水平线。

5.文本格式化标签

作用：为网页中的文本添加特殊样式，以突出重点，如加粗，文字倾斜，下划线，删除线。

加粗使用strong标签或者b，这里的b是英文单词bold，即加粗的意思。

倾斜使用em标签或者i标签，这里的em为emphasize即强调，i为incline即倾斜。

下划线使用ins标签或者u标签，这里的ins为insert即插入，u为underline即下划线。

删除线使用del标签或者s标签，这里的del为delete即删除，s为strikethrough即删除线，through为穿过越过的意思，可以理解为穿过这里，走过的痕迹就是一条线。

https://www.cnblogs.com/nn-y/p/15542937.html 可以在这个网站看相关html标签的英文，方便理解意思和记忆。

6.图像标签（在网页中插入图片）

标签名：img

格式：<img src=" " alt=" " title=" ">

src是用于指定图片位置和名称，是图片的必需属性；

alt是替换文本，即图片无法正常显示时，显示在图片位置的文字；

title是提示文本，即鼠标悬停在图片上时显示的文字；

当然还可以使用width和height属性来设置图片的大小，属性值为数字，无单位。

不同的属性之间使用空格隔开，不区分前后顺序。

注意：路径（查找文件时从起点到终点经历的路线）

路径分为绝对路径和相对路径，绝对路径是从盘符出发查找目标文件，而相对路径是从当前文件位置出发查找文件。

.代表当前目录，..代表上一级目录，/代表要进入某一目录，即./是进入当前目录，../是进入上一级目录。

7.超链接标签

标签名：a（双标签）

写法： <a href=" 地址">文字</a>

a标签有target属性，当target=_blank时，链接会在新窗口打开，target=_self时为当前窗口打开。

开发初期若不清楚跳转地址，可使用#替代，即href=“#”。

8.音频标签

标签名：audio

写法：<audio src=""></audio>

audio标签其他常见属性：controls 显示音频控制面板

loop 循环播放

autoplay 自动播放（为了保证用户体验，浏览器一般会禁用自动播放）

9.视频标签

标签名：video

写法：<video src="视频url"></video>

video标签其他常见属性：controls 显示音频控制面板

loop 循环播放

muted 静音播放

autoplay 自动播放（为了保证用户体验，浏览器一般会禁用自动播放）

若要实现视频自动播放，则autoplay属性要与muted属性同时使用，自动播放就可以实现，否则会被浏览器禁用。

这些属性的取值和属性名相同，在HTML5中如果属性值和属性名相同，则可以简写为同一个单词，即muted=“muted”可以简写为muted即可。

10.列表标签

列表为布局内容排列整齐的区域，列表分为无序列表和有序列表、定义列表。

无序列表即布局排列整齐，不需要规定顺序排列的列表。
有序列表即布局排列整齐，需要规定顺序的列表。
定义列表用于定义术语或名词及其解释，由术语（<dt>）和其定义（<dd>）组成。

无序列表为ul，使用ul嵌套li，li为列表条目（unorder list），ul标签里面只能包裹li标签，li标签里可以包裹任何内容。示例如下：

<ul>
    <li>
        《<a href="#">用户服务协议</a>》
    </li>
    <li>
        《<a href="#">隐私政策</a>》
    </li>
 </ul>

有序列表为ol，使用ol嵌套li，li为列表条目（order list），格式和ul相似。

<ol class="align">
        <li>第一步是</li>
        <li>第二步是</li>
</ol>

定义列表为dl(defined list)，使用dl嵌套dt和dd，dt为标题（defined title）,dd为详情或描述（definded data）。dl标签里面只能包裹dt和dd标签，dt和dd标签里可以包裹任何内容。

<dl class="align rgb">
        <dt>乐器</dt>
        <dd>大提琴</dd>
        <dd>小提琴</dd>
        <dd>钢琴</dd>
</dl>

11.表格标签

网页中的表格和excel表格类似，用来展示数据。

标签使用table嵌套tr，tr嵌套td和th，tr为行（table row），th为表头（table head），td为内容单元格（table data）。

在网页中默认表格没有边框线，若要添加边框线，则使用border属性可以为表格增加边框，写在table内当属性，属性值写数字即可，即border=“3”。

<table border="3" class="align">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>小米</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小何</td>
            <td>男</td>
            <td>10</td>
        </tr>
</table>

12.表格结构标签

用表格结构标签把表格内容划分区域，可以使表格结构更加清晰，语义更清晰。

thead	表格头部	表格头部内容
tbody	表格主体	表格主要区域内容
tfoot	表格底部	汇总信息区域

使用时直接用表格结构标签把表格内的相关标签包裹就行了。

合并单元格（将多个单元格合并成一个单元格，以合并同类信息）

分为跨行合并和跨列合并，首先要确认合并目标，若是跨行合并，则保留最上单元格，添加rowspan，取值为需要合并的单元行数，若是跨列合并，则保留最左单元格，添加colspan（column span），取值为需要合并的单元列数。最后需要删除之前书写的重复单元格。注意，不能跨表格结构合并。

13.表单标签

作用：收集用户信息

作用场景：登录页面、注册页面、搜索区域等

input标签

input标签的type属性不同，则功能不同。

书写方式：<input type=" ">

text	文本框
password	密码框
radio	单选框(用于选择性别等功能)
checkbox	多选框（选择爱好、同意某某协议等）
file	上传文件（上传头像、文件等功能）

input占位文本，即在输入框内提示输入何种信息的提示文本，为input标签的placeholder属性。（文本框、密码框可用）

text 实现一个单行文本框，可以输入信息，输入什么显示什么

password 实现一个密码框，输入的信息均不会正常显示

单选框radio 有属性name和属性checked。属性name用于分组，如我设置了两个单选框，一个为男，一个为女，当我选择时，两个均可选择，而若我将它们分入同一组gender，则他们只能二选一，实现了真正意义上的单选。checked属性为默认选中功能，若我设置女性别默认选中，则在后面添加checked属性，checked=“checked”简写为checked。

checkbox 默认选中为checked

file 上传文件，一般情况下只能上传一个文件，添加multiple（数量多的）属性则可以实现文件多选功能。

select标签（下拉表单）

select标签嵌套option标签，select为标签整体，option为下拉菜单的每一项（若要设置默认选项使用selected），若不设置默认，则默认显示第一项。

你所在的城市为：<select>
                   <option>石家庄</option>
                   <option>广州</option>
                   <option selected>深圳</option>
               </select>
               <br>

文本域

实行多行文本输入的表单控件，标签名为textarea

label标签

作用：网页中某个标签的说明文本，用label标签绑定文字和表单控件的关系，增大表单控件的点击范围，如我设置性别单选框，若我设置了男的label标签，可以实现点击男这个字也可以单选，否则只有点击单选框按钮时才可以操作。

方法一 label标签只包裹内容，不包裹表单控件，然后设置label标签的for属性和表单控件的id属性值相同

<input type="radio" name="gender" id="man"> <label for="man">男</label>

方法二用label标签包裹文字和表单控件

 <label><input type="radio" name="gender">女</label><br>

label标签可以用于文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域。

按钮

标签名：button

写法：<button type=""></button>

button的type属性可以有以下取值：

submit	提交按钮（提交后台），若不设置type属性，默认为提交按钮
reset	重置按钮，恢复默认值
button	普通按钮，默认没有功能，一般配合javascript使用

14 表格区域标签

标签名：form

所有表单控件放在该区域，统一管理，action为发送数据的地址。若不使用该标签，使用reset重置按钮时，可能不成功。

15.无意义的布局标签

作用：布局网页，划分网页区域，摆放内容。

div标签独占一行（大盒子）

span标签不换行（小盒子），一般文字内容多大，span标签所占大小多大。

16.字符实体

&nbsp；空格

&lt；小于号

&gt 大于号