HTML基本介绍及标签应用_html的基本标签应用报告-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46108602/article/details/110704698

HTML基本介绍及标签应用

1、初识HTML
- 1.1 前端技术栈
- 1.2 html概述
- 1.3 html基本结构
- 1.4 html基本内容
2、网页基本标签
- 2.1 标题标签
- 2.2 段落标签
- 2.3 换行标签
- 2.4 水平线标签
- 2.5 字体样式标签
- - 2.5.1 粗体
  - 2.5.2 斜体
- 2.6 注释和特殊符号
3、列表标签
- 3.1 有序列表(ol)
- 3.2 无序列表(ul)
- 3.3 自定义列表(dl)
4、表格标签
- 4.1 基本的表格标签
- 4.2 跨列（colspan)
- 4.3 跨行（rowspan）
5、图像标签
6、音视频标签
- 6.1 视频标签
- 6.2 音频标签
7、超链接标签
- 7.1 页面间链接
- 7.2 锚链接
- 7.3 功能性链接
- - 7.3.1 邮件链接（mailto)
  - 7.3.2 qq链接
8、块内元素和行内元素
- 8.1 块内元素
- 8.2 行内元素
9、页面结构分析
10、iframe内联架构
11、表单(form)
12、文本框和单选框
- 12.1 文本框（text）
- 12.2 单选框（radio）
13、按钮和多选框
- 13.1 多选框(checkbox)
- 13.2 按钮(button)
14、列表框、文本域和文件域
- 14.1 列表框（下拉框 selected)
- 14.2 文本域
- 14.3 文件域(file)
15、搜索框、滑块和简单验证
- 15.1 搜索框(search)
- 15.2 滑块(range)
- 15.3 简单验证
16、增强鼠标可用性
17、表单的简单验证
18、div标签

1、初识HTML

1.1 前端技术栈

HTML：超文本标记语言，网页里显示的图片、音频资源等都可以与html文本关联起来，浏览器通过渲染html文本给用户呈现网页；
CSS：通过CSS可以美化网页；
JavaScript：通过JS可以使我们的网页动起来，提升交互性；
JQuery：直接写JS比较麻烦，JQuery封装了JS；
Vue：前后端分离用的一个框架。

1.2 html概述

HTML全称Hyper Text Markup Language，是超文本标记语言，网页里显示的图片、音频资源等都可以与html文本关联起来，浏览器通过渲染html文本给用户呈现网页；
所谓的超文本，是指文字、图片、音频、视频、动画等资源；
目前HTML版本使用较多的是HTML5，CSS用的较多的是CSS3版本；

1.3 html基本结构

html文件的结构分为两部分：网页头部和主体部分。

html文本的内容是由一系列标签组成的，标签分为两类：成对出现的开放标签和闭合标签，和单独出现的自闭合标签，如下：

开放标签和闭合标签是成对出现的，闭合标签多了个/来表示标签范围结束；
自闭和标签仅有一个出现，比如上图中的meta，不需要用/来表示标签范围结束（可以有/也可以没有/），直接用>结尾。

html注释写法：

<!-- 注释内容 -->

对应的快捷键：ctrl + /

1.4 html基本内容

下面是一个html的简单demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个html文件</title>
</head>

<body>
Fuck the whole world!
</body>
</html>

html文本内容一般由一下几个部分组成：

DOCTYPE声明：告诉浏览器我们要是用什么规范，如上面的例子是使用html规范；
title标签：网页标题
meta标签：描述性标签，用来告诉我们网站的一些信息，一般用来做SEO；

我们可以在body标签里添加简单的网页显示内容，比如字符串：Fuck the whole world!

2、网页基本标签

网页的内容是由以下几大类标签对应的内容组成的：

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

2.1 标题标签

格式：

<hn>
  内容
</hn>

举例：

<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>

2.2 段落标签

html文本不识别换行符和空格符，如果想体现换行需要使用段落标签。

格式：

<p>
  段落文字
</p>

快捷键：先输入字符p，然后摁tab键。

举例：

<body>

<p>
    第一段内容
</p>

<p>
    第二段内容
</p>

<p>
    第三段内容
</p>

</body>

2.3 换行标签

采用自闭和标签的形式，格式：

每一行的内容<br/>

举例：

<body>

第一行内容<br/>
第二行内容<br/>
第三行内容<br/>

</body>

注意区分换行标签和段落标签内容显示的不同，换行标签要窄一些。

