2023年12月13日发(作者：)
html包裹文本的标签,HTML标签
1.标签分类
单标签：只有开始，没有结束
双标签：有开始有结束
2.标签关系分类
嵌套关系
并列关系
3. Sublime快捷键
Ctrl+Shift+D 快速复制一行
Ctrl+F 查找
Ctrl+H 查找并替换
4.标签
注释标签
选中内容 Ctrl+/ 快速注释
换行
画横线
标题标签
段落标签
强调标签文本标签，包裹字体
加粗标签，对文字加粗
或
文字斜体
或
下划线
或
删除线
或
没有语义的标签，以下两个标签实现网页布局
可以跟其它内容在一行
图片标签
img的属性：
src 设置图片路径title 设置鼠标悬停到图片上的提示
alt 对图片的描述信息，不是给用户看的，是给搜索引擎看的
width 宽
height 高
5.路径
相对路径:相对于当前的根文件夹
如果当前文件和资源文件img在同一个文件夹中
src=""
如果当前文件和资源文件img不在同一个文件夹中，页面在图片的上一级中，图片放在images中，则src="images/"访问到
如果当前文件和资源文件img不在同一个文件夹中，页面在图片的下一级中，则src="../"才能访问到， ../是向上返回一级。
如果返回两步则../../
6.超链接
//跳转到某个页面，在同一个文件夹下时
href="#" 不跳转到任何页面
title 设置鼠标悬停到上面的提示
target 默认值为_self，表示在当前页面中打开新页面
target 设置为_blank ，表示在新的浏览器窗口中打开新页面
超链接页面的其它写法
在
标签中添加
7.锚链接
属于超链接的另外一种用法，实现的是本页面内部的跳转
在页面的任何标签中定义id
在超链接中设置 # + id的值，则点击超链接会跳转到本页面的id所在标签的位置
8.特殊字符
< 小于号
> 大于号
空格
9.H5中的新标签
导航标签
区域标签
底部
侧边栏
文章controls 出现控制按钮
autoplay 自动播放
loop 循环播放
如果有多种视频格式可以采用以下写法
标签
用法1
防止页面乱码
用法2
设置网页关键字，给搜索引擎的
用法3
不是给用户看的，给搜索引擎的
用法4
网页重定向
打开网页3秒后，跳转到百度
标签
用法1
//设置标签项上面的图标
href 设置图片的路径，最好将图标放到根目录下
用法2
引用外部样式表
12.列表
无序列表
语文
数学
//
标签可以包裹任何标签
//在网页中展示信息
有序列表
1. 英语
2. 化学
自定义列表
自定义列表的标题
生物
物理
计算机
dt 设置自定义列表的标题
dt 只能包含行内元素
dd 标签中可以包含所有的元素
一般网页结尾处使用自定义列表
13.表格
人员信息表
姓名
张三
李四
年龄
10
12
身高
150cm
153cm
体重
48KG
49KG
border //设置边框
width //设置宽度
height //设置高度
cellspacing //设置td 与 td之间的距离，默认值为2
cellpadding //设置td内容与td左侧的间距
align //设置表格对齐方式，默认在网页左侧
left right center
设置tr 或td设置align则可以使内容居中，居左，居右
bgcolor //设置表格的背景颜色
th //设置表头
人员信息表 设置表格的标题
14.合并单元格
人员信息表
姓名
张三 10
年龄身高 体重
150cm48KG
李四12153cm49KG
// colspan="2" 表示合并两列，占两列的位置
人员信息
姓名
张三
李四
年龄
10
150cm
1249KG
身高体重
48KG
//
150cm //跨行合并两列
15.表单
表单域
用户名：密码：
action: 处理表单的后台程序
method: 提交数据给后台程序的方式
get方法:会将数据显示在地址栏中，数据大小有限制
post方法：会通过后台程序提交数据，安全性高一些
type 为输入类型
maxlength 最大输入长度，超过长度后不能再输入
name 设置控件名称
id 控件的ID
readonly 设置控件为只读，不能输入和编辑
disabled 禁止用户输入，使控件不可用
value 输入默认值
password : 输入时内容不可见
男
radio 单选控件
男
女
如何实现单选？
name属性设置为一致则可以实现单选
checked 默认选中项
16.下拉列表
安徽
河南
河北
山东
multiple 表示列表可以多选，一般不用
selected 表示默认的选中项
在选择城市时，提供描述信息，告知用户当前选择的城市属于哪个省的实现
滨州
烟台
菏泽
济南
17.多选框
看书旅游
编程
音乐
游戏
checked 表示默认选中
18.上传控件
19.文本域
20.隐藏控件
//设置用户不需要看到数据，但对开发者是重要的
//ID或主键等
21.按钮控件
//提交控件，提交表单数据
//普通按钮
//重置按钮，将数据恢复到默认值
//图片按钮，点击也可以提交表单数据
22.分组控件和标题
人员注册
用户名：
密码：
男
女
安徽
河南
河北
山东
滨州
烟台
菏泽
济南
看书
旅游
编程
音乐
游戏// fieldset 给表单添加边框
// legend 在边框上添加标题
23.H5中的表单控件
//邮箱，自带合法检测
//只能输入数字,step表示点击增加或减小的幅度
//输入网址
//输入时间
//输入日期
//输入时间和日期
//选择周
//取色器
//滑块 value设置默认滑块滑动到的位置
//搜索
//手机号
//datalist 一般配合输入框一块使用，点击输入框出现数据列表
bj
sh
hz
nj
24.H5的标签属性
//placeholder属于占位符
//自动获取焦点
//默认autocomplete是on，提交表单，再点击输入框，会出现历史输入数据
//autocomplete="off" 关闭历史数据显示
// 添加required没有输入数据时不能提交
25.标签按显示方式分类有三种
块级元素
行内元素
行内块元素
块级元素
div p ul ol dl li dd dt h1-h6等
特点有
-元素独自占一行显示，与宽度无关
-块级元素的默认宽度与父级的宽度一致-块级元素可以设置宽度和高度
行内元素
span a font strong 等
-行内元素在一行上显示
-行内元素默认没有宽度和高度,不能设置宽度和高度
行内块元素
img input等
-元素可以在一行上显示
-元素可以设置宽度和高度
26.元素模式转换
-转换为块级元素，例子如下
a{
width: 300px;
height:200px;
background: red;
/*直接设置width和height不起作用，需要将a转换为块级元素，使用display*/
display: block;
}
-转换为行内块元素
a{
width: 300px;
height:200px;
background: red;
/*直接设置width和height不起作用，需要将a转换为块级元素，使用display*/
/*display: block;*/
/*转换为行内块元素*/
display: inline-block;
}
-转换为行内元素
div{
background: red;
display: inline-block;
}
测试文字测试文字
注意：
可以将行内元素，块级元素转换为另一种元素
行内块元素，转换为行内元素没有效果
一般情况下将行内元素转换
27.行高
文字的行高属性
行高属于文字的属性，行高=文字大小+上间距+下间距，默认18px，文字16px
作用：
设置文字行之间有距离
文字垂直居中(要让文字居中，可以设置行高=容器的高度)
影响行高的因素
1.文字大小
2.字体
行高单位
px em 百分比 不带单位
如果给一个单独的标签设置行高，单位是px
px 行高值就是设置的行高，与文字大小无关
em 行高=行高值 * 文字大小
百分比 行高=行高值 * 文字大小
不带单位 行高=行高值 * 文字大小
如果给父元素设置行高，子元素特点
父px 父元素设置行高时，子元素的行高与父元素的行高一样
父em 子元素行高=父元素行高值 * 父元素文字大小(先计算后继承)
父百分比 子元素行高=父元素行高值 * 父元素文字大小(先计算后继承)
父不带单位 子元素行高=父元素行高值 * 子元素文字大小(先继承后计算)
发布评论