HTML 简介及 HTML 的常用标签

本木夕丶Lu

已于 2022-05-12 10:45:21 修改

阅读量1k

点赞数

分类专栏：前端系列文章标签： html

于 2022-05-03 09:02:54 首次发布

本文链接：https://blog.csdn.net/weixin_43988680/article/details/124550472

版权

前端系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、HTML是什么？
二、HTML语法
三、标签的分类
四、标签的两大重要参数

一、HTML是什么？

超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm

HTML 并不是一种编程语言，HTML使用标签来描述网页

二、HTML语法

2.1 注释

<!~~单行注释~~>
<!~~
多行注释
多行注释
多行注释
多行注释
~~>

使用场景：

由于 HTML 代码杂乱无章，并且非常的多，所以常用注释来划定区域方便后续查找

<!~~导航条开始~~>
导航条的代码.......
<!~~导航条结束~~>

2.2 HTML 文档结构

<!DOCTYPE html>
<html lang="zh-CN">

  <head>
    <meta charset="UTF-8">
    <title>css样式优先级</title>
  </head>

  
  <body>   </body>
</html>

< !DOCTYPE > 声明必须是 HTML 文档的第一行，位于 < html > 标签之前。

< !DOCTYPE > 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

< head ></head> 内的标签是当前 HTML 文件的一些配置

< body ></body> 内的标签就是浏览器渲染给用户看的

2.3 < head >内常用标签

<title>...</title>: 网页的标题

<style>...</style> : 内部用来书写 CSS 代码

<script>...</script> : 内部用来书写 JavaScript 代码

<script src='JavaScript文件的路径'>...</script> : 导入 JavaScript 文件

<link rel="stylesheet" href="外部 CSS 文件路径"> : 导入外部 CSS 文件

meta 标签

<meta http-equiv="content-Type" charset=UTF8"> : 指定文档的编码类型

<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> : 2秒后跳转到对应的网址，注意引号

<meta http-equiv="x-ua-compatible" content="IE=edge"> : 告诉IE以最高级模式渲染文档

<meta name="keywords" content="关键字"> : 搜索引擎输入关键字，那么查询的时候就有可能会根据写入的关键搜索到该网页

<meta name="description" content="网页描述"> : 搜索引擎展示的网页下方所出现的网页描述

2.4 < body >`内常用标签

标题标签：1~6 级标题

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

字体样式

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<br> : 换行

<hr>: 水平分割线

段落标签：<p> </p>：一行就是一段

特殊字符

内容	对应代码
空格	` `
>	`>`
<	`<`
&	`&`
¥	`¥`
©版权	`©`
®注册	`®`

2.5 < div>标签与 < span>`标签

<div>标签与<span>标签是在构造页面初期最常使用的 占位标签，将也变布局用这两个标签占位分隔好之后，再填充内容

<div>标签可以把它看成一块区域，也就意味着<div>标签用来提前规定所有的区域

<span>标签一般用来在<div>标签划定的区域内，再化成一个小区域，这个小区域一般只是用来放普通文本

2.6 < img>`标签–图片标签

src 图片路径
title 鼠标悬浮自动展示提示信息
alt 当图片无法正常展示自动提示的信息
height 自定义图片高度
width 自定义图片宽度
注意：height和width调整一个另外一个自适应调节单位是px(像素)

2.7 < a>`标签–链接标签

href 点击跳转到位置
网址–<a href='网址'></a>

target 控制是否当前页跳转
默认_self当前页
设置_blank新建页

<a href="" target="" >链接</a>

2.8 列表标签

无序列表(常用) : 页面上只有是有规则排列的横向或者竖向内容几乎使用的都是无序列表

有序列表、标题列表–很少使用

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2.9 表格标签

<table>
  	<!--表头字段信息-->
    <thead>
        <tr>  <!--tr表示一行-->
            <th>编号</th>  <!--th加粗文本-->
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>  <!--表头字段-->
  
  	<!--表单数据信息-->
    <tbody>
        <tr>
            <td>1</td>  <!--td普通文本-->
            <td>jason</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>tony</td>
            <td>28</td>
        </tr>
        <tr>
            <td>3</td>
            <td>kevin</td>
            <td>38</td>
        </tr>
    </tbody>  <!--表单数据-->
