编程技术

Document

【前端】HTML常用标签

因为想当个全栈，所以巩固了一下HTML与CSS和JS基础，这一篇博客是HTML部分

文章目录

HTML 基础标签 1

查资料去 [W3C]

HTML 基础框架

<!-- 以下代码声明文档类型，这里表名该文档采用的是HTML5，这个标签不属于HTML标签的一部分，但是不建议省略-->
<!DOCTYPE html>
<!-- 以下代码表名当前网页的语言类型，即使设置为其它语言，也可以显示中文，但是可能会触发一些比如翻译之类的插件-->
<html lang="zh-CN">
    <!-- 以下标签是头部标签， 是HTML必须要有的标签，有且只有一个 -->
    <head>
        <!-- 万国码：包含非常非常多语言-->
        <meta charset="UTF-8">
        <!-- 以下代码是文档名称，会显示在浏览器的标签栏内 -->
        <title>Hello world</title>
    </head>
    <body>
    
    </body>
</html>

HTML 基础标签

语义标签
  1. 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  1. 段落标签
  1. 段落和段落之间会有一个较大的空隙
  2. 段落的宽度会根据浏览器的宽度而变化，越窄段落的上下长度越长，左右宽度越窄
<p>这是一个自然段。</p><p>这又是一个自然段。</p>
<p>换行还是一个自然段。</p>
  1. 换行标签
  1. 换行没有大空隙，但是会另起一行来写

> `br` 是一个单标签

123<br/>456
文本格式化标签
  1. 加粗
<strong>我加粗啦</strong>
<b>我加粗啦</b>
  1. 下划线
<ins>我也有下划线啦~</ins>
<u>我有下划线</u>
  1. 斜体
<rm>我也倾斜啦</rm> 
<i>我是斜体</i>
  1. 删除线
<del>我身上也是</del>
<s>我身上有一条删除线</s>
div 与 span 标签
  1. div 与 span 都是一个盒子
  2. 一行只能放一个div 
<div>我是一个div标签，我一个人占一行</div>
<span>我是一个span，我一行可以显示多个</span>
图像标签

img是一个单标签

  1. src：是图像标签的必须属性，指向一张图片的地址或者URL
  2. alt：当找不到src中指向的图像时，就会显示这段文字
  3. title：当鼠标经过图像时候，就会显示这个标题
  4. width：图像的宽度（写入一个数字，单位是像素）
  5. height：图像的高度（写入一个数字，单位是像素）
  6. border：外边框大小，推荐在style或者class中设置
<!-- 下面是显示一张图片的基础操作 -->
<img src="img/img1.png" width="200"/>

<!-- 如果显示的图片有问题，我们可以采用img的alt属性来替换图像，如下所示 -->
<img src="img/imgxxx.png" alt="我显示不出来啦~" width="200"/>

<!-- 当鼠标经过图像时候，就会显示图片的标题 -->
<img src="img/img1.png" width="200" title="我是标题"/>

<!-- 下面图片有一个很大的黑色外框 -->
<img src="img/img1.png" width="200" border="15"/>

由于我并不存在一张名叫imgxxx.png的图片，所以以上代码在浏览器中的效果如下图所示：

在这里插入图片描述

为了方便演示，我给图片加了宽度，并且图与图之间加了换行。

超链接

a标签内部不仅可以嵌入文字，还可以嵌入图片等
若是指向的地址是个内部或外部地址，则会跳转到该地址
若是指向地址是一个资源，则会下载该资源（图片的话一般是打开一个新的标签页显示，可以右键保存，这是现在浏览器的特点）

  1. 外部链接

href：必要属性，指向一个地址，必须以http://开头
target：打开标签的方式，默认是_self，也就是本页打开，可以改成_blank，新页面内打开

<!-- 以下代码会在当前页面打开百度 -->
<a href="http://www.baidu.com">点我打开百度</a>
<!-- 以下代码会在新的页面打开百度 -->
<a href="http://www.baidu.com" target="_blank">点我在新的页面打开百度</a>
  1. 内部链接

内部标签的href指向一个文件即可
target标签同样生效

<a href="_HTML_01.1-语义标签.html">点我进入语义语法介绍页面</a>
  1. 空链接

若是还没有决定跳转到哪里，可以先在href中写一个#，表示不跳转。

