3.2 HTML中级 - 常用标签（上） | html5教程，html高频常用标签，html教程，html css，html5，html模板
3.2 HTML中级 - 常用标签（上）
目录
头部标签补充
转义字符 ( 字符实体 )
修饰标签 h b i em sub sup del br
a 链接
img 图片
Table 标签
三种列表 ul ol dl
video 视频
audio 音频
iframe 框架
头部标签补充
单词表
|
计算机单词 |
全称 |
翻译 |
|
rel |
relationship |
关系 |
|
href |
hypertext reference |
超文本 参考 |
|
script |
脚本 |
|
|
src |
source |
资源 |
|
直译的单词 |
name名称 keywords 关键词 content 内容 description 详细描述 stylesheet 样式表 |
|
<head><meta charset="UTF-8"> <meta name="keywords" content="关键词，逗号隔开"> 建议100个字节内，即30个汉字内。<meta name="description" content="详细描述，逗号隔开"> 200个字节内，即60个汉字内。<title>标题，逗号隔开</title> 60个字节内，即20个汉字内，一个最佳，最多不要超过3个。<link rel="stylesheet" href="css文档地址"> rel 定义文档关系，这表示引用的文件是样式表。<script src="js地址"></script><script>此处直接添加js代码，建议放尾部</body>前，因为有些js要等html元素加载完执行</script><style> 此处直接添加css代码，如 p {color: red;} </style>
</head>
知识点：
1、1个字节=一个英文字母、空格或符号，UTF-8编码中，1个汉字或标点符号占3-4个字节，所以计算长度是1个汉字≈3.5个字节。
2、seo权重：title最高，其次是h1，keywords，description等
转义字符 ( 字符实体 )
空格( ): 小于(<) < 小于等于(≤) ≤ 大于(>) > 大于等于(≥) ≥
和号(&) & 双引号(") " 元(¥) ¥ 版权(©) © 注册商标(®) ®
乘号(×) × 除号(÷)÷
修饰标签 h b i em sub sup del br
|
计算机单词 |
全称 |
翻译 |
|
h1~h6 |
heading |
标题 标题 标题 标题 标题 标题 |
|
b |
bold |
粗体 |
|
i |
italic |
斜体 |
|
em |
emphasize |
强调并斜体 |
|
sub |
subscript |
下标 |
|
sup |
superscript |
上标 |
|
del |
delete |
删除线 |
|
br |
break |
打断 换行 |
|
直译的单词 |
strong 强调并加粗 small 小号 |
|
HTML 修饰标签 示例
<body><h1>h1 标题 一个页面只能有一个h1。</h1><h2>h2 标题</h2><h3>h3 标题</h3><h4>h4标题</h4><h5>h5标题</h5><h6>h6标题</h6> <p> p常规字样<b> b 加粗 </b><br /><strong> strong 强调加粗 </strong><br /><i> i HTML变斜 </i><br /><em> em 强调加粗变斜 </em ><br /><small> small 变小 </small><br /><sub> sub 下标 </sub><br /><sup> sup 上标 </sup><br /><del> del 删除线 </del><br /></p>
</body>小知识：
1、html中多个空格呈现在网页上的效果是一个空格，如果需要多个空格，请输入
2、<br />是换行标签
a 链接
|
计算机单词 |
全称 |
翻译 |
|
a |
anchor |
锚 |
|
直译的单词 |
target 目标 |
|
<a href="url" target="打开方式">链接文本</a>
(1) href="url" ： url：译为地址，填链接；
(2) href="#某个name"， 锚链接。 href #号后面的值=锚点元素的name值，注意不是id值。还可以在#前面加网址，效果是变成跳转到某个页面后直接到指定的name相同的位置。
(3) target的值，即打开方式主要有两种： _self或不写，会覆盖当前页面； _blank，会打开新页面。
小知识：
1、做QQ聊天链接功能：百度搜“QQ推广”-登录自己的账号-推广工具-写上提示语，复制链接即可。当然你的img 的src可以随便换。
2、利用锚链接可以快速实现置顶、置底功能。
img 图片
|
缩写 |
全称 |
翻译 |
|
img |
image |
图片 |
|
alt |
alter |
改变 |
|
直译 |
loading 下载 |
|
<img src="url" alt="Good luck!" title="悬停自定义文字" loading="lazy" width="100px" height="100px">
url: 资源地址
alt: 图像显示不出来时的替代文本。
loading： lazy（懒的），图像延迟加载，鼠标滚动到该图片所在位置显示。实测无效！
eager ( 迫不及待的），默认，图像立即加载。 width和height：规定图片宽高
路径url在springboot中怎么写？
springboot默认从resouces目录下找：
有个简单的记忆方法是把resources看成 ../
比如右图的keep.html，路径是 ../templates/keep.html
Table 标签
|
缩写 |
全称 |
翻译 |
|
thead |
table head |
表格 头部 |
|
tr |
table row |
表格 行 |
|
th |
table header |
表格 标题 |
|
td |
table data |
表格 数据 |
|
rowspan |
row span |
行 跨度，跨行 |
|
colspan |
column span |
列 跨度，跨列 |
|
直译 |
caption 说明文字 |
|
<table><caption>表格说明</caption><thead><tr><th colspan="3">姓名表 表格标题colspan="3"</th></tr></thead><tbody><tr><td rowspan="">男生 rowspan="2"</td> <td>小明</td> <td>小天</td></tr><tr><td rowspan="">女生 rowspan="2"</td> <td>妮妮</td> <td>好好</td></tr></tbody><tfoot><tr><td colspan="3">明天你好</td></tr></tfoot>
</table>
三种列表 ul ol dl
|
缩写 |
全称 |
翻译 |
|
ul |
unordered list |
无序的 列表 |
|
li |
list item |
列表的 项目 |
|
ol |
ordered list |
有序的 列表 |
|
dl |
definition list |
自定义 列表 |
|
dt |
definition term |
自定义 项 |
|
dd |
definition description |
自定义 描述 |
|
直译 |
caption 说明文字 |
|
<ul><li>无序列表 鸡蛋</li><li>无序列表 牛奶</li>
</ul><ol type=”有四种值可选”><li>有序列表 鸡蛋</li><li>有序列表 牛奶</li>
</ol><dl><dt>自定义列表 标题 水果</dt><dd>会缩进 自定义列表 鸡蛋</dd><dd>会缩进 自定义列表 牛奶</dd>
</dl>
video 视频
|
直译的单词 |
video 视频 controls 控制 muted 静音 auto play 自动播放 loop 循环播放 preload 预加载 poster 海报 width 宽度 height 高度 |
<video src="movie.mp4" controls muted autoplay loop preload="auto" poster="图片地址" height="600"><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"><track default kind="subtitles" srclang="zh" label="中文字幕" src="后缀为.vtt的字幕文件" /><track kind="subtitles" srclang="en" label="英文字幕" src="后缀为.vtt的字幕文件" />
</video>
- src尾部加#t=2，可以定位视频到第2秒。例如 src="movie.mp4#t=2"。
- video支持MP4, WebM, 和 Ogg格式，其中mp4格式对各浏览器更兼容。
- 写两个source的原因是：如果第一个视频播放不了，那就采用第二个，以此类推。
- 如果设置了 autoplay 属性，preload属性失效，因为没必要，注意：只有设置了muted，autoplay才会生效，这是为了防止用户打开多个视频，声音混乱播放。
- preload的值可以是auto、none、metadata。一般使用metadata，只加载视频的基本信息和第一帧影像。
- width和height的默认单位为像素，一般情况设置宽或者高，取其一，同时设置会导致有空白无画面区域。如果一定要占满屏幕，可以css设置object-fit: cover，但是如果是竖屏的视频，那就不太友好，大部分会遮住看不见。可参见css教程。
- track：译为轨道。字幕必须为.vtt格式。
|
属性值 |
类型 |
|
subtitles |
字幕，最常用 |
|
captions |
说明文字，视频对话的翻译（ 适合听障人士 ） |
|
chapters |
章节（ 适用于导航媒体资源 ） |
|
descriptions |
视频的描述（ 适合视障人士 ） |
|
metadata |
脚本使用的内容。 对用户不可见 |
default：设置默认轨道，若多个track，加了优先展示。
srclang：资源 语言。它的值参考国际语言代码表。 如果 kind 属性值是 "subtitles"，则该属性是必需的。 国际语言代码 Language Code网站 : http://www.lingoes.cn/zh/translator/langcode.htm
label：标签。规定文本轨道的显示代称
src： 资源地址
kind: 轨道的类型，属性值如右图：
案例 (放在video标签内)：
<track src="wordsCN.vtt" kind="subtitles" srclang="en" label="English" default >
audio 音频
<audio controls autoplay><source src="music.mp3" type="audio/mpeg"> <source src="music.wav" type="audio/wav"><source src="music.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。
</audio>
支持三种音频格式文件: MP3, Wav, 和 Ogg，mp3为佳。
iframe 框架
<iframe src="http://www.sdaclass.com" width="100%" height="500" frameborder="0" name="myname"></iframe>
iframe =inner Frame(内部 框架)。简而言之，就是一个页面嵌套另一个页面或元素。 src填html网页地址或视频链接地址，width和height设定宽高，单位为像素。frameborder为0可以去掉边框，默认值是1表示有边框。
配合
<a href="http://www.sdaclass.com" target="myname">社大学堂</a>
<a href="http://www.taobao.com" target="myname">淘宝</a>
把a的target写为iframe的name，就可以实现同一个页面访问多个页面的效果，即类似于Ajax的效果。
案例：iframe引用外链，比如高德地图和百度地图 https://developer.amap.com/tools/creater https://lbsyun.baidu.com/index.php?title=jspopularGL
sandbox 安全限制
sandbox是html5的新属性，主要是提高iframe安全系数。iFrames外链是存在安全问题的，这主要是因为iFrames常常被用于嵌入第三方内容，而执行某些恶意操作。sandbox可以有效防止iframe对父页面进行攻击（ 禁用插件，禁止其他浏览上下文的导航，禁止弹出窗口和模式对话框）。sandbox通过限制被嵌入内容所允许的操作而提升iFrames的安全性。
allow-same-orign 允许将内容作为普通来源对待，否则会被设为来自一个独立的源
allow-top-navigation 允许包含文档导航内容
allow-forms 允许表单提交
allow-scripts 允许脚本执行
allow-modals 允许模态窗口
allow-orientation-lock 允许锁定父窗口屏幕方向
allow-pointer-lock 允许使用指针锁API
allow-popups 允许弹出窗口
allow-popups-to-escape-sandbox 允许弹出沙箱窗口
allow-presentation 允许控制session
"" 即为空，允许上述所有规则，默认 写多个空格即可，
例如把 sandbox="allow-scripts allow-same-orign allow-top-navigation" 放入<iframe>标签内部
3.2 HTML中级 - 常用标签（上） | html5教程，html高频常用标签，html教程，html css，html5，html模板相关推荐
- java字符串标胶大小_Java 标签上显示string长度如果超出标签大小
展开全部 字符串String长度超出,会自动截取字符串,后面的以"..."三个小点代替. 保证真个字符串显示的长e68a843231313335323631343130323136 ...
- xpath 取标签下所有文字内容_如何理解葡萄酒标签上的所有内容(下)
上期我们提到了旧世界葡萄酒酒标,这一期主要给大家介绍德国酒标以及新世界酒标. 德国酒标识别技巧 Prädikatswein(代表优质葡萄酒),其含量范围从最不成熟的(kabinett)到最成熟的(Tr ...
- vue 在 html标签上 做三元运算
众所周知,在js 中 a<b?'方法一':'方法二' 这种 三元运算 是比较方便快捷,那么如何在html标签上直接使用呢? 在 标签包裹中,一半为内容,可以直接使用 例如: <p clas ...
- Html5和Css3的基础标签及常用属性
H5 H5的常用标签及属性: 新增和废弃 新增的结构(布局) 标签:section.artcle.nav.footer.header.hgroup.Aside.figure 新增的其他标签: Vide ...
- HTML5标签(上)
1.1 废弃的标签 acronym applet basefont big center dir font frame frameset noframes strike 1.2 新增标签 1.2.1 ...
- 02HTML标签(上)
1.HTML的语法规范 HTML标签是由尖括号包围的关键词,例如. HTML标签通常是成对出现的,例如<html>和</html>,我们称为双标签.标签对中的第一个标签是开始标 ...
- HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- html5基础（网页基本标签、图像标签、超链接、列表、表格、媒体元素、iframe框架、表单）
网页的基本信息 1.DOCTYPE声明 文档类型的声明,约束HTML文档结构,检验是否符合相关Web标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码.DOCTYPE声明必须位于HTML文档第一 ...
- 视频教程-线上培训上课实录整站设计制作开发全能培训-HTML5/CSS
线上培训上课实录整站设计制作开发全能培训 粉丝已经近2万人.传课网业余讲师. 彭亮 ¥39.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠,最 ...
- HTML5+CSS3 02（表格、表单标签、语义化，字符实体标签）
一 表格的基本使用 1.1 表格的基本标签 场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表 基本标签: 标签名 说明 table 表格整体,可用于包裹多个tr tr 表格每行,可用 ...
最新文章
- 搜索引擎是如何判断网站质量的？
- Oracle实例和服务知识点
- RabbitMQ之监控(3)
- 在本地生成ssh-key 免密码远程clone GitLab中的项目到本地
- c++并发编程基础（一）：并发、并行域多线程
- 用Python处理Excel文件
- 这简直比高考容易多了...3个月自学转行软件测试，懒散人的一次自我突破！
- 浅谈 Attention 机制的理解
- 面向对象11：向下转型的使用、instanceof关键字、Object类的使用
- Androidx 切换多语言失效解决方案（appcompat版本有关）
- 随机生成爆破密码字典.txt
- 汇编（五）：第一个汇编程序
- MATLAB数据类型结构
- 保证线程安全的10个小技巧
- PyTorch 1.x 常用知识
- 微信公众号获取AppID和AppSecret
- Python爬虫基础讲解（二十七）：scrapy 框架—ltem和scrapy.Request
- 自阿里P8爆出1031道java面试题后，我在boss直聘狂拿千份Offer
- 利用win10镜像文件安装.net framework 3.5 简单快速
- 文件传输协议的服务器