2.4 水平线标签

网页内容加一条水平线：分割线，格式：

<hr/>

2.5 字体样式标签

2.5.1 粗体

格式：

<strong>粗体文本</strong>

举例：

<body>

<p>正常文本<p> 
<br/>
<strong>粗体文本</strong><br/>

</body>

2.5.2 斜体

格式：

<em>斜体文本</em>

举例：

<body>

<p>正常文本<p> 
<br/>
<em>斜体体文本</em><br/>

</body>

2.6 注释和特殊符号

特殊符号通用格式：

`&特殊符号`；
1、空格：  $nbsp; 
需要几个空格就用几个 `$nbsp;`
2、大于号： $gt;
3、小于号： $lt;
4、版权符号： $copy;

3、列表标签

列表标签对应的内容是一条一条的形式呈现的，分为：

有序列表
无序列表
自定义列表

3.1 有序列表(ol)

格式：

<body>

<ol>
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
    ...
</ol>

</body>

3.2 无序列表(ul)

格式：

<body>

<ul>
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
  ...
</ul>

</body>

3.3 自定义列表(dl)

格式：

<body>
<dl>
    <dt>自定义列表1</dt>
    <dd>自定义列表1的元素1</dd>
    <dd>自定义列表1的元素2</dd>
    <dd>自定义列表1的元素3</dd>

    <dt>自定义列表2</dt>
    <dd>自定义列表2的元素1</dd>
    <dd>自定义列表2的元素2</dd>
    <dd>自定义列表2的元素3</dd>
</dl>

</body>

标签说明：

：自定义列表标签
：自定义列表名称
：自定义列表元素

举例：

<body>

<dl>
    <dt>自定义列表1</dt>
    <dd>自定义列表1的元素1</dd>
    <dd>自定义列表1的元素2</dd>
    <dd>自定义列表1的元素3</dd>

    <dt>自定义列表2</dt>
    <dd>自定义列表2的元素1</dd>
    <dd>自定义列表2的元素2</dd>
    <dd>自定义列表2的元素3</dd>
</dl>

</body>

4、表格标签

表格标签就是html通过表格标签在网页中显示一个类似Excel表格的内容，表格的基本结构有以下几个部分：

单元格
行 tr
列 td
跨行
跨列

4.1 基本的表格标签

举例，在网页中显示一个3*3的表格：

<body>

<table border="1px" bgcolor="blue">
    <tr bgcolor="#ffe4c4">
        <td bgcolor="aqua">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>

    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

</body>

标签说明：

：表格标签；
：行标签；
：列标签；
border：参数，用来表示表格的边框大小，是
标签的参数；
bgcolor：参数，用来表示具体单元格的填充颜色，可以是
、和标签的参数，当三个标签都设置了该参数时，优先级顺序从高到底依次为：、、
。

4.2 跨列（colspan)

举例，整体仍然是3*3表格，1-1和1-2单元格合并为一个，即跨列：

<body>

<table border="1px">
    <tr>
        <td colspan="2">1-1</td>
        <td>1-2</td>
    </tr>

    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>

    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

</body>

标签说明：

colspan：是标签的参数，后面跟数字，代表当前行当前列的单元格要跨几个列；

4.3 跨行（rowspan）

完全参考跨列,仅属性名称改为rowspan。

5、图像标签

格式：

src是必选项，其他为可选项；
src建议使用相对路径；

…/ 上级目录

./ 当前目录
除了alt、title等可选项外，还有很多其他可选项，输入空格有提示。

举例：

<body>

<img src="../resource/img/1.jpg" alt="图片名称" title="悬停文字" width="300" height="300">

</body>

6、音视频标签

视频音频资源放在reources目录下的video和audio目录下，图片放在image目录下。

网页中的音频和视频资源，对应html标签为音频标签和视频标签，html通过音视频标签组织相应内容的。

6.1 视频标签

格式：

<video src="资源的相对路径" controls autoplay height="300" width="300"></video>

标签和参数说明：

：视频标签；
标签参数，视频资源的相对路径，此处资源需放入项目文件；
controls：video标签参数，视频播放控制条；
autoplay：video标签参数，自动播放视频；
height，width：视频界面的长宽。

6.2 音频标签

格式：

<audio src="资源的相对路径" controls autoplay height="300" width="300"></audio>

标签和参数说明：

：视频标签；
src：audio标签参数，视频资源的相对路径，此处资源需放入项目文件；
controls：audio标签参数，视频播放控制条；
autoplay：audio标签参数，自动播放视频；
height，width：视频界面的长宽。

