HTML学习笔记
元素
<a href="http://www.baidu.com">百度</a>
元素 = 起始标记<> + 结束标记</> + 元素内容 + (元素属性)
属性 = 属性名 + 属性值
属性分类:
局部属性:某些元素特有的属性
全局属性:所有元素通用
有些元素没有结束标记,叫 空元素
两种写法
<>
</>
元素的嵌套:元素不能相互嵌套
父元素,子元素,祖先元素,后代元素,兄弟元素(拥有同一个父元素的两个元素)
标准的文档结构
`<!DOCTYPE html>...
文档声明,告诉浏览器,当前文档使用的HTML标准是HTML5
<html lang="en">
</html>
根元素,一个页面最多一个,并且该元素是所有其他元素的父元素或祖先元素
HTML5中没有强制要求书写
lang属性:language,全局元素,表示该元素内部使用的文字是哪一种自然语言书写而成的
...<head>...</head>...
文档头内部的内容不会显示到页面上
...<meta>...
文档的元数据:附加信息。
...<title>Document</title>...
网页标题
...<body></body>...
文档体,页面上所有要参与显示的元素,都应该放置到文档体中
语义化
什么是语义化
1.每一个HTNL元素都有具体含义
a元素:超链接
p元素:段落
2.所有元素与展示效果无关
元素展示到页面中的效果,应该由CSS决定
重要:选择什么元素,取决于内容的含义,而不是显示出的效果
为什么需要语义化
1.为了搜索引擎优化(SEO)
2.为了让浏览器理解网页
文本元素
h
标题
h1~h6:一级到六级标题
h$*6>{$级标题}+Tab键/*直接生成六个标题*/
p
段落
lorem 乱数假文,没有任何实际含义的文字
p*3>lorem/*直接生成三段乱数假文*/
span
没有语义,仅用于设置样式
以前:某些元素在显示时会独占一行(块级元素),而某些元素不会(行级元素)
到了HTML5,已经弃用这种说法
pre
预格式化文本元素
空白折叠:在源代码中的连续空白字符(空格、换行、制表),在页面显示时,会被折叠成一个空格
例外:在pre元素中的内容不会出现空白折叠
该元素通常用于在页面中显示一些代码
pre元素功能的本质:它有一个默认的CSS属性
显示代码时,通常外面套code元素,code表示代码区域。
HTML实体
实体字符通常用于在页面中显示一些特殊符号
两种书写方式:
1.&单词;
2.&#数字;
- 小于符号
< <
- 大于符号
>
- 空格
- 版权符号
©
- &符号
&
a元素
含义:超链接
href属性
hyper reference (引用) 通常表示跳转地址
表示法:
-
普通链接
-
锚链接 (跳到当前页面的某一位置)
id属性:全局属性,表示元素在文档中的唯一编号
- 功能链接
点击后,触发某个功能
- 执行JS代码,javascript:
- 发送邮件,mailto:
要求用户计算机上安装有邮件发送软件:exchange - 拨号,tel:
要求用户计算机上安装有拨号软件,或使用的是移动端访问
target属性
表示跳转窗口位置。
target的取值:
- _self:在当前页面窗口中打开,默认值
- _blank:在新窗口打开
路径的写法
站内资源和站外资源
站内资源:当前网站的资源
站外资源:非当前网站的资源
绝对路径和相对路径
站内资源:相对路径
站外资源:绝对路径
- 绝对路径
书写格式:
url地址:
…
协议名://主机名:端口名/路径
schema://host:port/path
…
协议名:http、https、file
主机名:域名、IP地址
端口号:如果协议是http协议,默认端口号80;如果协议名是https协议,默认端口号为443
当跳转目标和当前页面的协议相同时,可以忽略协议
- 相对路径
以./开头,./表示当前资源所在的目录
可以书写…/表示返回上一级目录
相对路径中./可以省略
图片元素
img元素
空元素
src属性:source
alt属性:当图片资源失效时,将使用该属性的文字替代图片
和a元素连用
和map元素连用
map:地图
map的子元素:area
衡量坐标时,为了避免衡量误差,需要使用专业的衡量工具:ps、pxcook
和figure元素连用
指代、定义,通常用于把图片、图片标题、描述包裹起来
子元素:figcaption (标题)
<figure>
<a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281">
<img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系图片">
</a>
<figcaption>
<h2>
太阳系
</h2>
</figcaption>
<p>
太阳系(Solar system)是一个受太阳引力约束在一起的行星系统,包括太阳以及直接或间接围绕太阳运动的天体
</p>
</figure>
<map name="solarMap">
<area shape="circle" coords="670,270,66" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
<area shape="rect" coords="635,336,730,397" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
<area shape="poly" coords="" href="" alt="">
</map>
多媒体元素
video 视频
audio 音频
video
controls :控制控件的显示,取值只能是controls
某些属性,只有两种状态:1.不写 2.取值为属性名
这种属性叫做布尔属性
布尔属性:在HTML5中,可以不用书写属性值
autoplay:布尔属性,自动播放。
muted:布尔属性,静音播放。
loop:布尔属性,循环播放。
audio
和视频完全一样
兼容性
-
旧版本的浏览器不支持这两个元素
-
不同的浏览器支持的音视频格式可能不一致
列表元素
有序列表
ol:ordered list
li:list item
type 标号类型:
i
I
a
A
1(默认值)
把大象装进冰箱,分几步?
<ol type="a">
<li>打开冰箱门</li>
<li>大象进去</li>
<li>关上冰箱门</li>
</ol>
reversed:布尔属性,语义化,倒序
无序列表
把ol改为ul
ul:unordered list
<ul>
<li></li>
<li></li>
<li></li>
</ul>
无序列表常用来制作菜单 或 新闻列表
定义列表
通常用于一些术语的定义
dl:definition list
dt:definition title
术语
dd:definition description
术语描述
<dl>
<dt>术语</dt>
<dd>术语描述</dd>
</dl>
容器元素
容器元素:该元素代表一块区域,内部用于放置其他元素
div元素
没有语义
语义化容器元素
header:通常用于表示页头,也可以用于表示文章的头部
footer:通常用于表示页脚,也可以用于表示文章的尾部
article:通常用于表示整篇文章
section:通常用于表示文章的章节
aside:通常用于表示则边栏
<header>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</header>
<article>
<header></header>
<section>
<p></p>
<p></p>
<p></p>
</section>
</article>
<aside>
</aside>
<footer>
</footer>
元素包含关系
以前:块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外。
元素的包含关系由元素的类别决定。
总结:
-
容器元素中可以包含任何元素
-
a元素中几乎可以包含任何元素
-
某些元素有固定的子元素(ul>li, ol>li, dl>dt+dd)
-
标题元素和段落元素不能互相嵌套,并且不能包含容器元素