HTML学习笔记
HTML 指的是超文本标记语言: HyperText Markup Language
在网页中html专门用来负责网页的结构，所以在使用html标签时 应该关注的是标签的语义，而不是样式。
浏览器在解析网页时 会自动对网页中不符合规范的内容进行修正。
个人笔记 知识点混乱
1.自结束标签
2.标签中的属性
在开始标签或自结束标签设置 属性是一个名值对（x=y）
用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开 有些属性有属性值，有些没有
属性值用引号引起来
3.文档说明
用来告诉浏览器当前网页版本<!doctype html>
4.字符编码
所有数据在计算机中存储时都是以二进制形式存储的 编码解码过程
字符集（charset） 编码解码采用的规则称为字符集
乱码问题 采用字符集不同 开发时字符集都是用UTF—8通过标签设置网页字符集
5.文档的使用
head是网页头部 帮助浏览器或搜索引擎来解析网页 meta标签用来设置网页的元数据
title中的内容会显示在浏览器的标题栏 搜索引擎会主要根据title中的内容来判断网页的主要内容
body 是html的子元素 表示网页的主体 网页中所有可见得内容都写在body中
网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
6.meta
meta中name 表示指定的数据名称
content表示指定的数据的内容
keywords 表示网站的关键字 可以同时指定多个关键字，关键字间使用，隔开
description 用于指定网站的描述网站的描述会显示在搜索引擎的搜索结果中
title标签的内容会作为搜索结果的超链接上的文字显示
7.标签
h1到h6重要性递减 h1在网页中的重要性仅次于aitle一般情况下一个页面只会有一个h1
一般情况下只会使用到h3 不会用到之后的标签
在页面中独占一行的元素称为块元素（block element）
p标签表示页面中的一个段落 p也是一个块元素
hgroup标签用来分组，可以将一组相关的标题同时放入hgroup
em标签表示语音语调的加重 在页面中不会独占一行的称为行内元素（inline element）主要用来包裹文字
strong表示强调 重要内容
blockquote表示一个长引用 缩进
q表示一个短引用 引号
br标签表示页面中的换行
一般会在块元素中放行内元素，而不会在行内元素中放块元素
p元素中不能放任何的块元素 块元素基本上什么都能放
main表示网页的主体部分（一个网页中只会有一个main）
header表示网页的头部
footer表示网页的底部
nav表示网页中的导航
aside和主体相关的其他内容（侧边栏）
article表示一个独立的文章
section表示一个独立的区块，上边的标签都不能表示时使用section
div没有语义 就用来表示一个区块，目前来讲div还是我们主要的布局元素
span行内元素 ，没有语义 一般用于在网页中选中文字
8.列表
无序列表 ul标签创建无序列表使用 li表示列表项
有序列表 使用ol创建
定义列表 dl创建定义列表 dt被解释的词 dd解释说明的内容
列表之间可以互相嵌套
9.超链接
超链接可以让我们从一个页面跳转到其他页面或者是当前页面的其他位置
使用a标签来定义超链接 属性：href指定跳转的目标路径 值可以是一个外部网站的地址也可以写一个内部页面的地址
超链接是 行内元素，在a标签中可以嵌套任何的元素，除了自身。
10.路径
绝对路径
相对路径：当需要跳转到一个服务器内部的页面时，一般都会使用相对路径，相对路径都会使用…或.开头 ./可以省略不写 如果不写./也不写…/则相当于写了./
./表示当前文件所在目录path
…/表示当前文件所在目录的上一级目录
target 属性用来指定超链接打开的位置 可选值：_self 默认值 在当前页面打开超链接 _blank 在一个新的页面里打开超链接
可以将超链接的href属性设置为# 不会发生跳转，回到当前页面顶部
id属性（唯一不重复的）
每一个标签都可以添加一个id属性 唯一标识 同一页面不能出现重复id属性
可以跳转到页面的指定位置 只需将href属性设置 #目标元素的id属性值
在开发中可以讲#作为超链接的路径的展位符使用
可以使用JavaScript：；来作为href的属性，此时点击这个超链接什么也不会发生
图片标签
用于想当前页面引入一个外部图片 使用img标签（自结束）src属性指定外部图片的路径 属于替换元素（基于块和行内元素之间具有两种元素的特点）alt描述默认情况下不会显示，有些浏览器会图片无法加载时显示搜索引擎会根据alt中的内容来识别图片
width 宽度 height高度
一般情况下pc端不建议修改图片的大小需要多大裁剪多大
但移动端经常需要对图片进行缩放
图片格式
jpeg（jpg）支持颜色丰富 不支持透明效果 不支持动图 一般用来显示照片
gif 颜色少 简单透明 支持动图 颜色单一的图片 动图
png 颜色丰富 复杂透明 不支持动图 专为网页而生
webp 谷歌新推出用来表示网页图片的格式 具备其他图片格式的优点 文件特别小 缺点是兼容性不好
base64 将图片进行base64编码 可以将图片转换为字符通过字符的形式来引入图片 一般一些需要和网页一起加载的图片才会使用base64图片加载速度快
效果一样用小的 效果不一样 用好的
内联框架
用于向当前页面中引入一个其他的页面 src指定要引入的网页的路径
frameboarder指定内联框架的边框
音视频
audio标签 用来向页面中引入一个外部的音频文件 引入时默认情况下不允许用户自己控制播放停止 controls属性 是否允许用户播放 autoplay 音频文件是否自动播放但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop循环播放
source也可指定文件
video标签引入视频文件 使用方式和audio基本一样
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