</table>

属性:

border: 表格边框
cellpadding: 内边距
cellspacing: 外边距
width: 像素百分比（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

2.10 form 表单标签

作用：能够获取前端用户数据(用户输入、用户选择、用户上传…)，基于网络发送给后端

 <form action="">...</form>

form标签内部书写的，获取用户的数据都会被提交到后端

action：提交数据的的路径

1、什么都不写，则默认朝当前页面的 url 提交数据；

2、写全路径，则朝指定的路径提交；

3、**只写路径后缀，则会自动在后缀前面拼接当前 url + 后缀 **

2.10.1 input`标签–获取用户输入的标签

① input 标签–文本框类型

获取用户输入的标签都应该有一个name属性，用于标识作用，只有在单选时name属性起到别的作用

type=“text”:框内为普通文本，全部显示

type=“password”：框内文本为密文

type=“date”: 日期选择格式

<form action="">
  用户名：<input type="text"> 
	密码：<input type="password">
  生日：<input type="date">
</form>

② input 标签与 label标签联动

可以点击框前的文字聚焦到对应的input框通过input 标签内的 id 绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I7VjenN8-1651539414166)(图片.assets/input 标签与 label 标签.gif)]

<label for="in_1">        
		用户名：<input type="text" id="in_1">
</label>
        
<label for="in_2">
		密码：<input type="password" id="in_2">
</label>

③ input标签的按钮类型

type=“submit”: 刷新页面，并且提交数据

type=“reset”：重置表单内所有的内容

type=“button”：一个普通的按钮，本身不带任何属性

可以通过 JavaScript 自定义 button 的功能

<form action="">
  <input type="submit" value="提交按钮"> 
	<input type="reset" value="重置表单按钮">
  <input type="button" value="自定义功能按钮">
</form>

④ input标签的单选、多选类型

type=“radio”–单选

type=“checkbox”–多选

属性checked=checked为默认选择–简写成checked

对于单选的元素，必须有name属性

<form action="">
  <p>
  男 <input type="radio" name="gender" checked>
  女 <input type="radio" name="gender">
  </p>
  
  <p>
  读 <input type="checkbox" name="hobby">
  写 <input type="checkbox" name="hobby">
  玩 <input type="checkbox" name="hobby" checked>
  </p>
</form>

⑤ input 标签的获取文件类型

type = “filie”

支持多选，input框multiple属性加上即可

注意提交文件时，需要将form表单的enctype修改成multipart/form-data,method = 'post'

<form action="" method = 'post' enctype='multipart/form-data'>
  <p>
		选择文件路径：
    <input type="file" multiple>
  </p>
</form>

2.10.2 select`标签–选择下拉框

默认选择–selected = "selected"简写为selected

单选

<form action="">
<p>
  单选下拉选择框
  <select name="" id="">
    <option value="">单选 1</option>
    <option value="" selected>单选 2</option>
    <option value="">单选 3</option>
  </select>
</p>
</form>

多选–加上multiple属性即可

选择时按住ctrl鼠标点击

<form action="">
<p>
  多选下拉选择框
  <select name="" id="" multiple>
    <option value="">多选 1</option>
    <option value="" selected>多选 2</option>
    <option value="">多选 3</option>
  </select>
</p>
</form>

2.10.3 textarea`标签–获取大段文本

cols 与 rows属性是用来控制文本框的大小的，即共有多少行，每行最多多少个字符

<form action="">
<p>
  大段文本:
  <textarea name="" id="" cols="30" rows="10"> 文本框内默认存在的文本，不写则框内为空 </textarea>
</p>
</form>

form 表单的提交数据的按钮

button标签本身就有一个事件，注意不要重复绑定

  <input type="submit" value="提交按钮"> 
	<button>点我提交</button>

三、标签的分类

块级标签与行内标签

块级标签：独占一行

行内标签：自身文本多大就占多大

注意：

关于标签嵌套：通常块级元素可以包含内联(行内)元素或某些块级元素，但内联(行内)元素不能包含块级元素，它只能包含其它内联(行内)元素。

p标签不能包含块级标签，p标签也不能包含p标签

四、标签的两大重要参数

1.id
	类似于身份证号 同一个html页面上标签的id值不允许重复
  用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
2.class
	类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)