H5全栈开发-web前端-HTML标签
2021-11-23 11:02:44 0 举报AI智能生成
登录查看完整内容
为你推荐
查看更多
H5全栈开发，前端标签基础，持续更新...
作者其他创作
大纲/内容
不同的标签表示不同的语义
段落
图片
视频
音频
...
标签作用
<标签名称 属性名1="值1" 属性名2="值2">
img
br
hr
中间不会包裹其他内容
单标签
<开始标签 属性名1="值1" 属性名2="值2"> 内容 </结束标签>
中间会包裹其他内容
双标签
标签的格式
http://www.w3school.com.cn/
学习地址
标签有很多很多
注意
标签概念回顾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
结构标签回顾
<html>
<meta charset="UTF-8">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
<meta>
<title>
<head>
<body>
意义
01-回顾
<style type="text/css">
css代码
</style>
css标签
<script type="text/javascript">
js代码
</script>
js标签
02-css和js标签
后面详细学习
用于辅助标记某一段代码的注解
不会被浏览器渲染
概念
用于程序员之间沟通
自己理清代码思路
参考网易首页
案例
作用
<!-- 注释内容 -->
例如
html注释
//
/* 注释内容 */
js注释
css注释
注释一行或者多行
Ctrl + /
注释选中部分
Ctrl+Shift+/
快捷键
格式
佛祖
羊驼
皮卡丘
赛亚人
胜利
逗比注释
去除注释
代码精简
代码混淆
代码压缩
方案
真正发布项目时
03-注释
全部都是放在body标签内部
含义
h1-h6系列
p
a
detail + summary
marquee
ul + li
ol + li
dl + dt +dd
table + tr + td 表格系列
form + input 表单系列
HTML5新增
HTML5废弃
标签目录
基础
稍复杂
HTML5新特性
补充
标签语义
标签效果
标签应用场景
标签书写格式
很多属性已经不建议使用或者弃用
颜色
尺寸
粗细
外观
对齐
布局
位置
凡是控制标签
一律被弃用
规律
标签常用属性
标签注意事项
标签掌握
04-常用内容标签目录
1级标题
2级标题
6级标题
描述文本的重要程度
表示该文本比较重要
重要性从1到6递减
语义
分支主题
效果
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h6> 一级标题 </h6>
语法格式
搜索引擎可以通过它快速识别网页主题
此标签最重要
logo
https://news.163.com/19/0721/19/EKKQ0HKK000189FH.html
文章主题
h1
用于突出栏目分类
仅次于h1
不要超过10个
h2
文章分类或者产品分类
h3
h4
参考京东
参考腾讯
参考淘宝
参考网易
应用场景
对齐方式
left
center
right
justify
取值
align
全部都是CSS干的事
千万别通过HTML搞
不建议使用
常用属性
后期可以通过css修改
1. 标签默认独占一行
h系列代表语义
字体效果属于附加
注意事项
表示描述的内容是一个段落
各个段落会新开一行
<p> 段落内容 </p>
书写格式
描述一小段文本
商品简介
人物简介
1. 独占一行
（省略了多余的空格和换行）
2. 浏览器忽略了源代码中的排版
<sup>上标</sup>
<sub>下标</sub>
标签在 HTML 页面中创建一条水平线
水平分隔线（horizontal rule）可以在视觉上将文档分隔
<hr>
<hr/>
也有直接设置上下边框来实现
一般分离文章的标题和内容
用处较少
规定 hr 元素的对齐方式
align\t
规定 hr 元素的高度（厚度）
pixels
size\t
规定 hr 元素的宽度
%
width\t
HTML中不需要加
XHTML中需要加
按IDE的提示来
经验
2. / 是否需要添加
可插入一个简单的换行符
和段落p的效果区别
多在长篇内容介绍中出现
文章详情
商品详情
<br>
<br/>
无
2. 注意和段落效果的区别
向网页中嵌入一幅图像
静态图片
gif动图
本地图片
远程图片
从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像
<img src="images/header.jpg" alt="路径不存在提示">
<img src="images/header.jpg" alt="路径不存在提示" />
所有需要展示图片的地方
商品图片
人物图片
各种介绍图片
文件的路径
src
当图片加载不出来时的替代文本
SEO会收录图片信息
alt
鼠标悬停时显示的内容
title
常用
定义图像的高度。
单位为Pixels
height
定义图像的宽度度。
单位为Pixels或%
width
规定如何根据周围的文本来排列图像。
top
bottom
middle
效果图
定义图像周围的边框
border
定义图像左侧和右侧的空白。
hspace
定义图像顶部和底部的空白。
vspace
必填
默认展示完全图片
不写
可能会导致变形
全写
按照比例缩放
写一部分
1. 不独占一行
image/itlike.png
相对路径
d:/HtmlProject/image/itlike.png
不利于移植
绝对路径
表示当前路径
./
表示上一级
../
2. 路径
定义超链接，点击后跳转到另一个链接
<a href="http://www.itlike.com">撩课学院</a>
图示
文本
<a href="超链接URL">超链接内容</a>
没有超链接的网页是没有灵魂的
站内链接
外链
站外链接
原窗口
_self
新窗口
_blank
单独通过target属性设置
可以设置全局的打开方式base标签进行设置
target
规定链接指向的页面的 URL。
无动画效果
会回到界面顶部
jd
淘宝
返回顶部一般都是这么做
#
没有反应
javascript:
替代
假链接
href
规定被下载的超链接目标。
默认是打开
例如一个图片文件
<a href="../../素材/img_test.jpg" download="xiaoliao.jpg"> <img src="../../素材/img_test.jpg" alt=""></a>
chrome
Firefox
兼容
download
1. 不会独占一行
不会重新发送请求获取数据
跳转到同一个界面内的不同位置
<a href="#id标记名称">跳转锚点</a>
<p id="标记"></p>
2. 锚点跳转
05-基础标签
摘要和详情
比较少
<details>
<summary>撩课教育</summary>
</details>
details-summary
跑马灯效果
内容循环滚动
广告
<marquee> 内容 </marquee>
alternate： 表示在两端之间来回滚动。
scroll： 表示由一端滚动到另一端，会重复。
slide： 表示由一端滚动到另一端，不会重复。
behavior
活动字幕的背景颜色
bgcolor
活动字幕的滚动方向
up
down
direction
高度
宽度
循环次数
loop=-1表示一直滚动下去
loop
活动字幕的滚动速度，单位pixels
scrollamount
活动字幕滚动两次之间的延迟时间，单位 毫秒
scrolldelay
空格
<
>
@copy
版权符号
字符实体
06-基础补充
让一堆相关数据整齐的排列
原始效果
结合CSS
导航
菜单
轮播
没有先后之分
中国所有城市
店铺所有商品
<ul>\t定义无序列表。<li>\t定义列表的项目。
无序列表
有先后之分
排行榜
<ol>\t定义有序列表。<li>\t定义列表的项目。
有序列表
其次
<dl>\t定义定义列表。<dt>\t定义定义列表中的项目。<dd>\t定义定义列表中项目的描述。
网站尾部
京东尾部
应用
定义列表
分类
规定列表的项目符号的类型
disc
square
circle
type
ul
规定在列表中使用的标记类型
1
A
I
i
规定有序列表的起始值
start
H5新增
规定列表顺序为降序
reversed
ol
2. ul 和 li 成对出现
3. 多级列表可以嵌套
4. li 里面可以包括其他元素!
css
html
小案例展示
列表标签
定义一个类似于excel的表格
表头
行
列
一个表格
2004.sina.com.cn
曾经的表格布局
http://www.w3school.com.cn/html/html_tables.asp
展示关系型数据
<table border="1">
<tr>
<th>周一</th>
<th>周二</th>
</tr>
<td>Python</td>
<td>H5</td>
</table>
简单版
<table border="1px">
<caption>表格标题</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tfoot>
<td>表尾1</td>
<td>表尾2</td>
</tfoot>
<tbody>
<td>值1</td>
<td>值2</td>
</tbody>
完整复杂版
显示在表格的正上方
居中
表格标题
thead 元素应该与 tbody 和 tfoot 元素结合起来使用
用于对 HTML 表格中的主体内容进行分组
表格的表头
表格的页脚
存放真正的数据
表格的内容主体
边框宽度
单元边沿与其内容之间的空白
cellpadding
单元格之间的空白
cellspacing
表格的宽度
表格的对齐方式
背景色
bgColor
背景图片
background
table
表格行的内容对齐方式
char
表格行中内容的垂直对齐方式
baseline
valign
tr
单元格的高度
单元格内容水平对齐方式
单元格内容的垂直对齐方式
单元格可横跨的列数
colspan
单元格可横跨的行数
rowspan
td
1. 表格整体独占一行
制作课程表
参考代码
tr>td{$@8}*8
emmet快捷
border-collapse:collapse
css补充
表格标签
定义供用户输入的 HTML 表单
给定字段
用户按字段填写信息
如同生活中的快递单
用于收集用户信息
百度搜: "注册账号"
用户注册
用户登录
地址填写
提示标签
表单控件
表单域
组成
采集用户信息的控件
文本框
密码框
单选框
复选框
类型
区分多个表单
限定表单控件的从属关系
概念解释
模拟百度搜索
一个完整表单的结构
普通文本框
text
password
单选按钮
radio
checkbox
隐藏域
hidden
文件
file
输入字段
name名就是参数名
name
等着被label标签绑定
id
input控件中默认的文本值
value
控件允许输入的最多字符数
maxlength
定义选择控件默认被选中的项
checked
accept
当 input 元素加载时禁用此元素
disabled
规定输入字段为只读
readonly
可选
autofocus
当页面加载时 <input> 元素应该自动获得焦点
可描述输入字段预期值的简短的提示信息
该提示会在用户输入值之前显示在输入字段中
placeholder
必需在提交表单之前填写输入字段
required
h5新增
属性
重置
reset
提交
普通样式
submit
图片样式
image
按钮
自定义行为
关联js代码
button
tab
input:type值
快捷输入
通过type属性来指明不同类型
<input /> 系列
多行文本输入框
<textarea>
</textarea>
cols
rows
none
resize
是否可以修改大小
textarea
下拉框选项
<select>
<optgroup label="阶段">
<option>111</option>
</optgroup>
是否允许多选
multiple
下拉列表可见的条目
size
select
selected
option
select + option
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" >
体重：<input type="text" >
</fieldset>
</form>
外边框
表单标签
07-高级标签
结合input使用
<input type="url" list="url_list" name="link" >
<datalist id="url_list">
<option label="百度" value="https://www.baidu.com" >
<option label="撩课" value="http://www.itlike.com" >
</datalist>
例
datalist
email
url
max\tnumber\t规定允许的最大值
min\tnumber\t规定允许的最小值
step\tnumber\t规定合法的数字间隔
value\tnumber\t规定默认值
number
range
color
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
input
表单
展示视频
url\t要播放的视频的 URL。
如果出现该属性，则视频在就绪后马上播放。
autoplay
autoplay\t
如果出现该属性，则向用户显示控件，比如播放按钮。
controls\t
controls
如果出现该属性，则当媒介文件完成播放后再次开始播放。
loop\t
规定视频的音频输出应该被静音。
muted\t
muted
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
preload\t
如果使用 "autoplay"，则忽略该属性。
pixels\t设置视频播放器的宽度。
设置视频播放器的高度。
URL\t规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
poster
http://www.w3school.com.cn/html5/html_5_video.asp
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
你的浏览器不支持video标签
</video>
解决视频格式适配问题
引入外部插件
优酷视频
embed
video
展示音频
audio
font
倾斜
italic
一般用于css 钩子来用
小图标
场景
语义: 强调
em
加粗
bold
语义: 更强调
strong
b
删除线
strikethrough
语义: 删除
del
s
下划线
underline
语义: 插入
ins
u
HTML废弃
08-HTML5新增和废弃
独占一行
可改变宽高尺寸
自带效果
div
没有独占一行
不能改变宽高尺寸
span
09-布局常用标签
HTML-标签
0 条评论
回复 删除
下一页