<a href="#">点我没啥效果，我哪里都不去</a>
  1. 指向一个资源
  <!-- 点我下载资源 -->
  <a href="img/a.zip">点我下载资源</a>
  1. 指向页面内的一个锚点

我们可以在页面的某一个资源商写上id='xxx'，然后再a标签的href中指向这个元素，那么当我们点击这个a标签的时候，我们的页面会直接跳转到这个元素所在的位置。

注意：不能是class或者其他

<a href="#jump">点我跳转到锚点</a>
<h2 id="jump">我是一个锚点</h2>
特殊字符

空格 ：&nbsp;
小于号<：&lt;
大于号>：&gt;

基础标签 2 | 表格

表格的使用

表格标签
  1. table：一个表格
  2. tr：一行
  3. td：一个单元格
  4. th：表头单元格（与td同级），里面的文字会居中加粗显示
<!-- 以下代码表示一个表格 -->
<table>
    <tr>
        <th>我是标题1</th>
        <th>我是标题2</th>
        <th>我是标题3</th>
    </tr>
    <!-- 以下代码表示一行-->
    <tr>
        <td>我是一个单元格1.1</td>
        <td>我是一个单元格1.2</td>
        <td>我是一个单元格1.3</td>
    </tr>
    <tr>
        <td>我是一个单元格2.1</td>
        <td>我是一个单元格2.2</td>
        <td>我是一个单元格2.3</td>
    </tr>
</table>

以上代码在浏览器中的表现如下:

在这里插入图片描述

表格的具体属性如下：

在这里插入图片描述

  1. 黄色部分是table标签
  2. 三个蓝色部分（代码中只有两个）是tr标签
  3. 第一行的白色部分对应着th标签
  4. 其余白色部分对应着td标签
表格属性
属性 属性值 说明
align left、center、right 文字对齐方式，左中右
border 1或"" 规定表格单元是否拥有边框，默认是""，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度（百分比的话是相对父元素）

表格还是上面的表格，我对table标签做出如下修改后，表现如下图：

<table border="1" cellpadding="5" cellspacing="0" width="100%">
    <!-- 表格内容省略，与上面代码一致 -->
</table>

在这里插入图片描述

可以看到，宽度是100%，单元格和单元格之间的空隙是0，单元格与文字之间间距也很大，有边框，且文字居中显示。

我没有验证align属性，因为align属性已经过时了，在HTML5中不生效，事实上，以上的5个属性均已失效，只不过除了align以外剩下的4个还可以生效。

表格的头部与身体
标签 说明
thead 头部
tbody 身体

合并单元格

  1. rowspan="合并单元格的个数"：跨行合并
  2. colspan="合并单元格的个数"：跨列合并
<table border="1 gray">
  <thead>
  <tr>
    <th>我是标题1</th>
    <th colspan="2">我是标题2，我合并了单元格</th>
  </tr>
  </thead>
  <tbody>
  <!-- 以下代码表示一行-->
  <tr>
    <td rowspan="2">我是一个单元格1.1</td>
    <td>我是一个单元格1.2</td>
    <td>我是一个单元格1.3</td>
  </tr>
  <tr>
    <td>我是一个单元格2.2</td>
    <td>我是一个单元格2.3</td>
  </tr>
  </tbody>
</table>

以上代码在浏览器中的效果如下图所示:

在这里插入图片描述

文章目录

基础标签3 | 列表

列表可以分为三大类：

  1. 无序列表
  2. 有序列表
  3. 自定义列表

1. 无序列表

  1. 无序列表的哥哥列表项之间没有顺序级别之分，是并列的
  2. <ul>标签中只能放<li>，不能单独书写文字或者其他标签
  3. <li>标签内可以放任何元素
  4. 无序列表会带有自己的样式属性，比如前面的小黑点（如下图）
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <!-- 省略... -->
</ul>

以上代码在浏览器中的表现如下:

在这里插入图片描述

2. 有序列表

  1. <ol>标签中只能放<li>，不能单独书写文字或者其他标签
  2. <li>标签内可以放任何元素
  3. 有序列表会带有自己的样式属性，但是在实际开发中我们会使用css来进行设置
<!-- 明星排行榜 -->
<ol>
    <li>刘德华</li>
    <li>谢霆锋</li>
    <!-- 省略更多... -->
</ol>

以上代码在浏览器中的表现如下:

在这里插入图片描述

3. 自定义列表