7、超链接标签

超链接标签的概念应该知道吧。

7.1 页面间链接

格式：

参数说明：

：超链接标签；
href：标签的参数，后面的path参数填写链接的路径，表示要跳转哪个页面，可以是html文件，也可以是域名；
target：标签的参数，表示链接在哪个窗口打开，可选的参数主要有以下两个：
- _blank：点击链接后跳转页面在新的窗口打开；
- _self：点击链接后跳转页面在当前窗口打开；
链接文本或图像：这一部分是点击链接文本或者图像可以跳转到另一个页面，相当于一个入口。

举例：

<body>

<a href="hello.html" target="_self">在本窗口打开hello页面</a>

<br/>

<a href="https://www.baidu.com" target="_blank">在新的页面打开百度页面</a>

</body>

7.2 锚链接

通过锚链接我们可以实现页面内的跳转，比如我们想选定目录树中某个章节时，可以通过点击目录树中章节对应的位置直接跳转到对应内容，也可以应用在网页中返回顶部这个功能。

锚链接意思是预先设置好一个锚点，即本页面中要跳转过来的地方，再后面要跳转时直接通过a标签即可。

格式：

锚点：

<a name="锚点名称">锚点描述性文字</a>

抛向锚点：

<a href="页面#锚点名称">抛锚描述性文字</a>

注意这里可以不只是局限在本页面，也可以抛向其他页面的特定位置，格式为"其他页面#锚点名称"，锚点名称前用**#**标记。

举例：

<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- 中间这部分填充网页的其他部分，目的是让锚点和抛锚处不能在一个页面内显示完全 -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#top">回到顶部</a>

</body>

7.3 功能性链接

所谓功能性链接，就是指一些特定或者常用的超链接，比如邮件链接、QQ链接或者BILI链接等，用于站内分享链接等

7.3.1 邮件链接（mailto)

举例：

<body>

<a href="mailto: 15828074705@163.com">点击邮箱联系我</a>

</body>

效果：

7.3.2 qq链接

腾讯开发的功能，可以自动生成一个qq链接，我们只需要把自动生成的a标签粘贴到我们的html文本里就ok。

8、块内元素和行内元素

块内元素和行内元素是一元素的一种组织布局方式。

8.1 块内元素

比如段落标签 p 、标题标签 h 等，都会单独一行。

8.2 行内元素

比如字体标签strong em a等，内容撑开宽度。

9、页面结构分析

10、iframe内联架构

iframe内联结构用在在一个网站内部嵌入另一个网站并打开。

格式：

举例：

<body>

<iframe src="https://www.baidu.com" width="1000" height="800"></iframe>

</body>

效果：

11、表单(form)

表单提交，举个例子，网站的登录界面，需要用户填写用户名和密码才能登录，这种需要用户一次性填写完很多信息后再统一提交给服务器的场景就可以用表单上传，表单上传一般指的是post上传。

格式：

参数说明：

：表单上传的标签；
method：标签里的参数，代表表单上传的方法，有post和get两个选项，一般用post；
action：标签里的参数，表单提交的位置，可以是html页面（网站），也可以是请求处理的地址；
input：输入标签，文本输入框，自闭合标签；
type：input标签里的参数，输入数据的类型，比如"test"、"password"等；
name：input标签里的参数，input标签的标签名称；

表单元素格式：

<body>

<h1>登录</h1>

<form method="get" action="hello.html">
    <p>用户名：<input type="text" name="userName"></p>
    <p>密码：<input type="password" name="pwd"></p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>

post和get的区别：

get：我们可以在url中（浏览器的网址框中）看到我们提交的信息，比如用户名和密码，不安全，但高效；
post：适合传输大文件，在url中看不到我们提交的信息，但是在审查元素里的header信息里还是可以看到；

get：

post：

post上传，在审查元素的header里依然可以看到提交的用户名和密码，可以用base64加密字符串进行安全处理。

12、文本框和单选框

12.1 文本框（text）

<input type="text" value="默认初始值" name="提交name" size="文本框长度" maxlength="文本最大长度"/>

参数说明：

type：表单类型
value：默认初始值
name：提交表单时使用，表单标志
size：文本框长度
maxlength：文本最大长度
后面还可以添加readonly：只读（不能修改）、hidden：隐藏

12.2 单选框（radio）

格式：

