HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
-h 元素
-p 元素 lorem 乱数假文
-span 元素【无语义元素】
块盒 (独占一行) / 行盒(不会独占一行)
-pre 元素 【预格式化元素】 保持源代码格式显示
空白折叠:超过1个的连续空白字符(空格、换行、制表)会被显示为1个空格
在pre元素中不会出现空白折叠
pre元素常用来在网页中显示代码
pre元素本质:一种css属性
显示代码时,常在外面套<code></code>
-Html Entity(实体字符)
两种表示:&单词; &#数字;
小于符号:< 大于符号: > 空格: 版权符号:© © 分数:½(二分之一) &符号:&
———————————————————————————————————————————
-a元素
##href属性
超链接
使用a元素,属性为href=""
锚链接
先给链接目的地设置id属性,在a元素中属性href="#id" id属性为全局属性
回到页面顶部:a元素中属性href="#"
跳转到另一页面的某个锚点处:<a href="页面地址#id"></a>
功能链接 (点击后,出发某功能)
执行JS代码 <a href="Javascipt:>
发送邮件 <a href="mailto:邮件地址
拨号 <a href="tel:手机号码
##target属性
表示跳转窗口位置
其中的两种target属性
_self:表示在当前页面中打开新页面(默认值)
_blank:表示在新窗口中打开
##title属性(全局属性)提示文字
———————————————————————————————————————————
-路径写法
##站内资源和站外资源
站内资源:当前网站的资源
站外资源:当前网站之外的资源
##绝对路径/相对路径
1、绝对路径格式(url地址):协议名://主机名:端口号/路径
协议名:http、https、file
主机名:域名、ip地址
端口号:如果协议是http协议,默认端口号80;https协议,默认端口号443
2、相对路径
以./开头,./表示当前资源所在的目录
以../开头,表示上一级目录中的资源
———————————————————————————————————————————
-图片
##img元素
src属性(source)
alt属性(提示文字)
<img src="">
##和a元素的联用
<a href="">
<img src="">
</a>
##和map元素的联用
在map元素中加name属性
在img元素中加usemap属性
在map中划分区域,用子元素area
坐标:圆(圆心、半径) 矩形(左上、右下) 多边形(顶点依次)
##和figure元素联用
用于把图片、标题、文本包裹起来
子元素figcaption表示指代东西的标题里面放h元素
———————————————————————————————————————————
-多媒体元素
##vedio元素
<vedio src=""></vedio>
播放控件:controls属性,取值只能写controls
某些属性只有两种状态:1、不屑 2、取值为属性名, 这种属性叫做布尔属性
H5中 布尔属性可以不写属性值
autoplay:布尔属性
muted:静音播放(布尔属性)
loop:循环播放(布尔属性)
## audio 和视频完全一致
##兼容性
1、旧版本浏览器不支持这两个元素
2、不同浏览器支持的音视频格式可能不一致 视频通常:mp4、webm
不在vedio标签中写src属性,而用vedio的子元素<source src="111.mp4">
<source src="111.webm">
<p>你的浏览器不支持此视频格式,请点击此处下载最新版浏览器</p>
_____________________________________________________________________________
-列表元素
##有序列表
ol: ordered list 子元素只能是li
li:list items
ol元素的属性 type="i/1/a/A" 序号种类
reversed(布尔属性) 倒序显示
##无序列表
ul: unordered list 其他与ol相同
##定义(n)列表
通常用于一些属于的定义
dl: definition list
dt: definition title
dd: definition description
———————————————————————————————————————————
##容器元素 表示代表一块区域,为了盛放其他元素
<div></div> 没有语义
<header></header> 通常表示页头或文章的头部
<footer></footer> 通常表示页脚或文章的尾部
<article></article> 通常表示整篇文章
<section></section> 通常表示文章中的章节
<aside></aside> 通常用来表示附加信息
———————————————————————————————————————————
#元素的包含关系
元素的包含关系由元素的内容类别决定
1、容器元素可以包含各种元素
2、a元素中几乎可以包含任何元素
3、有些元素只能存在特定子元素
4、标题元素和段落元素不能互相嵌套,并且不能包含容器元素