文章声明：转载来源：https://blog.csdn.net/Lixuanyi6181/article/details/123942985
一、HTML简介
1.web标准
Web标准：网页主要由结构、表现和行为三部分组成
2.什么是HTML
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
3.HTML基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天是个好日子</title>
</head>
<body>
遇到困难睡大觉
</body>
</html><!DOCTYPE html> 文档类型声明标签 告诉这个页面采用html5版本来显示页面
<html lang="en"> 告诉浏览器或者搜索引擎这是一个英文网站，本页面采用英文来显示
<meta charset="UTF-8"> 采用UTF-8保存文字，如果不写就写乱码二、HTML常用标签
1.HTML标签参考手册
HTML 标签参考手册 (w3school.com.cn)
2.注释
<!-- HTML注释 -->注释：在开始标签中有一个惊叹号，但是结束标签中没有。
浏览器不会显示注释，但是能够帮助记录 HTML 文档。
CSS注释与HTML注释不同
/* CSS注释 */3.基础标签
段落标签和换行标签：
文本会根据浏览器大小自动换行
段落和段落之间有空隙
换行标签只是简单地开始新的一行，段落之间会插入一些垂直地距离
4.文本格式化标签
5.盒子标签
< div >与< span >标签没有语义，相当于一个装载内容的盒子
div单独占据一行，span在一行可以有多个
6.图像标签
<img src="URL" / >src：必填属性，用于指定图像文件的路径和文件名
alt：替换文本属性，当图片加载不出来的时候，就会出现替换文本文字
title：悬浮文字，鼠标放在图片上显示的文字
width：设置图像的宽度
height：设置图像的高度
border：设置图像的边框粗细
注：
图像的属性必须写在标签名之后
属性不分先后顺序，属性之间用空格隔开
采用键值对的形式，属性=属性值
1.相对路径：以引用文件所在位置为参考基础，而建立出的目录文件
简单来说，就是图片相当于HTML页面的位置
2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
如：D:\前端\图片.jpg
7.超链接标签
<a href="URL" target="_self">链接文字</a>href：必需属性，指定连接的URL地址
target：指定打开方式，默认当前页面打开，_blank表示从新的页面打开链接资源
name：规定锚的名称，当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，
这样使用者就无需不停地滚动页面来寻找他们需要的信息了
<body>
<a href="#我的命名">点击这里进行跳转</a>
<br>
<br>
<a name="我的命名">成功跳转到这里</a>
</body>链接分类：
外部链接：从一个网站跳转到另一个网站，以http://www开头
内部链接：网站内部页面之间相互链接，如index.html，路径为同一级
空链接：#，表示链接为空
下载链接：href里面是一个文件或者压缩包
网页元素链接：在网页中的各种网页元素，如文本、图像、白哦个、音频、视频等都可以添加超链接
锚点链接：点击链接，可以快速定位到页面的某个位置，需要使用name属性
8.表格标签
表格的基本语法
<table>
<tr>
<th>表头单元格内的文字</td>
</tr>
<tr>
<td>普通单元格内的文字</td>
<td>普通单元格内的文字</td>
</tr>
</table><table>是定义表格的标签
<tr>用于定义表格中的行
<td>用于定义表格中的单元格，有几个单元格该行就有几列
<th>用于定义表头单元格，常用于表格第一行，表头单元格里面的文字会加粗居中显示
合并单元格
跨行合并（竖向）：rowspan=‘合并单元格的个数’ 最上侧单元格为目标单元格，写合并代码
跨列合并（横向）：colspan=‘合并单元格的个数’ 最左侧单元格为目标单元格，写合并代码
9.表单标签
表单用于收集信息
在网页中，也需要跟用户进行交互，收集用户资料，这时候就需要表单
表单域
<form action="URL" method="提交方式" name="表单域名称">
密码：<input type="password">
</form>from：定义表单域，以实现用户信息的收集和传递
action：用于指定接受和处理数据的服务器URL地址
method：设置表单数据提交方式，其取值为get或post（get效率高但不安全、请求大小有限，post安全、请求大小无限但效率低）
name：指定表单名称，以区分同一个页面中的多个表单域
表单控件
1.input输入表单元素
<input type="" />< input / >标签为单标签
type属性指定不同的控件类型
input其它属性
name：由用户自定义，定义Input属性的名称
value:规定input元素的值，传递给服务器
checked：规定input元素首次加载时被选中，使用语法为checked="checked"
maxlength：规定输入字段中的字符的最大长度
注：
name和value是每个表单元素的属性值，主要给后台人员使用
name表单元素的名字，要求单选框和复选框要有相同的name值，表示同一组
checked属性主要针对于单选按钮和复选框 一打开页面 就可以默认选中某个表单元素
label标签
使用场景：label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">核心：label标签的for属性应该与相关元素的id属性相同
2.select下拉表单元素
<select>
<option>北京</option>
<option>浙江</option>
</select>select：定义下拉列表
option：定义下拉列表项
在option中定义 selected="selected" 当前选项即为默认选项
3.textarea文本域元素
使用场景：当用户输入内容较多的情况下，就不能使用文本框text标签了，常见于留言板、评论
<textarea cols="50" rows="10"></textarea>注：
(1)通过textarea标签可以创建多行文本输入框
(2)cols=“每行中的字符数” rows=“显示的行数” 但我们实际开发中都是用CSS来改变大小
10.列表标签
<ul>
<li>niko</li>
<li>hunter</li>
<li>monesy</li>
</ul>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
同样，有序列表也是一列项目，列表项目使用数字进行标记。
帖子还没人回复快来抢沙发