字符实体与语义标签
1.常用特殊符号:
1. 空格,2.> 大于号,3.<小于号,4.&与,
2.meta标签
<meta charset="utf8" version='1'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
charset:指定网页的字符集
name:指定的数据的名称
keyword:表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开
description:表示网站的描述信息
content:指定的数据的内容,会作为搜索结果的超链接上的文字显示
如果设置了http-equiv属性,元素就是一个pragma指令,提供的信息相当于一个类似名称的HTTP头所能提供的信息。点击http-equiv的链接,查看其更详细信息
content-security-policy:允许页面作者为当前页面定义一个内容策略。内容策略主要指定允许的服务器来源和脚本端点,这有助于防范跨站脚本攻击。
content-type:声明文档的MIME类型和字符编码。如果指定,content属性必须有 "text/html; charset=utf-8 "的值。这相当于一个指定了charset属性的元素,并对文档中的位置有同样的限制。注意:只能在使用text/html的文档中使用,不能在使用XML MIME类型的文档中使用。
default-style:设置默认的CSS样式表集的名称。
x-ua-compatible: 如果指定,内容属性必须有 "IE=edge"的值。用户代理被要求忽略这个pragma。
refresh:该指令指定页面重新加载及重定向的方式
直到页面应该被重新加载的秒数–只有当content属性包含一个正整数时。
直到页面重定向到另一个页面的秒数–只有当内容属性包含一个正整数,后面跟着字符串’;url=',以及一个有效的URL。
3.语义标签
1.块元素(Block Element)
:标签,一共有六级标签
:标题组,多层次的标题,它将一组
---
标签元素分组
:段落,页面中的一个段落,由空行或者第一行缩进将相邻的文本块分开
:短引文,用缩进表示所包含文本,可以用cite属性来表示引文源,用 元素表示来源的文本表述 2.行内元素(Inline Element):长引文,用一个简短的内联引导包围文本。该元素用于不需要段落分割的段引文
:换行 :强调,表示强调作用,该标签可以嵌套,表示更高的强调程度 :重要,表示重要性,严肃性或者紧迫感,浏览器通常以粗体呈现
h5新语义
4.块内元素与行内元素
块元素(block element):在网页中一般通过块元素来对页面进行布局
行内元素(inline element): 行内元素主要用来包裹文字,一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
5.内容修正
浏览器能够对网页内容进行修正,改善呈现效果,但是不建议写不规范的代码
6.布局标签
结构化语义标签
header表示网页的头部(页眉)
main表示网页的主体部分(一个页面中只会有一个main)
footer表示网页的底部(页脚)
nav表示网页中的导航
aside和主体相关的其他内容(侧边栏)
article表示一个独立的文章
section表示一个独立的区块,上边的标签都不能表示时使用section
div 块元素,没有任何的语义,就用来表示一个区块。目前来讲,div还是主要的布局元素
span 行内元素,没有任何的语义,一般用于在网页中选中文字
7.列表
在html中可以创建列表,html列表一共有三种:
有序列表,使用ol标签来创建有序列表,使用li表示列表项
无序列表,使用ul标签来创建无序列表,使用li表示列表项
定义列表,使用dl标签来创建定义列表,使用dt表示定义的内容,使用dd来对内容进行解释说明
8.超链接
<ul>
<li><a href="https://www.baidu.com">Website</a></li>
<li><a href="mailto:example@outlook.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
内部地址:
当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径,会以./或…/开头
./ 表示当前文件所在目录,可以省略不写
…/表示当前文件所在目录的上一级目录
<a href="./test1.html">超链接1——默认</a><br>
<a href="./test1.html" target="_self">超链接1——当前页面</a><br>
<a href="./test1.html" target="_blank">超链接1——新建页面</a><br>
target属性,用来指定超链接打开的位置可选值:
_self在当前页面中打开超链接,默认值
_blank在新建页面中打开超链接
锚点跳转
可以使用javascript:void(0);来作为href的属性,此时点击这个超链接什么也不会发生
可以将#作为超链接的路径的占位符使用。
可以直接将超链接的href属性设置为#,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部的位置
可以跳转到页面的指定位置(锚点),只需将href属性设置#目标元素的id属性值(唯一不重复)
9.图片
img标签是一个自结束标签,这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)
属性
src:属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt:图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示,搜索引擎会根据alt中的内容来识别图片
width:图片的宽度(单位是像素)
height :图片的高度(单位是像素)
宽度和高度中如果只修改了一个,则另一个会等比例缩放
10.内联样式
内联框架iframe,用于向当前页面中引入一个其他页面,
src指定要引入的网页的路径
frameborder指定内联框架的边框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
11.音频视频
audio标签用来向页面中引入一个外部的音频文件
音视频文件引入时,默认情况下不允许用户自己控制播放停止
属性:
controls是否允许用户控制播放
autoplay音频文件是否自动播放
如果设置了autoplay,则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop音乐是否循环播放
source
除了通过src属性来指定外部文件的路径以外,还可以通过元素来指定文件的路径
embed
IE8下不支持audio元素,但是可以使用 元素在文档中的指定位置嵌入外部内容。
这个内容是由外部应用程序或其他互动内容的来源提供的,如浏览器插件。
<audio src="./source/audio.mp3" controls autoplay loop></audio>
<audio controls autoplay loop>
对不起,您的浏览器不支持播放音频!请升级浏览器!
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
</audio>
<embed src="./source/audio.mp3">
视频基本与音频一致,使用vido标签
下一节写css语法与选择器,点个关注不迷路。