自定义列表常用于对属于或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>：自定义列表最外层标签
<dt>：一个小标题
<dd>：列表项

注意事项：

  1. dl白起爱你中只能包含<dt>和<dl>
  2. <dt>和<dl>标签是兄弟关系
  3. <dt>和<dl>的个数没有限制
<dl>
    <dt>我是小标题1</dt>
    <dd>我是列表项1</dd>
    <dd>我是列表项1</dd>
</dl>

以上代码在浏览器中的表现如下:

在这里插入图片描述

文章目录

基础标签4 | 表单

表单是用于收集用户信息的

表单通常由以下三部分组成：

  1. 表单域（整个表单）
  2. 表单控件（也称为表单元素，就是输入框、选择框、按钮之类的）
  3. 提示信息（label信息等）

1. 表单域

表单域就是form标签

<form>会把它范围内的白哦氮元素信息提交给浏览器

表单域含有以下属性:

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

我们在使用VUE时候会用到一些第三方UI空间，比如Element-UI，其中的<el-form>也是一个表单域。

<!-- 下面是一个空的表单域 -->
<form action="demo.php" method="post" name="name1">
    
</form>

2. 表单中常用标签

1. input 标签

input标签具有以下几个属性

  1. type:定义输入框的类型
  2. name:可以理解成是给不同输入框取个名字以方便取值，也可以理解成是对单选框或者复选框进行分组（多个选择框使用相同的名字可以形成互斥）
  3. value:有一些表格，比如复选框选择爱好，那么他们框框本身应该有一个值（比如：足球、篮球、羽毛球），就是用value来进行定义
  1. type | 输入框的类型（必须有的属性）
属性值 说明
button 定义可点击按钮
checkbox 定义复选框
file 定义输入字段和"浏览"按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段。该字段中的字符将会被隐藏
radio 定义单选按钮
reset 定义重置按钮。重置按钮会清除表单中的所有数据
submit 定义提交按钮
text 定一单行的输入字段，用户可在其中输入文本。默认宽度为20个字符 
<form method="post" name="name2">
    <input type="button"/><br>
    <input type="checkbox"/><br>
    <input type="file"/> <br>
    <input type="hidden"/><br>
    <input type="image"/><br>
    <input type="password"/><br>
    <input type="radio"/><br>
    <input type="reset"/><br>
    <input type="submit" value="注册"/><br>
    <input type="text" placeholder="请输入内容"/><br>
</form>

以上代码在浏览器中的表现如下:

在这里插入图片描述

以上代码中的单选框、复选框都不会生效，我们可以通过为他们添加name的方式区分它们，同时若是多个单选框使用同一个name，那么他们之间可以形成互斥。

  1. name | 输入框的名称或者分组
<form method="post" name="name2">
  <input type="radio" name="radio1"/>
  <input type="radio" name="radio1"/>
  <input type="radio" name="radio1"/>
</form>

这么写就可以实现单选，它们在浏览器中的表现如下:

在这里插入图片描述

  1. value | 输入框的值

以上代码即使我们选择了第二个复选框，他也是没有意义的，那么我们应该考虑如何让选择框本身有值，给它定义value即可，看以下代码:

同时比如文本输入框我们也可以在JS中通过这个元素获取它的值

一些按钮的value值用于设置其中显示的文字能容

<h2>我的爱好是</h2>
<form method="post" name="name2">
  足球<input type="radio" name="radio1" value="足球"/>
  篮球<input type="radio" name="radio1" value="篮球"/>
  羽毛球<input type="radio" name="radio1" value="羽毛球"/>
</form>

以上代码中我们选择第一个单选框，则是选择了篮球，选择第二个单选框，则是选择了足球（具体是使用单选框还是复选框根据情景进行判断）

在这里插入图片描述

  1. checked | 针对单选框或者复选框的默认选中事件

若是想单选框或者复选框在一开始就被选中，那么可以使用这个属性（比如用户注册的时候我默认是男性）

<h2>请选择你的性别</h2>
<form method="post" name="name2">
    男<input type="radio" name="radio1" value="男" checked/>
    女<input type="radio" name="radio1" value="女"/>
</form>

以上代码在浏览器中的表现如下（为了方便区分我将第三部分的代码的初始状态也截图进去了。

在这里插入图片描述

  1. maxlength | 针对文本输入框的最大输入长度

比如我设置是20，那么用户最大输入20个字符，将不能继续输入了

