HTML学习笔记【1】
1 概述
1.1 HTML
- 【标签】构成了页面的结构，所有的标签也被称为【元素】
1.2 CSS
- 【样式】页面的样式，字体颜色，背景颜色，图片大小，对齐方式
- 有的样式可以通过HTML完成设置，这样不行🙅
- 开发网站基本原则：【结构】，【样式】和【逻辑】（Javascript）要分开
- 有一些样式通过CSS完成不了（如表格），此时要用HTML或者js取代。
1.3 Web前端
- 2000年以前：静态页面=HTML+CSS
- 2014年以后：H5 - Vue - React - Node:以前端代码构建后台
- 【全栈工程师】 30k
- 【纯前端工程师】 15-20k
- 【数据可视化】 （年薪）
2 发展历史
2.1 HTML的发展过程
- html1.0---4.01 比较简单，语法较为自由
- xhtml1.0 语法更严谨
- H5---至今 延续了4.01自由的语法，同时加入了canvas画图标签，使标签更丰富
2.2 网络结构的发展历程
- C/S结构 客户端📱
- B/S结构 页游 90%前端所在💻
3 HTML标签
3.0 什么是 HTML？
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
-
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
-
HTML 标签是由尖括号包围的关键词，比如
-
HTML 标签通常是成对出现的，比如 和
-
标签对中的第一个标签是开始标签，第二个标签是结束标签
-
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
- Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
【例子】
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
【例子解释】
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
3.1 标签结构
- <title（标签名称）abc="bbb"（标签属性）>123(标签内容，可以是文字，也可以是标签)
3.2 标签分类
- 双标签-成对出现
（必须带斜杠） - 单标签-单独出现
（可以不带斜杠） (单标签不可能有内容，但可以有属性)
3.3 标签嵌套
- 【典型问题】：交叉嵌套
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=1">
<title>应用列表</title>
</head>
【解决办法】：双标签成对键入，避免后面找不到入口
3.4 注释
- 快捷键 【ctrl+?】
- 给自己和协作程序员看🐒
3.5 页面基本结构
<!DOCTYPE html> 【网页声明】宣示主权，说明解析规则：“以下代码遵循H5规则。”
<html> 【网站开始】最外一层，包含网页代码的所有内容
<head> 【网页头文件】
<meta charset="utf-8"> 【编码格式】规定编码格式"utf-8":主要针对页面上的中文-对应大部分网页的**解码格式**
<meta name="Keywords" content="..."> 【网页关键词】免费，与**网页标题**有共同的SEO的功能，针对搜索引擎
<title></title> 【网页标题】选项卡上的网页标题
</head>
<body> 【网页主体】浏览器可视区域
</body>
</html>
3.6 body标签
- 网页主体，标签包裹的内容会出现在网页上
- 属性：
-
- text="red" 文本颜色（当不设置时，默认是黑色）
-
- bgcolor="yellow" 背景颜色
3.7 h1-6标题标签
- 标题具有SEO权重，从1~6逐次递减:大小、粗细、SEO权重
- 标题只有一个属性-[align]：left/center/right 默认值：左对齐
<h1>1级标题</h1> 一个网页上只能有一个h1标签
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
3.8 p段落标签
- 包含一段文字（图片可以放，但不规范）
- 有默认的外边距
- 字体没有特殊样式
- 段落也只有一个属性-[align]：left/center/right 默认值：左对齐
3.9 br/hr换行与分割线
<br /> 换行
<hr /> 换行+分割线
- 分割线的属性:
-
color="red" 默认：灰色 -
width="200px" 默认：占满一整个屏幕 如果想要看到居中效果，就不占满屏幕 -
align="left/center/right" 默认：居中 -
size="2px"分割线的粗细
