HTML5
2023-03-23 09:16:29 0 举报AI智能生成
学习笔记
作者其他创作
大纲/内容
注释
<!-- 注释内容 -->
常见字符集
ASCII // 美国，英国用的
ISO8859-1 // 欧洲用的
GB2312 // 中国用的
GBK // 中国用的（扩展）
UTF-8 // 万国码
ISO8859-1 // 欧洲用的
GB2312 // 中国用的
GBK // 中国用的（扩展）
UTF-8 // 万国码
HTML5基本结构
<!-- 文档声明，声明当前网页的版本 -->
<!DOCTYPE html>
<!-- html的根标签（元素），网页中的所有元素都要写在根元素里面 -->
<html lang="en">
<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>
<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
<title>Document</title>
</head>
<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
<body>
</body>
</html>
<!DOCTYPE html>
<!-- html的根标签（元素），网页中的所有元素都要写在根元素里面 -->
<html lang="en">
<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>
<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
<title>Document</title>
</head>
<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
<body>
</body>
</html>
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
实体符号
// 空格
> // 大于
< // 小于
© // 版权符号
> // 大于
< // 小于
© // 版权符号
常用标签
规则：使用合适的标签去描述合适的内容
meta（元数据标签）
<!-- meta主要用来设置网页中的一些元数据，元数据不是给用户看 -->
<meta charset="utf-8">
<meta name="keywords" content="网站关键字内容">
<meta name="description" content="网站描述内容">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<meta charset="utf-8">
<meta name="keywords" content="网站关键字内容">
<meta name="description" content="网站描述内容">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
h1~h6（标题标签）
p（段落标签）
br（换行标签）（单标签）
hr（水平线标签）（单标签）
img（图片标签）（单标签）
标签属性
src="图片地址"
alt="图片无法正常显示时显示的内容"
width="图片宽度"
height="图片高度"
title="鼠标在图片上悬停时显示的内容"
span（行内元素）
没有实际含义，主要用来选择一段文本中的部分文本信息
strong（文本加粗标签）（行内元素）
em（文本加粗标签）（行内元素）
a（超链接标签）（行内元素）
标签属性
href="超链接地址"
targer="目标页面打开的方式"
_blank 在新的窗口打开
_self 在本窗口打开（默认打开方式）
_parent 在当前窗口的父窗口打开，需要结合iframe标签使用
_self 在本窗口打开（默认打开方式）
_parent 在当前窗口的父窗口打开，需要结合iframe标签使用
iframe（内联框架标签）
table（表格标签）
标签属性
border="1" 设置表格的边框线（默认为0）
cellspacing="0" 设置单元格之间的间隙，默认是有值的，如果要取消间隙需要设置为0
内部标签
<tr> 表示一行
<th></th> 表示一列，主要是表头的一列
<td></td> 表示一列
<td></td>
</tr>
<th></th> 表示一列，主要是表头的一列
<td></td> 表示一列
<td></td>
</tr>
<thead></thead> 分组后的头部
<tbody></tbody> 分组后的主体
<tfoot></tfoot> 分组后的尾部
<tbody></tbody> 分组后的主体
<tfoot></tfoot> 分组后的尾部
单元格合并问题？
colspan="合并的单元格列数" 合并列
rowspan="合并的单元格行数" 合并行
子主题
form（表单标签）
标签属性
action="提交的地址"
method="提交方式"
get
post
post
内部标签
input（输入标签）（单标签）
标签属性
type="类型值"
text 文本
password 密码
radio 单选框
checkbox 多选框
submit 提交
reset 重置
image 图片提交
buttom 普通按钮
hidden 隐藏字段
file 文件
number 数字
date 日期
password 密码
radio 单选框
checkbox 多选框
submit 提交
reset 重置
image 图片提交
buttom 普通按钮
hidden 隐藏字段
file 文件
number 数字
date 日期
name="分组标志"
只要是提交的数据必须要写name属性，以供识别
id=""
配合label标签的for属性使用
value=""
提交的是value的值
checked
设置是否被选中
label
标签属性
for=""
select
标签属性
name=""
内部标签
option
标签属性
value=""
selected 设置开始选中的内容
textarea
标签属性
cols=""
rows=""
两个常用表单元素属性：
disabled
readonly
ul，ol（无序，有序列表标签）
子主题
0 条评论
下一页
为你推荐
查看更多
