第一周周报
文章目录
-
- 对第一个网页的一些简单阐述
-
- 元素 = 起始标记 + 结束标记 + 元素内容 + 元素属性
- 属性 = 属性名 + 属性值
-
- 属性的分类
- 元素的嵌套
- 标准的文档结构
- 一些常见元素
-
- h
- p
- span
- pre
- 实体字符
-
- 具体常见样例
- a元素
-
- href属性
- target属性
- 路径
-
- 站内资源和站外资源
- 绝对路径和相对路径
- 图片元素
-
- img元素
- 和a元素连用
- map元素
- 和figure元素连用
- 多媒体元素
-
- video元素
- audio元素
- 列表元素
-
- 有序列表
- 无序列表
- 定义列表
- 容器元素
-
- idv元素
- 语义化容器元素
- 元素包含关系
对第一个网页的一些简单阐述
元素 = 起始标记 + 结束标记 + 元素内容 + 元素属性
<a>a>
起始标记和结束标记确定元素名称，如例中为a元素
<title>Documenttitle>
这个表示页面的标题，即网页标题，这个元素名称为title元素
元素内容表示在页面中显示出来的东西，如上述中title元素显示出来的Document为他的元素内容。
元素属性表示显示出来的额外信息
属性 = 属性名 + 属性值
href属性名表示超链接
百度a>
属性的分类
局部属性：某些元素特有的属性 如上例子：a元素的局部属性是herf，代表超链接
全局属性：所有元素通用 如例：title
空元素
如例中不含有结束标记，即为空元素
<meta charset="UTF-8">
<img >
元素的嵌套
元素之间的嵌套格式
如
<div>
<p>p>
div>
为正确格式
<div>
<p>
div>
p>
为错误格式
标准的文档结构
这个为文档声明，会告诉浏览器，当前文档的HTML的标准是HTML5的标准，要是不写，则会导致浏览器进入怪异渲染模式
<html lang="en">
html>
这个为根元素，一个页面最多存在一个，是其他元素的祖先元素或者父元素。
其中的lang为lang属性：language，是全局属性，表示该元素内部使用的文字是使用哪种自然语言书写而成的。
为文档头，不会显示在页面上。 为文档的元数据：附加信息。 charset：为指定网页内容编码。 ** ** 是文档体，在页面上参与显示的元素，都应该放在文档体中。选择什么元素取决于内容的含义，而不是显示出的效果
一些常见元素
h
h 元素
h1~h6:表示1级到6级标题。 会独占一行。
p
p 元素
表示段落。
lorem 为乱数假文，用于测试段落。 会独占一行。
span
是无语意文字，仅用于测试样式。
块级元素会独占一行，行级元素不会，但到HTML5就弃用了这种说法
pre
预格式化文本元素 即在pre元素内部出现的内容，会按照源代码格式显示在页面上。一般用于在页面中显示源代码。
本质存在一个默认的css属性。
一般元素都是存在空白折叠（即源代码中的空格、制表、换行在页面显示的时候，都会被折叠成一个空格）
code元素表示代码。
实体字符
可以通过两种表示方式进行表示：
1）&+英文字符
2）&#+数字
具体常见样例
1.<表示小于号即<
2.>表示大于号即>
3. 表示空格
4.©表示版权符号©
5.&表示&符号本身
a元素
表示超链接，即跳转页面。
href属性
通常表示跳转地址。
1.跳转地址
2.跳转到某个锚点 不刷新页面
缩写，敲下之后按enter会直接补全
插入属性用[]
(h2>{章节2})+p>lorem
((h2>{章节$})+p>Lorem100)*6
a*6>{章节$}
((h2[id="chapter$"]>{章节$})+p>Lorem100)*6
<a href="#">返回顶部a>
空的锚点表示返回顶部 只需输入#
id属性：全局属性，表示元素在文档中的唯一编号，每一次设置必须不一样。
3.功能性链接
点击后，触发某个功能
- 执行js代码 javascript:alert(‘你好！’)
- 发送邮件 mailto：+邮箱地址 (要求计算机上安装邮件发送软件)
- 拨号 tel: (要求用户计算机上安装拨号软件，或者使用移动端)
target属性
表示跳转窗口位置。
target的取值：
- _self:表示当前页面窗口打开，一般的默认值
- _blank:表示在新窗口打开
-
路径
站内资源和站外资源
站内资源：当前网站的资源
站外资源：非当前网站的资源
绝对路径和相对路径
站外资源要使用绝对路径
站内资源要使用相对路径（绝对路径也可）
- 绝对路径的书写格式：
协议名：//主机名：端口号/路径
schema://host:port/path
协议名：http、https、file（表示本地文件）
主机名：域名、ip地址
端口号：http协议默认端口号为80；https协议默认端口号为443
当跳转目标和当前页面的协议相同时，可以省略协议
-
相对路径的书写
./表示当前资源所在的目录 ../表示返回上一级目录
相对路径中./可以被省略
图片元素
img元素
是一个空元素
src属性：即输入图片的路径
alt属性：当图片资源失效时，显示的文字
和a元素连用
map元素
map要和图片连接要有一个类似于之前的锚链接，在其中使用name属性，其方法类似于之前的id，使用时对他进行命名（两种命名方法：1、驼峰命名法：第一个单词首字母小写，第二个单词首字母大写；2、段横杠命名法：两个单词之间用-连接），然后在img里面使用usemap属性（#+map的名字）
map的名字要唯一
area: circle表示圆形 先输入圆心，再输入半径
rect表示矩形 先输入左上角，再输入右下角
poly表示多边形 依次输入各个点的位置
shape属性表示形状
coords属性表示坐标
href属性表示点击那个地方希望跳转到的地方
和figure元素连用
让计算机明白figure里面的东西都是联系在一起的
指代，定义，通常用于把图片、图片标题、描述包裹起来
还存在一个子元素：figcaotion 表示指代东西的标题。
多媒体元素
video元素
video元素也存在src属性，里面输入视频的地址
布尔属性：在HTML中，可以不用书写属性值的属性（也可以让取值为属性名）
如：
- controls：控制控件的显示
- autoplay:自动播放
- muted:静音播放
- loop：循环播放
audio元素
和video一样
- 由于兼容性问题，一般要用两种格式的视频文件mp4和webm，此时书写代码就需要在video元素里面嵌入子元素source元素，然后在source元素里面使用src属性，删除video元素里面的src属性。
列表元素
有序列表
- ol元素：order list 表示整个列表（是一个父元素）
- li元素：list item 表示列表中的每一项（是子元素）
列表的子元素只能是li
列表由ol和li两个元素组合构成
type属性，决定每项前面的序号类型，不过一般不建议使用
reversed属性：也是一个布尔属性，表示将顺序的列表进行倒置
无序列表
ul：unordered list
使用时同样和li元素嵌套使用
定义列表
通常用于一些术语的定义
dl：definition list
dt: definition title (术语的名字)
dd: definition description (术语的描述)
容器元素
容器元素：代表一个区域，内部用于放置其他元素
idv元素
无含义的，相当于一个盒子，是一个容器
语义化容器元素
在HTML5中才出现
-
header:通常用于表示页头，也可以用于表示文章的头部
-
footer:通常用于表示页脚，也可以用于表示文章的尾部
-
article:通常用于表示整篇文章
-
section:通常用于表示文章的章节
-
aside：通常用于表示侧边栏，即附加信息
元素包含关系
以前：块级元素可以包含行级元素，行级元素不能包含块级元素，a元素除外
元素的包含关系由元素的内容类别决定
1.容器元素中可以包含任何元素
2.a元素几乎可以包含任何元素
3.有些元素有固定的子元素（如列表元素）
4.标题元素和段落元素不能相互嵌套