三、html基础—特殊标签
2024-05-29 10:01:52
一、实体标签
1、 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格2、 在HTML中有些时候，我们不能直接书写一些特殊符号比如：多个连续的空格，比如字母两侧的大于和小于号3、 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）实体的语法：&实体的名字; 空格> 大于号< 小于号© 版权符号示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>实体</title>
</head>
<body>
<p><!--今天 天气真不错 --><!-- 会把多个空格读取成一个空格 -->今天 天气真不错！
</p>
<p><!-- a<b>c --><!--会把<b>当成一个开始标签 -->a<b>c
</p></body>
</html>
二、meta标签
1、 meta主要用于设置网页中的一些元数据，元数据不是给用户看meta常用属性：charset 指定网页的字符集name 指定的数据的名称content 指定的数据的内容2、示例：（1）keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,存储卡,京东"/><meta name="keywords" content="购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon"> （2）description 用于指定网站的描述<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>网站的描述会显示在搜索引擎的搜索的结果中（3）title标签的内容会作为搜索结果的超链接上的文字显示 3、将页面重定向到另一个网站 <meta http-equiv="refresh" content="时间，几秒后跳转;url=跳转地址"> <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="HTML5,前端,CSS3"><meta name="description" content="这是一个非常不错的网站"><meta http-equiv="refresh" content="3;url=https://www.baidu.com"> -<title>Document</title></head>
<body></body>
</html>
三、语义化标签
1、常用的语义化标签
在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
（1）标题标签：h1 ~ h6 一共有六级标题从h1~h6重要性递减，h1最重要，h6最不重要h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1一般情况下标题标签只会使用到h1~h3，h4~h6很少用标题标签都是块元素< 在页面中独占一行的元素称为块元素（block element）>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
（2）hgroup标签：用来为标题分组，可以将一组相关的标题同时放入到hgroup
<hgroup><h1>回乡偶书二首</h1><h2>其一</h2></hgroup>
（3）p标签:表示页面中的一个段落p也是一个块元素<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
（4）em标签:用于表示语音语调的一个加重< 在页面中不会独占一行的元素称为行内元素（inline element）> <p>今天天气<em>真</em>不错！</p>
（5）strong标签：表示强调，重要内容！
<p>你今天必须要<strong>完成作业</strong>！</p>
（6）blockquote标签： 表示一个长引用,引用内容较长时使用是一个块元素，一般用来引用 鲁迅说：<blockquote>这句话我是从来没有说过的！</blockquote>
（7）q标签：表示一个短引用 鲁迅说：子曰<q>学而时习之，乐呵乐呵！</q>
（8）br标签：表示页面中的换行
<br><br>今天天气真不错
2、块元素和行内元素介绍
2、块元素（block element）- 在网页中一般通过块元素来对页面进行布局
3、行内元素（inline element）- 行内元素主要用来包裹文字注意：- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素- 块元素中基本上什么都能放- p元素中不能放任何的块元素浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正比如：标签写在了根元素的外部p元素中嵌套了块元素根元素中出现了除head和body以外的子元素... ...
浏览器会自动修正，以下示例的html编写是错误的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p><h1>哈哈</h1> </p>
</body>
</html>
<h1>我就要写在html标签的外部！</h1>
3、布局标签（结构化语义标签）
header 表示网页的头部main 表示网页的主体部分(一个页面中只会有一个main)footer 表示网页的底部nav 表示网页中的导航aside 和主体相关的其他内容（侧边栏）article 表示一个独立的文章section 表示一个独立的区块，上边的标签都不能表示时使用sectiondiv 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素span 行内元素，没有任何的语义，一般用于在网页中选中文字<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><header></header><main></main><footer></footer><nav></nav><aside></aside><article></article><section></section><div></div><span></span>
</body>
</html>
四 、列表
在html中也可以创建列表，html列表一共有三种：1、有序列表2、无序列表3、定义列表>>>>有序列表，使用ol标签来创建有序列表使用li表示列表项 >>>>无序列表，使用ul标签来创建无序列表(用的比较多)使用li表示列表项>>>>定义列表，使用dl标签来创建一个定义列表使用dt来表示定义的内容使用dd来对内容进行解释说明列表之间可以互相嵌套
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><!--无序列表--><ul><li>结构</li><li>表现</li><li>行为</li></ul><!--有序列表--><ol><li>结构</li><li>表现</li><li>行为</li></ol><!--定义列表--><dl><dt>结构</dt><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd></dl><!--列表之间可以相互嵌套--><ul><li>aa<ul><li>aa-1</li><li>aa-2<ul><li>aa-1</li><li>aa-2</li></ul></li></ul></li></ul></body></html>
五 、超链接
1、超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置<a href="链接地址" target="目标窗口的打开方式">
2、target属性target="_self" 在当前窗口打开资源（默认值）target="_blank" 在独立的窗口上打开新资源target="_top" 在顶层框架中打开链接target="_parent" 在当前框架的上一层里打开链接3、使用 a 标签来定义超链接属性：href 指定跳转的目标路径- 值可以是一个外部网站的地址- 也可以写一个内部页面的地址超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素4、可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 <a href="javascript:;">回到某个位置</a> 5、定位到顶部（可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置）<a href="#">回到顶部</a>6、定位到某个位置（可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id 属性值）方式一：<a name="aa"></a><a href="#aa">回到某个位置</a>方式二：<a id="aa"></a><a href="#aa">回到某个位置</a>注：id属性（唯一不重复的）- 每一个标签都可以添加一个id属性- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性<a id="bottom" href="#">回到顶部</a>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><a href="07.列表.html" target="_blank">超链接</a><br><br><a href="#bottom">去底部</a><br><br><a href="#p3">去第三个自然段</a><br><br><p>第一段</p><p>第二段</p><p id="p3">第三段</p><p>第四段</p><p>第五段</p><p>第六段</p><!-- 在开发中可以将#作为超链接的路径的展位符使用 --><a href="#">这是一个新的超链接</a><br><br><a href="javascript:;">这是一个新的超链接</a><br><br><a id="bottom" href="#">回到顶部</a>
</body>
</html>
六、图片标签
图片标签用于向当前页面中引入一个外部图片>>>>语法：<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">使用img标签来引入外部图片，img标签是一个自结束标签img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）属性：1、 src 属性指定的是外部图片的路径（路径规则和超链接是一样的）2、alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录3、width 图片的宽度 (单位是像素)height 图片的高度 - 宽度和高度中如果只修改了一个，则另一个会等比例缩放注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大但是在移动端，经常需要对图片进行缩放（大图缩小）图片的格式：
1、 jpeg(jpg)- 支持的颜色比较丰富，不支持透明效果，不支持动图- 一般用来显示照片
2、 gif- 支持的颜色比较少，支持简单透明，支持动图- 颜色单一的图片，动图
3、 png- 支持的颜色丰富，支持复杂透明，不支持动图- 颜色丰富，复杂透明图片（专为网页而生）
4、 webp- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式- 它具备其他图片格式的所有优点，而且文件还特别的小- 缺点：兼容性不好5、base64 - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片 - 一般都是一些需要和网页一起加载的图片才会使用base64<img src="data:image/png;base64,iVBORw0KGgoAAAAN..." />选择图片格式的规则：效果一样，用小的效果不一样，用效果好的
七、内联框架
内联框架，用于向当前页面中引入一个其他页面
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>src: 指定要引入的网页的路径width、height： 定义引入页面的宽高frameborder：指定内联框架的边框frameborder="0" 表示元素无边框frameborder="1" 表示元素有边框scrolling：设置滚动条scrolling=“auto” 默认值，整个表格在浏览器页面中左对齐scrolling=“yes” 总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留scrolling=“no” 在任何情况下都不显示滚动条
八、音视频
1、embed标签
网页中插入音频、视频和flash都可使用embed标签<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度" hidden="true/false" ></embed>
2、bgsound标签
为某个网页设置背景音乐，使用的是bgsound标签。不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签。<bgsound src="背景音乐的地址" loop="2" />loop="2" 表示重复2次loop="infinite" 表示无限次循环播放，也可以使用loop="-1"表示无限次循环播放。3、audio标签
audio标签用来向页面引入一个外部的音频文件：方式一:<audio src="./a.mp3" controls autoplay loop></audio>方式二： <audio controls><!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ --><source src="./source/audio.mp3"><source src="./source/audio.ogg"><embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100"></audio>controls属性，用于控制播放器是否显示。autoplay属性，用于设置自动播放。如果设置了autoplay，则音乐在打开页面时会自动播放，但是目前来讲，大部分浏览器都不会对音乐自动播放。loop属性，用于循环播放。注意事项：1.音视频文件引入时，默认不允许用户控制停止和播放即不显示播放器。可以使用 controls属性来显示浏览器。2.方式二优势：当audio标签不被浏览器不识别时，就会显示标签内文字。多个source存在时，不会同时使用。当第一个source被播放，不会播放第二个。当第一个source不被播放时，会播放第二个。4、video 标签
使用video标签来向网页中引入一个视频- 使用方式和audio基本上是一样的<video controls><source src="./source/flower.webm"><source src="./source/flower.mp4"><embed src="./source/flower.mp4" type="video/mp4"></video>
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><audio controls><!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ --><source src="./source/audio.mp3"><source src="./source/audio.ogg"><embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100"></audio><!-- 使用video标签来向网页中引入一个视频- 使用方式和audio基本上是一样的--><video controls><source src="./source/flower.webm"><source src="./source/flower.mp4"><embed src="./source/flower.mp4" type="video/mp4"></video><iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe></body>
</html>
三、html基础—特殊标签相关推荐
- html引入外部css_CSS 三种基础选择器
本节我们来学习 CSS 中的选择器,选择器是 CSS 里面一个很重要的概念,HTML 中的所有标签样式,都是通过不同的 CSS 选择器进行控制的.我们只需要通过选择器,就可以对不同的 HTML 标签进 ...
- html标签体,HTMLCSS基础-html标签的实体
HTML&CSS基础-html标签的实体 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 尹正杰的网页 我的博客地址:https://www.cnblog ...
- uniapp怎么引入css_CSS 三种基础选择器
本节我们来学习 CSS 中的选择器,选择器是 CSS 里面一个很重要的概念,HTML 中的所有标签样式,都是通过不同的 CSS 选择器进行控制的.我们只需要通过选择器,就可以对不同的 HTML 标签进 ...
- [Java面试三]JavaWeb基础知识总结.
[Java面试三]JavaWeb基础知识总结. 1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Int ...
- 串口发送tcp数据 源端口号_三分钟基础知识：用动画给面试官解释 TCP 三次握手过程...
作者 | 小鹿 来源 | 小鹿动画学编程 写在前边 TCP 三次握手过程对于面试是必考的一个,所以不但要掌握 TCP 整个握手的过程,其中有些小细节也更受到面试官的青睐. 对于这部分掌握以及 TC ...
- [Python从零到壹] 三.语法基础之文件操作、CSV文件读写及面向对象
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
- C++学习基础三——迭代器基础
C++学习基础三--迭代器基础 迭代器分为两种:一种是iterator,另一种是const_iterator. 两者都可进行访问容器中的元素,不同之处是: (1)const_iterator类型只能用 ...
- 《Go语言圣经》学习笔记 第三章 基础数据类型
<Go语言圣经>学习笔记 第三章 基础数据类型 目录 整型 浮点数 复数 布尔型 字符串 常量 注:学习<Go语言圣经>笔记,PDF点击下载,建议看书. Go语言小白学习笔记, ...
- 队列判空_三分钟基础：什么是队列？
作者 | 小鹿 来源 | 小鹿动画学编程 写在前边 像线程池.异步队列.消息队列等有限的资源容器中,往往存储大量的任务事件,这些大量的任务事件需要进行有条理的进行任务分发以及各种情况处理,为了能够 ...
最新文章
- 机器学习基础专题：线性回归
- 电话订票每日开始时间(几点放票) - 北京本地宝
- 配置git 账户密码时bash:$:command not found
- C++ std::thread 和 std::jthread 使用详解 (含C++20新特性)
- [渝粤教育] 中国地质大学 职业健康管理体系 复习题 (2)
- [jquery]为jQuery.ajax添加onprogress事件
- html鼠标互动旋转立方体,css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍...
- mysql主键和聚簇索引_MYSQL：聚簇索引和主键索引
- [Android] 【极其罕见】【安卓】视频转换器【支持18种格式转换！】
- FPGA20个例程专栏介绍
- XUI 熟练使用之（二） -----------轮播条( BannerLayout 的使用)
- 广告数据定量分析：第一章——广告优化中的统计学
- 数据库并发抢红包_Redis乐观锁解决高并发抢红包的问题
- 【Foreign】Melancholy [线段树]
- 石家庄12重点项目开工，滹沱新区更名为正定新区
- CF1717D Madoka and The Corruption Scheme
- 以logistic Regression为例实现多类别分类及Python实现
- MAC 安装 pyenv
- 股票历史行情数据api_历史API
- 【ROS实操1编码实现乌龟运动控制，让小乌龟做圆周运动。】