html是web前端的基础知识，初学者们真的学对了吗？
tml
- 概念
- 前端最核心的技术 HTML + CSS + javascript
- HTML - 结构 - 骨架
- CSS - 样式 - 效果
- JAVASCRIPT - (用户)行为 - 做的事情
- 超文本标记语言
- 超文本
- 文本(txt文件) - 浏览器可以直接打开
- 如果具有中文，可能出现乱码问题
- 标记
- 语法结构 - <标签名>
- 注意 - 浏览器解析标记（规定的标记内容）
- 注意
- HTML是不严格的语言
- 允许不用编写所有内容
- 标签名没有明确的规定(大小写)
- 建议标签名使用小写
- XHTML
- 解释为严格意义的HTML
HTML结构
HTML结构
<!DOCTYPE html> - 声明:当前页面使用的是哪个HTML版本
<html lang="en">- 根标签:有且仅有一个
<head>- 用于设置当前页面的信息
<meta charset="UTF-8"> - 设置当前页面的编码
<title>Title</title> - 当前页面的标题
</head>
<div>- 用于显示在浏览器中
</div>
</html>
声明
- 注意 - 必须在HTML文档的 0 行 0 列
- 记住 - HTML5的声明<!DOCTYPE html>
- 作用 - 告诉浏览器当前HTML页面使用的版本
- 不同的HTML版本支持不同的标记(标签)内容
根标签
- <html></html>
- 除声明以外，所有内容全部被包含在根标签中
- 注意 - 有且仅有一个
- 标记（标签）
- 起始标签 - 有开始，有结束
- 开始标签 - <标签名>
- 结束标签 - </标签名>
- 空标签 - 只有开始标签
- <br/>- 换行标签
- 注意 - 建议使用小写
<meta>元素
- 第一个作用 - 设置当前HTML页面的编码格式
- <meta charset="UTF-8">
- 第二个作用 - 设置当前HTML页面的关键字
- <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 第三个作用 - 设置当前HTML页面的描述(很少)
- <meta name="description" content="Free Web tutorials on HTML and CSS">
- 第四个作用 - 设置当前HTML页面的作者
- <meta name="author" content="King">
HTML属性
- 出现在标签中的开始标签中，而不是结束标签
- 格式
- 属性名=属性值
- 属性值 - 必须使用双引号包裹
HTML页面被搜索引擎抓取
- <title>元素 - 页面的标题
- <meta name="keywords">元素 - 页面的关键字
- <h1>元素 - 标题
分类
- 私有属性 - 当前标签独有的属性
- 标准属性 - 几乎所有标签都有的属性
- 事件属性 - 标准事件(了解)
HTML标题
- <h1> ~ <h6> - 从最大到最小
- 并不关心标题显示的效果 - 可以通过 CSS 完成
- 关心标题的 语义化
- 语义化 - 当前标签的含义
HTML列表
<ol>
<li></li>
</ol>
<ul>
<li></li>
</ul>
<dl>
<dt>列表名称</dt>
dd>列表项</dd>
</dl>
<a href="地址"></a>
链接元素<a>
- 作用
- 用于从当前页面跳转到另一个(指定)页面
- 实现锚点效果
- 实现回到顶部效果
- 实现发送邮件功能(了解)
- href="mailto:邮件地址"
- 路径(地址)
- 绝对路径 - 查找的开始位置是固定
- 相对路径 - 查找的开始位置是变化
- 在实际开发中，使用更多
- 完整的地址
- http:// localhost : 8080 /day02 #name
- 网络协议 IP地址 端口号 相对路径 锚点
- localhost - 等价于 127.0.0.1 - 表示本机
- 网络访问 - 通过互联网
- http://192.168.10.165:63342/D...
- file:///C:/0507/DAY02/CODE/00.html
C:07\DAY02\CODE>C:\0507\DAY02\CODE\00.html<.html
图片元素
- <img> - 空标签，没有结束标签
- 必要属性 - src属性
可选属性
HTML表格
- 概念 - 具有行和列（单元格）
- 行 - 表示水平方向（多个单元格）
- 列 - 表示垂直方向（多个单元格）
- HTML表格
- 表示为表格
- 作用
- 表格的语义化 - 配合 CSS 可以实现漂亮的表格效果
- 利用表格的行和列的概念 - 实现页面元素的布局
- HTML表单
- <form>标签
- 语义化 - 表示为表单
- 容器元素 - 浏览器中不会有任何显示效果
- 文件的编码格式 - UTF-8
- HTML页面的编码格式 - UTF-8
- <meta charset="UTF-8">
- 设置当前HTML页面的编码格式
- 在浏览器运行当前HTML页面时，告诉浏览器当前的编码格式
- 字符集
- 概念 - 存放所使用的所有的字符（汉字）
分类
- ANSI - 美国
- ISO-8859-1 - 欧洲
- GBK - 中国
- GB2312
- Unicode - 万国码
- UTF-8 - 主要使用
- UTF-16
- 计算机的存储方式
- 利用二进制方式 - 1和0
- 中国
- 存储 - 将汉字 "中国" 转换成 二进制 进行存储 - GBK
- 读取 - 将 二进制 转换成 "中国" 进行显示 - UTF-8
tml
- 概念
- 前端最核心的技术 HTML + CSS + javascript
- HTML - 结构 - 骨架
- CSS - 样式 - 效果
- JAVASCRIPT - (用户)行为 - 做的事情
- 超文本标记语言
- 超文本
- 文本(txt文件) - 浏览器可以直接打开
- 如果具有中文，可能出现乱码问题
- 标记
- 语法结构 - <标签名>
- 注意 - 浏览器解析标记（规定的标记内容）
- 注意
- HTML是不严格的语言
- 允许不用编写所有内容
- 标签名没有明确的规定(大小写)
- 建议标签名使用小写
- XHTML
- 解释为严格意义的HTML
HTML结构
HTML结构
<!DOCTYPE html> - 声明:当前页面使用的是哪个HTML版本
<html lang="en">- 根标签:有且仅有一个
<head>- 用于设置当前页面的信息
<meta charset="UTF-8"> - 设置当前页面的编码
<title>Title</title> - 当前页面的标题
</head>
<body>- 用于显示在浏览器中
</body>
</html>
声明
- 注意 - 必须在HTML文档的 0 行 0 列
- 记住 - HTML5的声明<!DOCTYPE html>
- 作用 - 告诉浏览器当前HTML页面使用的版本
- 不同的HTML版本支持不同的标记(标签)内容
根标签
- <html></html>
- 除声明以外，所有内容全部被包含在根标签中
- 注意 - 有且仅有一个
- 标记（标签）
- 起始标签 - 有开始，有结束
- 开始标签 - <标签名>
- 结束标签 - </标签名>
- 空标签 - 只有开始标签
- <br/>- 换行标签
- 注意 - 建议使用小写
<meta>元素
- 第一个作用 - 设置当前HTML页面的编码格式
- <meta charset="UTF-8">
- 第二个作用 - 设置当前HTML页面的关键字
- <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 第三个作用 - 设置当前HTML页面的描述(很少)
- <meta name="description" content="Free Web tutorials on HTML and CSS">
- 第四个作用 - 设置当前HTML页面的作者
- <meta name="author" content="King">
HTML属性
- 出现在标签中的开始标签中，而不是结束标签
- 格式
- 属性名=属性值
- 属性值 - 必须使用双引号包裹
HTML页面被搜索引擎抓取
- <title>元素 - 页面的标题
- <meta name="keywords">元素 - 页面的关键字
- <h1>元素 - 标题
分类
- 私有属性 - 当前标签独有的属性
- 标准属性 - 几乎所有标签都有的属性
- 事件属性 - 标准事件(了解)
HTML标题
- <h1> ~ <h6> - 从最大到最小
- 并不关心标题显示的效果 - 可以通过 CSS 完成
- 关心标题的 语义化
- 语义化 - 当前标签的含义
HTML列表
<ol>
<li></li>
</ol>
<ul>
<li></li>
</ul>
<dl>
<dt>列表名称</dt>
dd>列表项</dd>
</dl>
<a href="地址"></a>
链接元素<a>
- 作用
- 用于从当前页面跳转到另一个(指定)页面
- 实现锚点效果
- 实现回到顶部效果
- 实现发送邮件功能(了解)
- href="mailto:邮件地址"
- 路径(地址)
- 绝对路径 - 查找的开始位置是固定
- 相对路径 - 查找的开始位置是变化
- 在实际开发中，使用更多
- 完整的地址
- http:// localhost : 8080 /day02 #name
- 网络协议 IP地址 端口号 相对路径 锚点
- localhost - 等价于 127.0.0.1 - 表示本机
- 网络访问 - 通过互联网
- http://192.168.10.165:63342/D...
- file:///C:/0507/DAY02/CODE/00.html
C:07\DAY02\CODE>C:\0507\DAY02\CODE\00.html<.html
图片元素
- <img> - 空标签，没有结束标签
- 必要属性 - src属性
可选属性
HTML表格
- 概念 - 具有行和列（单元格）
- 行 - 表示水平方向（多个单元格）
- 列 - 表示垂直方向（多个单元格）
- HTML表格
- 表示为表格
- 作用
- 表格的语义化 - 配合 CSS 可以实现漂亮的表格效果
- 利用表格的行和列的概念 - 实现页面元素的布局
- HTML表单
- <form>标签
- 语义化 - 表示为表单
- 容器元素 - 浏览器中不会有任何显示效果
- 文件的编码格式 - UTF-8
- HTML页面的编码格式 - UTF-8
- <meta charset="UTF-8">
- 设置当前HTML页面的编码格式
- 在浏览器运行当前HTML页面时，告诉浏览器当前的编码格式
- 字符集
- 概念 - 存放所使用的所有的字符（汉字）
分类
- ANSI - 美国
- ISO-8859-1 - 欧洲
- GBK - 中国
- GB2312
- Unicode - 万国码
- UTF-8 - 主要使用
- UTF-16
- 计算机的存储方式
- 利用二进制方式 - 1和0
- 中国
- 存储 - 将汉字 "中国" 转换成 二进制 进行存储 - GBK
- 读取 - 将 二进制 转换成 "中国" 进行显示 - UTF-8
打算深入了解这个行业的朋友，可以私信我“前端” ，不论你是学生还是想转行的朋友，我都欢迎，不定期分享干货，整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家
TTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。。
HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。
HTTP 工作原理
HTTP协议工作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。
Web服务器有：Apache服务器，IIS服务器（Internet Information Services）等。
Web服务器根据接收到的请求后，向客户端发送响应信息。
HTTP默认端口号为80，但是你也可以改为8080或者其他端口。
HTTP三点注意事项：
HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
以下图表展示了HTTP协议通信流程：
