唯有热爱，恒常如新一、HTML基础

1.什么是HTML

HTML（Hyper Text Markup Language)，超文本标记语言

超文本：比文本更强大，通过链接和交互式方式来组织和呈现信息的文本形式，不仅仅有文本，还可能包含图片，音频，或者已经审阅过它的学者所加的批注，补充或者脚注等。

标记语言：由标签构成的语言

HTML的标签都是提前定义好的，使用不同的标签，表示不同的内容。

2.HTML标签

HTML代码是由“标签”构成的，

形如：

标签名（body）放到<>中，

大部分标签成对出现，

为开始标签，

为结束标签

少数标签只有开始标签，称为“单标签”

开始标签和结束标签之间，写的是标签的内容

开始标签中可能带有‘“属性”，id属性相当于给这个标签设置了一个唯一的标识符。

我是三级标题

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键，此时能自动生成代码的主体框架。

称为DTD（文档类型定义），描述当前的文件是一个HTML5的文件

其中lang属性表示当前页面是一个“英语界面”，（有些浏览器会根据此处的声明提示是否进行自动翻译）。

描述页面的字符编码方式，没有这一行可能会导致中文乱码。

name="viewport"其中viewport指的是设备的屏幕上能用来显示我们网页的那一块区域。

content="width=device-width, initial-scale=1.0"在设置可视区和设备宽度等宽，并设置初始缩放为不缩放。

在标签中，任意书写文字，按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标签那样带有一个很大的空隙

是规范写法，不建议写成

展示结果：

标签和

标签的区别：

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不独占一行，相当于一个小盒子