HTML常用标签整理
HTML（超文本标记语言，简称：HTML ）也叫作超文本标记语言，是一种使用结构化 Web 网页及其内容的标记语言
HTML：描述的是网页结构
<!--D document T type D definition 约束-->
<!DOCTYPE html>
<!--根标签 是双标签 -->
<html lang="en">
<!--头部标签-->
<head>
<!--meta 中指定的是网页编码格式-->
<meta charset="UTF-8">
<!--定义选项卡中的内容 title是选项卡标题-->
<title>小米</title>
</head>
<!--
HTML：描述的是网页结构
CSS：美化页面
JavaScript：和用户进行交互 10
Jquery：对JS的封装 3
１，HTML HyperTextMarUP Language超文本标记语言，内部提供了一系列标签来描述网页
网页的组成部分 文字 图片 多媒体
HTML文件是纯文本文件 CSS文件也是纯文本； .java也是纯文本文件 纯文本文件可以使用文本编辑器（记事本）打开
２，基本骨架 骨架
＜html＞
<head></head>
<body></body>
＜/html＞
-->
<!--身体，浏览器中展示的内容都在body中-->
<body>
</body>
</html>
常用标签：
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
h1-h6 权重依次降低 字体依次减小
特点：标题标签独占一行，不允许其他标签和他同行
HTML 对尖括号是敏感的，HTML对换行 空格无感
换行标签
<br> 单标签
段落标签
<p>段落标签</p> 双标签 成对
段落标签也是独占一行,上下有间距
一个就是一个空格
语义化标签
<strong>加粗</strong>
<b>加粗</b>
<del>删除</del>
<s>删除</s>
<ins>下划线</ins>
<u>下划线</u>
<em>倾斜</em>
<i>倾斜</i>
图片标签
片标签是单标签
<img src="" alt="">
属性="属性值"
src: 表示的图片地址
本地图片
相对路径/绝对路径
在线图片
alt:表示图片展示异常的时候，显示的文字
title:当鼠标放到图片上时显示的文字
width:设置图片宽度
height：设置图片的高度，图片会失真 像素px
border: 给图片设置边框
列表标签
<!--unorder list 无序列表-->
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<!--order list 有序列表-->
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
注意：ul ol 里面只能写li（list） 每个li独占一行
表格标签
table表格标签
tr row 表示一行
td表示单元格 通过td来显示列的 效果
table标签的属性：
width：宽度
height:高度 基本单位都是像素 px
border:边框 基本单位都是像素 px
cellspacing:设置的是单元格和单元格之间的距离
cellpadding:单元格文字和四边的间距
align：table显示的位置,不是文字的位置
取值 center 中间
left 左边 默认
right 右边
caption：表示表格标题
thead:表示表头部分
th :表示的是表头，默认是加粗居中
tbody:表示表格的身体部分
<table border="1" cellspacing="0" width="400" height="200" cellpadding="30" align="center">
<caption>学生信息表</caption>
<thead>
<!--行 row-->
<tr>
<!--th 表示是表头-->
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>tom</td>
<td>男</td>
<td>59</td>
</tr>
<tr>
<td>jack</td>
<td>男</td>
<td>80</td>
</tr>
</tbody>
</table>
浏览器效果：
表格单元格的合并
合并：
行的合并 上下合并 rowspan加在上面的单元格属性位置 取值表示要合并的单元格数量
列的合并 左右合并 colspan加在左边的单元格属性位置 取值表示要合并的单元格数量
多余的单元格删除
<table border="1" cellspacing="0" width="500" height="300" align="center">
<caption>信息表</caption>
<tr>
<td rowspan="3">日期</td>
<td colspan="4">配送方式</td>
</tr>
<tr>
<td rowspan="2">姓名</td>
<td colspan="3">地址</td>
</tr>
<tr>
<td>省份</td>
<td>市区</td>
<td>地址</td>
</tr>
<tr>
<td>2020-11-03</td>
<td>鸣人</td>
<td>郑州</td>
<td>高新</td>
<td>莲花街</td>
</tr>
<tr>
<td>2020-11-03</td>
<td>二柱子</td>
<td>郑州</td>
<td>高新</td>
<td>莲花街</td>
</tr>
</table>
浏览器效果图：
链接标签
<a href=""></a>
a超链接标签
1，跳转到外网
2，跳转到本地项目其他页面
3，在当前页面内跳转，锚点跳转
4，跨页面锚点跳转
属性：
href：表示要跳转的路径
target的取值
_self：在当前选项卡中打开 默认取值
_blank:在新的选项卡中打开
button 按钮标签
<button>提交</button>
form表单元素
form表单收集用户信息
input标签
type的取值
text:普通的文本框
password：表示密码框，输入内容是隐藏的
radio;表示单选框，实现单选的功能需要指定相同的name属性值
checked属性是默认勾选的内容
checkbox：表示复选框，也需要一个相同的name属性值
checked属性是默认勾选的内容
button ：按钮，效果和<button>注册</button>一样，通过value设置按钮显示内容
reset：重置表单
file:文件上传时选择文件
select标签表示选择框
option表示每一项
textarea标签文本域，col控制列 宽度 rows行数控制高
<form action="">
用户名：<input type="text"> <br>
密 码：<input type="password"><br>
性 别：<input type="radio" name="gender" checked>男 <input type="radio" name="gender">女 <br>
擅 长：<input type="checkbox" name="hobby">Java
<input type="checkbox" name="hobby">HTML
<input type="checkbox" name="hobby">JS
<input type="checkbox" name="hobby">MySQL <br>
身份证照片：<input type="file"><br>
祖 籍：<select name="">
<option value="">--请选择--</option>
<option value="" selected>河南省</option>
<option value="">山东省</option>
<option value="">广东省</option>
</select> <br>
自我介绍：<textarea name="" cols="30" rows="10"></textarea> <br>
<button>注册</button>
<input type="button" value="提交">
<input type="reset" value="重置">
</form>
浏览器效果图：
input标签type取值
input标签
h5中type的取值
date:表示日期
color:颜色选择
number:只能写数字，
range:滑块，用于音频视频的进度条
类型为text的新属性
placeholder：时提示信息
<form action="">
<input type="date"> <br>
<input type="color"> <br>
<input type="number"> <br>
<input type="range"> <br>
手机号：<input type="text" placeholder="请输入手机号码">
</form>
浏览器效果图：
label标签
id表示标签元素的唯一性标识，不能重复
label 标签中嵌套表单元素，当点击label的任何一个地方，表单元素都会聚焦
for 属性值时表单元素的id值
<label for="username"> 用户名：<input type="text" id="username"> </label>
容器标签
放标签的容器
div 容器标签 里面可以放任何的标签，每个DIV独占一行
span 允许多个span占一行
<div></div>
<span></span>
新增的容器 效果和DIV一样
header：头部
aside ：侧边栏
footer：底部
nav:导航
article 文章
音视频标签
audio:播放音频 controls是控制条
video:播放视频
兼容问题
<audio src=""></audio>
<video src=""></video>
iframe标签
iframe，在网页内显示其他网页
<iframe src="" frameborder="0"></iframe>
作者：爱喝椰汁的木木
来源链接：https://blog.csdn.net/qq_45503643/article/details/112919038
