HTML+CSS第一周
HTML（超文本标记语言），定义网页中有什么
CSS（层叠样式表），定义网页中的东西长什么样
xml（可拓展的标记语言）
第一个网页
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<a href="http://www.xiyou.edu.cn/">西安邮电大学官网a>
body>
html>
注释
在HTML中，注释方法如下
快捷键：ctrl+/
支持多行注释
元素
元素的组成：
起始标记+结束标记+元素内容（内容不限，可文字可图片，用于显示）+元素属性（非必写）
属性=属性名+属性值
属性的分类
1.局部属性：某些元素特有的属性
2.全局属性：所有元素通用
有些元素没有结束标记（如下例），叫做空元素
<meta charset="UTF-8">
空元素的两种写法
<meta charset="UTF-8">
<meta charset="UTF-8"/>
元素的嵌套
元素不能相互嵌套（交叉），下图即为示例
父元素，子元素，祖先元素，后代元素，兄弟元素（了解）
标准的文档结构
HTML：页面，HTML文档
文档声明
文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5。
不写文档声明导致浏览器进入怪异渲染模式。
根元素
<html lang="en">
html>
根元素，一个页面最多一个，并且该元素是其他所有元素的父元素或者祖先元素。
在HTML5中不强制要求书写该元素
lang属性：language，全局属性，表示该元素内部使用的文字是使用哪种自然语言写的。简体中文用cmn-hans
head元素和body元素只能作为HTML元素的子元素使用。
文档头
<head>
head>
文档头，文档头内部的内容，不会显示到界面上。
元数据
<meta>
文档的元数据：附加信息。
charset：指定网页内容编码。
在计算机中，低压电（0-2 V）0，高压电（2-5 V）1。
UTF-8 是 Unicode 编码的一个版本。
网页标题
<title>Documenttitle>
网页标题
文档体
<body>
body>
文档体，页面上所有要参与显示的元素，都要放置到文档体中。
语义化
什么叫语义化？
1.每一个HTML元素都有具体含义
a元素：超链接
p元素：段落
h1元素：一级标题
2.所有元素本身与显示效果无关，元素展示到页面的效果由CSS来决定。浏览器带有默认的CSS样式。
选择什么元素，取决于内容的含义，而不是显示效果
为什么需要语义化？
1.为了搜索引擎优化
每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码。
2.为了让浏览器理解网页
阅读模式，语音模式
文本元素
HTML5中支持的元素：HTML5元素周期表
h
h1-h6：表示一级标题到六级标题
p
段落，paragraphs
》拓展：乱数假文：lorem
span【无语义】
没有语义，仅用于设置样式
以前：某些元素在显示时会独占一行（块级元素），某些不会（行级元素）
HTML5，已经弃用这种说法
pre【无语义】
预格式化文本元素
空白折叠：在源代码中的连续空白字符（空格，换行，制表），在页面显示时，会被折叠为一个空格。
例外：在pre元素中的内容不会发生空白折叠，pre元素内部出现的内容，会按照原样显示。
该元素通常用于在网页上显示代码。
pre元素功能的本质：它有一个默认的CSS属性
显示代码到网页时，通常在外面套code元素，code表示代码区域
HTML实体
实体字符， HTML Entity
实体字符通常用来在页面中显示一些特殊符号
1.&单词；
2.&#数字；
例如：
小于号<(litter than)
大于号>（great than）
空格 ；
版权符号©
&符号&
a元素
超链接
href属性
hyper reference：通常表示跳转地址
1.跳转地址
2.跳转到某个锚点
id属性：全局属性，表示元素在文档中的唯一编号
3.功能连接
点击后触发某个功能
——执行js代码，javascript:
——发送邮件，mailto:（要求用户安装邮件发送软件：exchange）
——拨号，tel:（要求用户安装拨号软件或者使用移动端访问）
target属性
表示跳转窗口的位置
target的取值：
_self：表示在当前页面窗口打开
_blank：在新窗口打开
路径的写法
站内资源和站外资源
站内资源：当前网站的资源
站外资源：非当前网站的资源
绝对路径和相对路径
站外资源：绝对路径
站内资源：相对路径（也可以使用绝对路径）
绝对路径的书写
ur1地址：
协议名://主机名:端口号/路径
schema://host:port/path
协议名：http，https，file（本地打开）
主机名：域名，IP地址
端口号：http协议，默认端口号为80；https协议默认端口号为443
跳转目标和当前网协的协议相同时，可省略协议名（截止冒号）
相对路径的写法
以./开头，./表示当前资源所在的目录，./可以省略
可以在后面书写../表示返回上一级目录
图片元素
img元素
是空元素
src属性：表示资源，用来写图片的地址
alt属性：当图片资源失效时，将使用该属性的文字替代图片
和a元素连用
和map元素
map:地图
map的子元素：area
shape属性：图形circle，矩形rect，多边形poly
coords属性：关键点坐标和半径（圆），左上和右下的坐标（矩形）
href属性：连接
alt属性
target属性
量坐标的工具：ps，pxcook，cutpro
和figure元素
指代，定义，通常用来把图片，图片标题，描述包裹起来
子元素：figcaption
实际应用示例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<figure>
<a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB%E8%A1%8C%E6%98%9F/8037764?fr=aladdin">
<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="208,157,25" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/17077957?fr=aladdin" target="_blank">
<area shape="rect" coords="181,116,234,189" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/17077957?fr=aladdin" target="_blank">
<area shape="poly" coords="258,127,306,129,303,191,232,181" href="https://baike.baidu.com/item/%E5%9C%9F%E6%98%9F%E5%8D%AB%E6%98%9F/4338243?fr=aladdin" target="_blank">
map>
body>
html>
多媒体元素
video视频
audio音频
video
controls：控制控件的显示，值只能为controls。
某些属性只有两种状态，1.不写 2.取值为属性名，这种属性叫布尔属性。
布尔属性在HTML5中可以不写属性值
autoplay：布尔属性，自动播放。
muted：布尔属性，静音播放。
Loop：布尔属性，循环播放。
audio
用法和video相同
兼容性
1.旧版本浏览器不支持这两个元素
2.不同浏览器支持的音视频格式可能不一致
视频：mp4，webm
音频：mp3
列表元素
有序列表
ol：ordered list
li：list item
ol元素的子元素只能是li元素
属性
type：
| 取值 | 含义 |
|---|---|
| a | 小写字母编号 |
| A | 大写字母编号 |
| i | 小写罗马数字编号 |
| I | 大写罗马数字编号 |
| 1 | 数字编号(默认值) |
该属性通常不建议使用，使用CSS来及控制显示
reversed：布尔属性，倒着书写。
无序列表
把ol改为ul
其他同有序列表相同
常用于制作 菜单 或 新闻列表。
定义列表
通常用于一些术语的定义。
dl：difiniton list
dt：术语的名字
dd：术语的描述
容器元素
容器元素：该元素代表一个区域，内部用于放置其他元素。
div元素
没有语义
语义化容器元素
header：通常用于表示页头，也可以用于表示文章的头部。
footer：通常用于表示页脚，也可以用于表示文章的尾部。
article：通常用来表示整篇文章。
section：通常用来表示文章的章节。
aside：通常用于表示侧边栏，附加信息。
元素包含关系
以前：块级元素可以包含行级元素，行级元素不能包含块级元素，a元素除外
现在：元素的包含关系由元素的内容类别决定
例如：查看h1元素中是否可以包含p元素
总结：
1.容器元素中可以包含任何元素
2.a元素中几乎可以包含任何元素
3.某些元素有固定的子元素(ul>li，ol>li，dl>dt+dd)
4.标题元素和段落元素不能相互嵌套，并且不能包含容器元素