HTML基础
HTML不分大小写
1.HTML概述
HTML(HyperText MarkUp Language)“超文本标记语言”，他是制作网页的标准语言
1.1 标签——元素
由尖括号包围，比如
开始标签 内容 结束标签
单独出现的标签：
1.2 标签——嵌套
——正确
——错误
HTML语言中规定标签一定得有正确的嵌套关系，且要注意缩进，类似python。
标签嵌套关系可以用HTML DOM树表示.
1.3 标签——属性
上面这句代码中有 src属性和alt属性两个属性。
一个标签可能由多个个属性，属性的先后顺序无关
2.文件
2.1 23文件结构
——————————
——————————
在最外层有一对标签，表示此部分由html来规范
头部信息：浏览器、搜索引擎所需要信息，会出现在网页标题(标签)栏里 主体部分：网页中包含的具体内容2.2 HTML 编辑器
记事本 / Sublime Text3 / Webstorm
2.3 HTML5 的文件结构
——————————————
—————————————
增加部分：
表示当前文档类型符合HTML5标准
lang 属性：搜索引擎 —— en英文 zh中文
：元数据（作者，关键字等等数据）
charset属性：字符集编码方式——浏览器UTF-8是国际编码
2.4 字符集与编码
字符(Character): 文字、符号——123 abc 一二三 !?$#
字符集(Charset): 字符的集合——英文字符集、汉字字符集、日文汉字字符集
编码：将字符和二进制码对应起来
编码方式： ASCII：数字、英文字母、符号进行了编码
GB2312：简体中文
Unicode：所有语言、占用空间较大
UTF-8：所有语言、占用空间较小
2.5 乱码问题
源文件保存时编码与源文件声明
3.HTML标签
3.1 标题标签h1~h6 一个页面建议只有一个h1
——————————————
一级标题 heading 1
二级标题 heading 2
三级标题 heading 3
四级标题 heading 4
五级标题 heading 5
六级标题 heading 6
这里是正文文字
——————————————
3.2 段落p
——————————————
这是段落，每个段落自动换行。
这是段落，每个段落自动换行。
这是段落，每个段落自动换行。 空格，
也不会显示空行， 且不会换行
——————————————
输出：
————————————————————————————
这是段落，每个段落自动换行。
这是段落，每个段落自动换行。
段落内部文字忽略连续 空格， 也不会显示空行，且不会换行
————————————————————————————
空行和多个连续空格在段落内部都会只生成一个空格
3.3 段内换行
为单独出现的标签，直接结束
读到
标签自动换行，类似于\n
3.4 空格字符
为特殊字符，全小写
——————————————————————————————
段落内部文字忽略连续 空格，
也不会显示空行，且不会换行
——————————————————————————————
输出：
——————————————————————————————
段落内部文字忽略连续 空格，
也不会显示空行，且不会换行
——————————————————————————————
3.5 预留格式pre
定义预格式化的文本，在pre标签内部，所有内容都会被保留源格式。
——————————————————————————————
这是预留格式文本 它保留了 空格
和空行
pre 标签很适合显示计算机代码
for i=1 to 10
print i
next i
——————————————————————————————
3.6 行内组合span
组合行内元素，以便通过CSS样式来格式化
——————————————————————————————
最新中国人口调查报告显示显示
——————————————————————————————
3.7 水平线
——————————————————————
正文段落
正文段落
——————————————————————
3.8 注释内容标签
——————————————————————
——————————————————————
分类：
链接到本站点的其他网页：
链接到其他站点的网页：
虚拟超链接：
板块2 ——还没设置好超链接时用虚拟超链接替代
举例：
【index.html】
——————————————————————————
首页
导航
新闻
科技
问问百度
————————————————————————————
【news.html】
———————————————————————————————
新闻板块
————————————————————————————————
【technology.html】
—————————————————————————————————————
科技板块
——————————————————————————————————————
3.10 图像
3.10.1 图像格式
常见图像格式有：JPG，PNG，GIF
JPG：有损压缩的图像格式，支持色彩丰富的图片
GIF ：简单动画背景透明
PNG: 无损压缩，透明、交错、动画
3.10.2 插图图像
img标签有两个重要属性：src属性 、 alt属性
src属性：图像路径+文件名
alt属性：当图像由于某种原因未打开时，图像的替换文本
3.10.3 绝对路径与相对路径
绝对路径：以根目录为基准
相对路径：以该文档所在位置为基准src="logo.gif" />
同级文件夹中：src="images/logo.gif" />
上级文件夹中：src="../logo.gif" />
3.11 区域div
——————————————
web 前端开发
HTML
CSS
JavaScript
——————————————
3.12 列表
3.12.1 无序列表
可以将多个超链接变成列表项，存储为无序列表。
————————————————————————————————
Web 前端开发
————————————————————————————————
3.12.2 有序列表
例如排行榜，有些地方先后顺序很重要，故采用有序列表
————————————————————————————————
web 前端开发
- HTML
- CSS
- JS
————————————————————————————————
3.13 表格 table tr td th
以表格的方式呈现信息
table——表 tr——表格行 td——普通单元格 th——表头单元格
————————————————————————————————
| red | yellow |
| blue | green |
————————————————————————————————
3.14 表单与表单元素
表单：是一个区域，用于采集用户信息
表单元素：文本框、按钮、单选、复选、下拉列表、文本域
3.14.1 表单
action属性：表示收集来的数据交于哪个网页处理（后端范畴）
————————————
————————————
3.14.2 文本框、密码框input
text与password的区别： text明文显示，password则是用星号显示
name属性为信息地址
——————————————————————————————
——————————————————————————————
3.14.3 按钮 input——
按钮：提交按钮、重置按钮
type：提交按钮——submit 重置按钮——reset
value：按钮表面的文字
——————————————————————————
——————————————————————————
3.14.4 单选框、复选框input——radio checkbox
单选框：只能选则一项 复选框：任意选择多项
type：单选框——eadio 复选框——checkbox
value：表示要提交到后端的数据
name：当前这一项的名称（单选框name值相同，复选框name值不同）
checkd：当前这一项是否被默认选择，一般为第一项
——————————————————————————————————
——————————————————————————————————
3.14.5 下拉列表框 selected option
selected="selected" 即为被选择的一项
——————————————————————
——————————————————————
3.14.6 文本域 Textarea
——————————————————————————————————
——————————————————————————————————
4. web语义化
4.1 概述
Web语义化：让页面具有更好的结构与含义，从而让人和机器都能快速理解网页内容
优点：1.结构清晰，利于团队的开发、维护
2.有利于搜索引擎理解
3.SEO(Search Engine Optimization) 搜索引擎优化
4.容易兼容不同设备。
4.2 em strong 均成对使用
= : emphasize 斜体
= ：strong 加粗
4.3 dl，dt，dd
————————————————
- HTML
- 超文本标记语言
- CSS
- 层叠样式表
————————————————
输出：
————————————————
HTML
超文本标记语言
CSS
层叠样式表
————————————————
5. sublime 快捷键
alt+shift+2 分成两屏
alt+shift+1 回到单屏
ctrl+s 保存
ctrl+/ 注释
ctrl+shift+/ 取消注释
按下ctrl单击多处，可以多处同时编辑
配合Tab快捷键：
！ HTML5文件结构
p*4 四个段落
> 嵌套
ul>li*n 快速生成无序列表
table>tr*m>td*n 生成m*n的表格
p{段落内容} 生成含内容的段落