<!DOCTYPE html> ------- 声明一个html的文档
<html lang="en"> ------- 网页的开始
<head> -------- 网页的头部 的开始
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> ------ 网页的标题
</head> ------ 网页头部的结束
<body> ------ 网页内容的开始
</body> ------- 网页内容的结束
</html> ------ 网页的结束
1、UTF-8 ------- 通用字符集
2、GB2312 ------ 简体中文字符集
3、 BIG5 ------ 繁体中文字符集
4、 GBK ----- GB2312的补充,添加了更多的汉字和特殊符号
3.1 常用标签
3.1.1 strong和b等标签
<!------>------注释
strong------这个是粗体
b ------也是粗体
em--------这是斜体
i--------也是斜体
u------下划线
del-----删除线
3.1.2 br、hr标签
br标签 ------ 用来换行
hr标签 ------ 水平分割线,可以设置width和size
3.1.3 p标签
p标签是段落标签
两个相邻的p标签之间会空一行
align 属性 位置 left(默认值) right center
font标签 ------- 设置字体
color属性 ---- 设置颜色 颜色的表示法:第一种:英文单词 第二种:#rrggbb 三原色 red green
blue
3.1.4 sub、sup、pre、span标签
sub标签 ------ 下标标签
sup ------- 上标标签
pre ------ 用来原样输出内容
span ------ 修饰文本的标签 ---- 标准的行内标签
3.1.5 hn,div标签
hn ------- 标题标签 指的是h1,h2,h3,h4,h5,h6 ----------- n的取值只能是1-6 字体会越来越小 有加粗的
效果
div ------- 标准的块级标签------ 盒子布局
行内标签:不能自动换行,除非这一行内容铺满整个页面才会换行 span
块级标签:自动换行,独占一行 div hn p hr
3.1.6 特殊字符
3.2 表单标签
form标签 一般会和input标签连用
action属性 ------ 跳转的路径
路径:
绝对路径是从盘符开始的路径
相对路径是从当前路径开始的路径
绝对路径是真实的路径,是计算机中完整路径,必须准确,否则不能找到,起点是系统的根目录,也就是各个盘符。相对路径是一种简化版的路径,以当前文件,活动窗口目录为根目录,进行向上或者向下
method属性:用来明确表单提交的方式 get post ,默认值是get
name属性:表单的名称
get请求:不是特别安全,会把用户信息暴露在地址栏
post请求:相较于get会安全一点
3.2.1表单元素
表单元素----- 文本框、密码框、按钮、下拉列表框
一般是由input textarea select 标签构成,都需要使用在form标签里面
3.2.1.1input标签
type 的取值:
text ----- 文本框
password ---- 密码框
submit ----- 提交按钮
radio ------ 单选按钮
checkbox ----- 多选按钮
reset ----- 重置按钮
button ----- 普通按钮
image ----- 图像按钮
file ------ 文件
hidden ---- 隐藏域
email ---- 邮箱域
color ----- 颜色域
date ----- 日期
time ----- 时间
datetime-local ----- 日期+时间
range ------ 进度条
常见的属性:
readonly ------ 只读 字段只可以读不能修改
checked ---- 默认选择
disabled ----- 表示禁用 不可以点击
autofocus ----- 默认光标的位置
required ----- 不能空白提交
3.2.1.2 select标签
下拉列表框 ------ 一般和option标签连用
属性:selected ------ 默认被选中的选项
multiple------- 以列表的形式展示
3.2.1.3 textarea标签
用来显示文本域
cols --------- 多少列,用于表示文本域的宽度
rows -------- 多少行,用于表示文本域的高度
3.3 常见的属性
a标签 ----- 超链接
vlink ----- 访问过的超文本链接的颜色
alink ---- 激活超文本链接的颜色
link ------ 超文本链接的颜色
text ---- 文本的颜色
bgcolor ----- 背景颜色
background ----- 背景图片
颜色表示法:
1、英文单词
2、#rrggbb
3、rgba() ----- a指的是透明度
3.4 a标签
标签表示的超文本链接标签 ------ 用来进行页面的跳转
href 属性放的是要跳转的路径
target属性:
![d1c8f9a94271486785b8f580b7f6a81a.png](https://i-blog.csdnimg.cn/blog_migrate/f0cc911b6b0359327d5a3c11d2ba1c65.png)
锚点:使页面的展示到达某一个指定的地点
#+id名称进行链接
3.5 img标签
图片常见的格式:GIF JPG PNG BMP等
3.5.1 常见的属性
src ----- 图片的路径 (绝对路径和相对路径)
alt ----- 代替图片文本的内容(图片的路径错误或者因为浏览器的原因打不开这个图,用一个词或者
一段话代替描述这个图片)
width ----- 宽度
height ---- 高度 单位都是px %
border ------ 边框 默认值是0
align ---- 位置 (图片和文字的位置)
取值:top ----- 上对齐 middle ----- 居中对齐 bottom ------ 下对齐(默认对齐) right ----- 右对齐
left ------ 左对齐
title ----- 图片的标题 ------ 用来显示描述图片的文字
3.5.2 位图
usemap 属性
map标签 一般会和area标签进行连用
area标签 属性:
shape ------- 鼠标点击的形状
coords ----- 表述鼠标点击形状的大小
href ----- 表示要跳转的路径
3.6 多媒体标签
audio ------ 音频
video ---- -- 视频
controls属性 ----- 表示的是播放器的组件
autoplay属性 ---- 表示的自动播放
loop属性 ------ 表示的是循环播放
3.7 表格布局
table标签
包含了thead tbody tfoot tr td标签
3.7.1 表格的边框
border ----- 设置表格边框
3.7.2 表格的宽度和高度
width ----- 宽度
height ---- 高度
3.7.3 表格的背景
bgcolor ---- 背景颜色
background ---- 背景图片
2.7.4 表格的位置(对齐)
align ---- 表示表格的位置 left center right
2.7.5 表格的间距和边距
cellpadding ---- 表示的是表格边距(表示单元格内元素距离单元格边框的距离)
cellspacing------ 表示的是表格的间距(表示的是单元格和单元格之间的距离)
cellpadding 、cellspacing都有一个默认值 2px
2.7.6 表格的嵌套
表格里面可以嵌套另一个表格
2.7.7 表格的合并
单元格合并行
rowspan="n" ------ n是一个整数,表示在单元格垂直方向去跨行(合并行)
colspan = "n" ------- n是一个整数,表示在单元格水平方向去跨列(合并列)
3.8 列表标签
主要有三种——有序、无序、数据列表
3.8.1 有序列表 ---- ol
type 属性 ----- 表示设置序号的种类 ,默认值是数值1
start属性 ------ 序号开始的位置
reversed属性----- 反序(降序)
3.8.2 无序列表 ----- ul
type属性 ----- 无序列表的样式 disc(默认值 实心圆)circle(空心圆) square(实心方块)
3.8.3 数据列表 ----- dl
3.9 多窗口框架
一个页面可以显示多个窗口 -------- framset 标签 --------- 不能和body标签连用
HTML5之后不支持这个标签,使用的是iframe标签
cols ------- 定义页面列方向的尺寸或者数目
rows ----- 行