HTML学习

1、HTML

超文本（链接）标记（标签：带尖括号的文本）语言

2、标签语法

成对出现，中间包裹内容；<>里放英文字母（标签名）；结束标签比开始标签多/

双标签：成对出现的标签

单标签：只有开始标签，没有结束标签  eg：<br>:换行   <hr>:水平线

3、HTML基本骨架

HTML基本骨架是网页模板

html：整个网页

head：网页头部，存放给浏览器看的代码

body：网页主体，存放给用户看的代码

title：网页标题

快速生成骨架：在HTML文件中，！（英文）配合Enter/Tab键

4、标签的关系

作用：明确代码的书写位置

父子关系（嵌套关系）

兄弟关系（并列关系）

向后缩进：Tab

向前缩进：Shift 和Tab

5、注释

<!--...-->

添加或删除注释的快捷键：Ctrl 加 /

6、标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等

标签名：h1~h6（双标签）

特点：文字加粗、字号逐渐减小、独占一行

h1标签一个网页中只能用一次，用来存放新闻标题或网页logo

h2~h6没有使用次数的限制

7、段落标签

用在新闻段落、文章段落、产品描述信息等

标签名：p（双标签）

特点：独占一行、段落之间存在间隙

8、换行与水平线标签

换行：<br> （单标签）

水平线：<hr> （单标签）

9、文本格式化标签

为文本添加特殊格式，突出重点

常见的文本格式：加粗、倾斜、下划线、删除线等

strong：加粗                    b：加粗

em：倾斜                          i：倾斜

ins：下划线                      u：下划线

del：删除线                      s：删除线

strong、em、ins、del 自带强调含义

10、图像标签

1）基本使用

作用：在网页中插入图片

<img src="图片的URL">   src用于指定图像的位置和名称，是<img>的必须属性

scr以./开头，VS Code有提示功能 

2）属性

alt         替换文本     图片无法显示的时候显示文字

title        提示文本     鼠标悬停在图片上面的时候显示文字

width     图片的宽度  值为数字，没有单位

height   图片的高度      值为数字，没有单位

属性名="属性值"

属性卸载尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

11、路径

查找文件时，从起点到终点经历的路线

相对路径：从当前文件位置出发查找目标文件

       /  表示进入某个文件夹里面                文件夹名字/

       . 表示当前文件所在文件夹                 ./

       ../表示当前文件夹的上一级文件夹

绝对路径：从盘符出发查找目标文件

<img src="C:\images\mao.jpg">

12、超链接

作用：点击跳转到其他页面

herf属性值是跳转地址，是超链接的必须属性

跳转到本地文件，相对路径查找就可以

上面的方式是本窗口继续打开了，如果想用新窗口打开，可以添加target="_blank"

小经验：开发初期，不知道超链接的跳转地址，herf属性值写 # ，表示空链接，不会跳转

13、音频标签

14、视频标签

15、列表

列表作用：布局内容排列整齐的区域

列表分类：无序列表、有序列表、定义列表

无序列表定义：布局排列整齐的不需要规定顺序的区域

                        ul 嵌套 li    ，ul是无序列表，li是列表条目

有序列表作用：布局排列整齐的需要规定顺序的区域

                        ol嵌套li，  ol是有序列表，li是列表条目

注意：ol标签里面只能包裹li标签

          li标签里面可以包裹任何内容

定义列表：

              dl嵌套dt 和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情

注意：dl里面只能包含dt和dd

           dt和dd中可以包含任何内容

16、表格

网页中的表格与excel类似，用于存放数据

th即表头单元格默认居中、加粗

网页中，表格默认没有边框线，使用border属性可以为表格添加边框线

17、合并单元格

跨行合并、跨列合并

步骤：

18、表单

作用：收集用户信息

使用场景：登陆页面、注册页面、搜索区域

input标签基本使用