Html简单笔记（使用markdown写的）

Mike_python小 · 发表于 2020-3-26 10:58:54

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

# HTML 袁进讲：
Emmet插件:自动生成HTML代码
## 第一课
### 注释
注释是为代码的阅读者提供帮助,注释不参与运行
在html中,注释使用格式如下:
```html
```
### 元素
其他叫法：标签，标记
```html
<a href="http://www.baidu.com">百度</a>
```
整体：element（元素）
元素 = 其实标记（begin tag）+ 结束标记(end tag) + 元素内容 + 元素属性
属性 = 属性名 + 属性值
属性的分类:
- 局部属性：某些元素特有的属性
- 全局属性：所有元素通用
```html
<meta charset="UTF-8">
```
有些元素没有结束标记，这样的元素叫做:**空元素**
空元素的两种写法：
1. ```<meta charset="UTF-8">```
2. ```<meta charset="UTF-8" />```
### 元素的嵌套
元素不能相互嵌套
父元素、子元素、祖先元素、后代元素、兄弟元素(拥有用一个父元素的两个元素)
### 标准的文档结构
HTML:页面、HTML文档
```html
<!DOCTYPE html>
```
文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5
不写文档声明，将导致浏览器进入怪异渲染模式。
```html
<html lang="en">
```
根元素，一个页面最多只能有一个，并且该元素是其他所有元素的父元素或祖先元素。
HTML5版本中没有强制要求书写该元素。
lang属性：language，是全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。(汉语：zh-CN(已过时), cmn-hans(现在的))
```html
<head>
</head>
```
文档头,文档头内部的内容，不会显示在页面上
```html
<meta>
```
文档的元数据：附加信息
charset:指定网页内容编码。
计算机中，低压电（0~2 V）0，高压电（2~5V) 1，表示2，使用10
计算机中，只能存储数字
文字和数字进行对应
比如：a —— 97， A —— 65
该字典叫做字符编码,GB2312,GBK
UTF-8是Unicode 编码的一个版本
```html
<title>Document</title>
```
网站标题
```html
<body>
</body>
```
文档体，页面上所有要显示的元素，都应该放在文档体
## 语义化
### 什么是语义化
1. 每一个HTML元素都有具体的含义
a元素：超链接
p元素：段落
h1：一级标题
2. 所有元素与展示效果无关
元素展示到页面中的效果，应该由CSS决定。
应为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。
**重要：选择什么元素，取决于内容的含义，而不是显示出的效果**
### 为什么需要语义化?
1. 为了搜索引擎优化（SEO）
搜索引擎：百度、搜狗、Bing、Google
每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码
2. 为了让浏览器理解网页
阅读模式、语音模式
## 文本元素
HTML5中支持哪些元素:HTML5元素周期表
### h
标题：head
h1~h6：表示1级标记~6及标记
### p
段落：paragraphs
> lorem，乱数假文，没有任何实际含义的文字
### span[无语义]
没有语义，仅用于设置样式
> 以前：某些元素在显示时会独占一行(块级元素)，而某些元素不会(行级元素)
> 到了HTML5，已放弃这种说法。
### pre[无语义]
预格式化文本元素
空白折叠：在源码中连续空白字符(空格、回车、制表),在页面显示时，会被折叠问空格。
例外：在pre元素中的内容不会出现空白折叠
在pre元素内部出现的内容，会按照源代码格式显示到页面上。
该元素通常用网页中显示一些代码。
pre元素功能的本质：他有一个默认的css属性
> 显示代码时，通常外面套code元素，code表示代码区域。
## HTML实体
实体字符，HTML Entity
实体字符通常用于在页面中显示一些特殊符号。
1. &单词;
2. &#数字;
- 小于符号
<
<
- 大于符号
>
- 空格
 
- 版权符号
©
©
- &符号
&
## a元素
超链接
### href属性
hyper reference(引用):通常表示跳转地址
1. 普通连接
2. 锚链接
id属性：全局属性，表示元素在文档中唯一的编号
3. 功能连接
点击后，触发某些功能
- 点击后触发Js代码，JavaScript:
- 发送邮件，mailto:
要求用户计算机上安装有邮件发送软件:exchange
- 拨号，tel:
要求用户计算机上安装有拨号软件，或使用的是移动端访问。
### target属性
表示跳转窗口位置。
target的取值：
- _self:在当前页面窗口中打开，默认值
- _blank:在新窗口中打开
## 路径的写法
### 站内资源和站外资源
站内资源：站钱网站的资源
站外资源：非当前网站的资源
### 绝对路径和相对路径
站外资源：绝对路径
站内资源：相对路径
1. 绝对路径
绝对路径的书写格式:
url地址:
```
协议名://主机名：端口名/路径
schema://host:port/path
```
协议名:http、https、file
主机名：域名、IP地址
端口号：如果协议是http协议，默认端口号80;如果协议是https协议，默认端口号为443
当跳转目标和当前页面的协议相同时，可以省略协议
2. 相对路径
以./开头，./表示当前资源所在的路径
可以书写../表示返回上一级目录
## 图片元素
### img元素
image缩写，空元素
src属性：source
alt属性：当图片资源失效时，将使用该属性的文字替代图片
### 和a元素联用
### 和map元素
map:地图
map的子元素：area
衡量坐标时，为了避免误差，需要使用专业的衡量软件
### 和figure元素
指代、定义，通常用于把图片、图片标题、描述包裹起来
子元素：figcaption
## 多媒体元素
video 视频
audio 音频
### video
controls:控制控件的显示，取值只能为controls
某些属性，只有两种状态：
1. 不写
2. 取值为属性名，这种属性叫做布尔属性
布尔属性，在HTML5里，可以不用书写属性值
autoplay：布尔属性,自动播放。
muted：布尔属性，静音播放。
loop：布尔属性：循环播放。
### audio
和视频完全一样
### 兼容性
1. 旧版本的浏览器不支持这两个元素
2. 不同的浏览器支持的音视频格式可能不一样
mp4、webm、mp3

复制代码

记得评分哟

Mike_python小 · 发表于 2020-3-27 12:08:59

呜呜呜咩有人

账号		自动登录	找回密码
密码			立即注册

[学习笔记] Html简单笔记（使用markdown写的）

马上注册，结交更多好友，享用更多功能^_^

点评

[学习笔记] Html简单笔记 （使用markdown写的）

马上注册，结交更多好友，享用更多功能^_^

点评

[学习笔记] Html简单笔记（使用markdown写的）