2. <label> 标签

label标签为input元素定义注解（标签）

与vue中的方式不同，这里是通过label的for属性和input的id属性绑定

<form>
    <label for="sex">男</label>
    <input type="checkbox" id="sex">
</form>
3. <select> | 选择标签
  1. select中至少包含两个option
  2. option中可以加一个selected属性，那么该值默认处于选定状态
籍贯
<select>
    <option>山东</option>
    <option>北京</option>
    <option>江苏</option>
    <option>上海</option>
</select>

在这里插入图片描述

4. textarea | 文本域

它可以写很多行字，但是文本框可以写很多行。

相关属性或方法:

  1. cols="每行的字符数"
  2. rows="显示的行数"
    实际开发中多用css来控制
  <textarea rows="20" cols="50">
    预显示文字
  </textarea>

以上代码在浏览器中的表现如下:

在这里插入图片描述

HTML5新特性1 | 新增基础标签

以下内容会有一些兼容性问题，基本都需要IE9以上版本。

因为DIV是没有特殊语义的，所以HTML5新增了一些带语义的标签

1. 新增的布局标签

标签 说明
header 头部标签
nav 导航标签
article 内容标签
section 定义文档某个区域
aside 侧边栏标签
footer 尾部标签
  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中，需要把这些元素转换为块级元素
  • 移动端更喜欢用这些标签

H5新增标签2 | 视频标签

视频：video

video是一个行内块元素，可以设置宽高，如果不能使用margin: 0 auto来居中

浏览器支持说明

浏览器 MP4 WebM Ogg
IE √ × ×
Chrome √ √ √
Firefox √ （从Firefox21版本开始，Linux从30版本开始) √ √
Safari √ × ×
Opera √（从Opera25版本开始） √ √

相关属性

属性 说明 是否可简写 备注
controls 显示进度条、播放暂停按钮等空间（不点开始播放不会自动播放） √
autoplay 自动播放，进入页面后开始播放 √
muted 静音播放（有controls的话可以解除静音） √
loop 循环播放 √
preload 规定是否预加载视频（如果有autoplay，就忽略该属性） √ auto(预加载视频)none（不应加载视频）
src 视频链接 ×
poster 视频封面图 ×

视频标签的使用

<video src="" controls></video>

在这里插入图片描述

不加controls="controls"则没有进度条、暂停之类的按钮，可能造成无法播放。

解决浏览器不支持视频类型

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    您的浏览器不支持播放此视频。
</video>

视频封面演示

<video src="video/video.mp4" controls poster="img/img3.png"></video>

以上代码在我没播放的时候就会显示poster中指定的图片，如下所示(随便找了张图)：

在这里插入图片描述

H5新增标签3 | 音频标签

浏览器支持说明

浏览器 MP4 WebM Ogg
IE √ × ×
Chrome √ √ √
Firefox √ √ √
Safari √ √ ×
Opera √ √ √

相关属性

属性 说明 是否可简写 备注
controls 显示进度条、播放暂停按钮等空间（不点开始播放不会自动播放） √
autoplay 自动播放，进入页面后开始播放 √ 谷歌浏览器不支持
loop 循环播放 √
src 音频链接 ×
muted 静音播放（有controls的话可以解除静音） √
preload 规定是否预加载视频（如果有autoplay，就忽略该属性） √ auto(预加载视频)none（不应加载视频）

使用方式

<audio src="video/maobuyi.mp3" controls></audio>

兼容低版本浏览器

<audio controls>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持播放此视频。
</audio>

H5新增标签4 | 输入框新属性

<input type="email">

H5新增输入框属性说名

属性值 说明
email 用户输入必须为Email类型
url 用户输入必须为URL类型
date 用户输入必须为日期类型
time 用户输入必须为时间类型
month 用户输入必须为月类型
week 用户输入必须为周类型
number 用户输入必须为数字类型
tel 手机号码
search 搜索框
color 生成一个颜色选择表单
属性值 说明
required 必须填写，不能为空
placeholder 提示文本
autofocus 自动聚焦属性，页面加载完成后自动聚焦在这里
autocomplete(off/on) 当用户在字段开始键入时，浏览器就之前键入过的值，应该显示出在字段中填写的选项。（默认是开启状态，可以设置为off关闭）需要放在表单内，同时加上name属性。
multiple 可以多选文本提交