<input type="radio" value="默认值" name="若干个单选框组成的整体的名称" checked/>选项值

参数说明：

每一个input是一个单选框的选项，要想真正只能同时勾选1个单选项，其他的勾选不了，几个单选框的name必须是同一个name，确保每个选项都在同一个组；
checked：默认是哪个选项被勾选，可写可不写；
选项值在标签外面。
还可以设置禁用 disabled。

<P>
  <input type="radio" value="men" name="sex"/>男
  <input type="radio" value="women" name="sex"/>女
</P>

13、按钮和多选框

13.1 多选框(checkbox)

注意：一般每个选项都在同一个组，使每个选项都属于想设置的同一个内容提交成一个数组形式

<input type="checkbox" value="默认初始值" name="若干个多选框组成的整体的名称">多选项名称
还可以设置禁用 disabled。

<p>
  兴趣
  <input type="checkbox" value="coding" name="hobby">编程
  <input type="checkbox" value="LOL" name="hobby">LOL
  <input type="checkbox" value="eating" name="hobby">吃饭
  <input type="checkbox" value="sleeping" name="hobby">睡觉
</p>

13.2 按钮(button)

格式：

<input type="button" value="按钮上面的字" name="按钮名">
还可以设置禁用 disabled。

<p>
  按钮
  <input type="button" value="这是个按钮">
  图片按钮
  <input type="image" src="图片路径">
</p>

14、列表框、文本域和文件域

14.1 列表框（下拉框 selected)

格式：

<p>
  <select name="列表名称" id="">
    <option value=默认初始化值 selected>列表选项</option>
    ...
  </select>
</p>

参数说明：

标签：列表框标签；
name：列表名称；
标签：列表选项标签；
value：标签的参数，默认初始化值；
selected：标签的参数，表示列表的默认显示值为当前option。

<p>
  国籍
  <select name="列表名称">
    <option value="china">中国</option>
    <option value="usa" selected>美国</option>
    <option value="uk">英国</option>
    <option value="france">法国</option>
  </select>
</p>

效果：

14.2 文本域

就是文本框，可以让用户编写文字在里面，比如用户反馈，LOL举报时写小作文的地方。文本域可调整。

格式：

<p>
  <textarea name=文本域名称 cols=占多少列 rows=占多少行></textarea>
</p>

<p>
  用户反馈
  <textarea name="feedback" cols="50" rows="10"></textarea>
</p>

效果：

14.3 文件域(file)

就是选择本地文件上传。

格式：

<input type="file" name=文件域名称>

<p>
  <input type="file" name="files">
  <input type="button" value="上传" name="upload">
</p>

效果：

15、搜索框、滑块和简单验证

15.1 搜索框(search)

格式：

<input type="search" name=搜索框名称>

<p>
  站内搜索
  <input type="search" name="search">
</p>

效果：

15.2 滑块(range)

格式：

<input type="range" min=最小值 max=最大值 name=滑块组件名称 step=步长>

<p>
  音量滑块
  <input type="range" min="0" max="100" name="voice" step="2">
</p>

效果：

15.3 简单验证

就是对input输入框里输入的信息做简单验证，比如检查是否是email格式、url格式，是否是数字格式等，但注意这里的验证并不严格，需要在js里做更严格的验证。

举例：

<p>
  邮箱地址<input type="email" name="email">
  视频网址<input type="url" name="url">
  商品数量<input type="number" name="number" max=最大值 min=最小值 step=间隔步长>
</p>

16、增强鼠标可用性

<p>
    <label for="mark">你点我鼠标就会自动聚焦到文本框</label>
	<input type="text" id="mark"> 
</p>

17、表单的简单验证

<input type="text" placeholser="请输入用户名" required name="提交name" size="文本框长度" maxlength="文本最大长度"/>

验证电子邮箱
<input type="text" name="" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"/>

placeholser:用于提示用户
required:非空判断
pattern：正则表达式

18、div标签

标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

格式：

<div>
  这里写这个分割区块内要布局的东西
</div>

<div>
  这里写这个分割区块内要布局的东西
</div>
...

一般在div标签里会跟一个id参数，就是给当前分割区域用一个唯一的id与之对应，这个不是必填参数。

<body>

<div id="1" style="background-color: blue">
    这是div蓝色区域
</div>

<div id="2" style="background-color: red">
    这是div红色区域
</div>

<div id="3" style="background-color: green">
    这是div绿色区域
</div>

</body>

效果：