HTML部分
第一小节
- 注释
不可以嵌套
<!-- 这里可以写注释!-->
- 文档声明
<!DOCTYPE HTML>
- meta标签
①charset
②name
关键字
keywords
description
③content - 进制
①8进制
②二进制(计算机底层)
③十进制
④十六进制(显示二进制,读取) - 字符编码
编码:字符->二进制
解码:二进制->字符 - 标签属性
开始标签,自结束标签 - 使用标签时,注意语义而不是样式
- 浏览器解析网页时不符合规范的内容会被修正
第二小节
1.块元素
①h1-h6 标题
h1最重要,仅次于title标签
②p 段落
③hgroup 标题分组
tips:
①块元素中什么都能放
②p不能放任何块元素
③块元素用于布局,行内元素用于包裹文字
2.行内元素
①em 语音强调加重
②string 强调重要内容
③blockquote 长引用(快元素)
④q 短引用
⑤br 换行
3.列表
①有序列表
<ol></ol>
②无序列表
<ul></ul>
③定义列表 (不咋常见,没见谁用过)
<!-- 创建定义列表-->
<dl>
<!-- 定义的内容!-->
<dt></dt>
<!-- 对定义内容的说明!-->
<dd></dd>
</dl>
tips:列表间可以相互嵌套
4.超链接
①行内元素,可以嵌套除它本身的任何元素
②属性:href 目标路径
内部:页面地址;外部:网站地址
③相对路径
./或../开头
./ 代表当前文件所在目录
../ 代表当前文件所在目录的上一级目录
5.结构
①header 头部
②main 主体
③footer 底部
④nav 导航
⑤aside 和主题相关的内容(侧边栏)
⑥article 独立的文章
⑦div 表示一个区块(主要布局元素)
⑧span 行内元素,网页中选择文字
6.超链接其他用法
①target属性,指定超链接打开的位置
(1)_self 当前页打开超链接(默认)
(2)_blank 新页面打开超链接
②href属性
(1)href="#" 回到顶部
(2)href="#id属性" 去id属性位置
(3)href=“javascript:;” 点击时什么都不发生
7.img替换元素,在快和行内元素之间,有两种元素的特点
①src 路径
②width 图片宽度
③height 图片高度
④alt 图片的描述、搜索引擎根据alt中内容识别图片
8.音视频播放
①audio音频 引入一个外部音频文件
(1)src 路径
(2)auto 自动播放(写上就是自动播放,大多数还不用)
(3)controls 是否允许用户控制(写上就允许客户控制)
(4)loop 是否循环比方
两种写法:
<audio src="" controls></audio>
或
<audio controls>
<source src="">
</audio>
②video 视频,同audio
③audio和video
正常浏览器用source引入
不正常浏览器用embed引入
9.内联框架
iframe 向当前页面引入一个其他页面
①src 路径
②frameborder 内联框架的边框
10.图片格式
①jpg 颜色丰富,不透明,不是动图------>照片
②gif 颜色较少,可透明,可以动图------>动图
③png 颜色丰富,可复杂透明,不是动图------>专为网页而生
④webp 谷歌新推出专门表示网页中图片的一种格式------>所有优点,但兼容性不好
⑤base64 一些需要和网页一起加载的图片使用