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