一、HTML基础
1.什么是HTML
HTML（Hyper Text Markup Language)，超文本标记语言
超文本：比文本更强大，通过链接和交互式方式来组织和呈现信息的文本形式，不仅仅有文本，还可能包含图片，音频，或者已经审阅过它的学者所加的批注，补充或者脚注等。
标记语言：由标签构成的语言
HTML的标签都是提前定义好的，使用不同的标签，表示不同的内容。
2.HTML标签
HTML代码是由“标签”构成的，
形如：
标签名（body）放到<>中，
大部分标签成对出现，<h1>为开始标签，</h2>为结束标签
少数标签只有开始标签，称为“单标签”
开始标签和结束标签之间，写的是标签的内容
开始标签中可能带有‘“属性”，id属性相当于给这个标签设置了一个唯一的标识符。
<h3 id="myId">我是三级标题</h3>
3.HTML文件基本结构
a)html标签是整个html文件的根标签（最顶层标签）
b)head标签中写页面的属性
c)body标签中写的是页面上显示的内容
d)title标签中写的是页面的标题
4.标签层次结构
1.父子关系
2.兄弟关系
其中：
head和body是html的子标签（html就是head和body的父标签）
title是head的子标签，head是title的父标签
head和body之间是兄弟关系
可以使用浏览器的开发者工具查看页面的结构
F12或者右键审查元素，开启开发者工具，切换到Elements标签，就可以看到页面结构细节。
标签之间的结构关系，构成了一个DOM树
DOM是Document Object Mode（文档对象类型）的缩写
二、HTML快速入门
1.开发工具
VIsual Studio Code（简称“VS Code”），可以运行在Windows，macOS和Linux上。
2.快速开发
在VS Code中创建文件 xxx.html，直接输入！，按Enter或者tab键，此时能自动生成代码的主体框架。
<!DOCTYPE html>称为DTD（文档类型定义），描述当前的文件是一个HTML5的文件
<html lang="en">其中lang属性表示当前页面是一个“英语界面”，（有些浏览器会根据此处的声明提示是否进行自动翻译）。
<meta charset="UTF-8">描述页面的字符编码方式，没有这一行可能会导致中文乱码。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
name="viewport"其中viewport指的是设备的屏幕上能用来显示我们网页的那一块区域。
content="width=device-width, initial-scale=1.0"在设置可视区和设备宽度等宽，并设置初始缩放为不缩放。
在<body></body>标签中，任意书写文字，按Ctrl + s 保存文件，通过浏览器访问即可，如：
浏览器运行结果如下：
3.HTML常见标签
3.1标题标签h1-h6
共有六个，从h1-h6，数字越大，则字体越小。
3.2段落标签：p
在HTML中，段落，换行符，空格都会失效，如果需要分成段落，需要使用专门的标签
p标签表示一个段落
注意：
p标签描述的是段落，前面没有缩进
自动根据浏览器宽度来决定排版
html内容首尾处的换行，空格均无效
在html中文字之间输入的多个空格只相当于一个空格
html中直接输入换行不会真的换行，而是相当于一个空格
3.3换行标签：br
br是break的缩写，表示换行。
br是一个单标签（不需要结束标签）
br标签不像p标签那样带有一个很大的空隙
<br/>是规范写法，不建议写成<br>
展示结果：
<br>标签和<p>标签的区别：
3.4图片标签：img
img标签必须带有src属性，表示图片的路径。
此时要把33svan.jpg这个图片文件放到和html中的同级目录中。
img标签的其他属性
width/height：控制宽度高度，高度和宽度一般改一个就可以，另外一个会等比例缩放。否则就会使图片失衡，
border：边框，参数是宽度的像素，但是一般使用CSS来设定。
注意：
1.属性可以有多个，不能写到标签之前
2.属性之间用空格分割，可以是多个空格，也可以是换行。
3.属性之间不分先后顺序
4.属性使用“键值对”的格式来表示
关于目录结构：
对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好。
1.相对路径：以html所在位置为基准，找到图片的位置。
同级路径：直接写文件名即可（或者./）
下一级路径：image/1.jpg
上一级路径：../image/1.jpg
2.绝对路径：一个完整的磁盘路径，或者网络路径，例如
磁盘路径 D：/33svan.jpg（最好使用/，不要使用\）
3.5超链接：a
href：必须具备，表示点击后会跳转到哪个页面
target：打开方式，默认是_self。如果是_blank则用新的标签页打开
4.表格标签
table标签：表示整个表格
tr：表示表格的一行
td：表示一个单元格
thead：表格的头部区域
tbody：表格的主体区域
table包含tr，tr包含td
5.表单标签
表单分为两个部分：
表单域：包含表单元素的区域，重点是form标签
表单控件：输入框，提交按钮等，重点是input标签
5.1 form标签
描述了要把数据按照什么方式，提交到哪个页面中。
5.2 input标签
各种输入控件，单行文本框，按钮，单选框，复选框
type（必须有），取值种类很多，button，checkbox，text，file，image，password，radio等
name：给input起个名字，尤其是对于单选按钮，具有相同的name才能多选一
value：input中的默认值
checked：默认被选中（用于单选按钮和多选按钮）
一些常用的类型：
1.文本框
2.密码框
3.单选框
注意：单选框之间必须具备相同的name属性，才能实现多选一效果。
4.复选框
5.普通按键
当前按钮点击无反应，需搭配JS使用
6.提交按钮
提交按钮必须放到form标签内
6. select标签
下拉菜单
option中定义selected=“selected”表示默认选中。
7. textarea标签
文本域中的内容，就是默认内容，空格也会产生影响。
8.无语义标签：div和span
div标签：division的缩写，含义是分割
span标签：含义是跨度
两者都用于网页布局
div是独占一行的，相当于一个大盒子
span不独占一行，相当于一个小盒子
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
