Web前端小白必看【网页开发工具/HTML常用标签】

一、网页开发工具vscode的使用

1.1常见的网页开发工具：

VScode，DW,等

1.2vscode为例创建网页文件。

步骤：

• 1 创建文件(ctrl + n)

• 2 创建后先保存一下(ctrl +s)，文件后缀设为html

• 3 输入一个！，选择第一个（或者TAB键）就会出现制作网页的骨架标签

4 利用插件（open in brower)在浏览器中预览预览网页（open in defaultborows)：快捷键 alt加b

1.3vscode网页制作相关插件安装

1. auto rename tag插件，一对标签前后如果需要更改会同时更改(配对更改)。
2. 如何删除插件：找到对应插件卸载就行。

1.4vscode出现的网页骨架标签

1. ：文档类型声明标签

作用是告诉浏览器使用的html的版本，不是html标签

2. ：指出当前网页显示的语言（lang是language的缩写）

注意：对于文档的显示，定义成英文（en)时也可以显示中文，定义成中文时也可以显示英文。
中国人，用zh-Cn更好

3.meta charset =“utf - 8”

注意：这三种标签一定要写，否则可能会出现乱码的情况。一般情况下，统一使用万国码 “UTF-8".
4.中间的几行标签：

这两行用于移动端开发，暂时不用管。

二、路径的理解和认识：

（1）目录文件夹：
实际工作中，文件不能随便乱放，需要一个总的文件夹去管理，这个文件夹称为目录文件夹。

目录文件夹就是普通文件夹，里面存放相关素材（文件，图片。。。）

（2）根目录：
打开进入目录文件夹的第一层就称为根目录
C:\Users\86137\Desktop\Web文件（目录文件）

通过学习了目录文件夹喝根目录这两个概念，就可以不再像之前那样每次新建一个html文件了

我们可以选择一个文件（我就以D盘中的网页设计为文件夹）作为目录文件夹，里面的文件包括图片和html文件的位置称为根目录。
此后，要在目录文件夹里面创建一个htm文件就变得简单（只需要在左侧点击命名就自动保存到目录文件夹当中去了），而图片是在目录文件内部的，可以随时调用
这样做的好处：后期方便管理文件

打开目录文件夹的两种方式：

1 左侧文件处点击

2 直接拖动到VScode上

两种路径：相对路径和绝对路径

相对路径：

以引用的hyml文件所在的位置作为参考基准，建立出图片的目录路径。**

同一级相对路径：只需要将图像的名字直接搞到src属性中

下一级路径的使用：使用符号” / “

上一级路径的使用：使用符号” …/ “

总结：都是图片相对于html网页文件的路径

绝对路径：

（1）本地的图片：绝对路径从盘符开始，一下到底的图片的位置，是找的图片在该电脑中具体的位置

（2）还有另一种绝对路径，是从网络中找的图片（非本地的图片）

注意：绝对路径斜杠向右，相对路径斜杠向左

不管是相对路径还是绝对路径，都是为了找到照片的位置

二.HTML常用标签

引入：首先，html的标签有很多，要想更好的记住相应标签的作用，最好的方法时理解标签的含义。

1.标题标签:h(n)

有h1-h6共六级标题，h是head的缩写。

• h1 双标签为 一级标题

标签语义：作为标题使用，按照重要性递减

注意点：每个标题占一行，字号逐渐递减，重要性逐渐递减（一级标题最为重要）

2.段落标签：p

• 使用： p双标签，双标签之间为段落的内容

• 特点：
  （1）文本会根据浏览器窗口自动换行
  （2）段落与段落之间有空间分割，且相较于换行标签比较大

3. 换行标签：br

• 作用：进行强制换行，break row的缩写,是单标签
  特点：（1）单标签 （2）与段落之间的距离大小不同，相较于段落执教的空间更小

4.四个文本格式化标签：加粗，斜体，删除线，下划线

• (1)文字加粗标签：

最好使用

• (2)文章斜体标签：

推荐使用em标签

• (3)删除线标签：

或者

推荐使用del

• (4)下划线标签：

ins双标签
或者
u双标签

推荐使用ins标签

标签语义：突出文字的重要性，比普通文字更重要

5.盒子标签：div和span

相同点：两者都没有语义,都是是一个盒子，用来装内容（用于布局）

div是division的缩写，表示分割

span表示跨度，跨距

注意：
一行只能放置一个div标签，可以理解为超大盒子
一行可以显示多个span标签，小盒子

6.图像标签：img

（1）如何在网页中插入图像：img单标签：image的缩写

语法：

src是img标签的必须属性**（必须要有），指定文件的路径及文件名**

属性：顾名思义，属于图像的特性

想要让一个图片放到某个网页，则最好是将该网页文件和图片放到同一路径下

（2） 图像标签的属性：

alt属性：替换文本（图像无法显示时候会显示替换文本）

title属性:提示文本，鼠标放到图像上时会出现的提示文字

width属性：给图像设定宽度

highth属性：给图像设定高度

注意：width属性和highth属性一般这两个只修改一个，另一个会自动等比例缩放，单位是像素

border属性:设定黑色的边框

（3）图像标签的注意点:

1 所有属性都必须写到标签名img的后面

2 属性不分先后顺序 ，属性之间空格分隔

3 采用键值对的格式（属性=“属性值”）

7.超链接标签（重点）：a

双标签a 定义超链接标签，作用是跳转另一页面,a是anchor的缩写，意为锚

1 超链接语法格式：

《 a href=“目标链接的url” target=“目标窗口的弹出方式” 》文本或者是图片《/a》

这个地方用书名号代替尖括号

属性1（必须属性）：href属性，用于指定目标链接的url（网址），只有有了herf属性文字或者图片才具有超链接的功能

属性2：target属性 ，用于指定窗口的打开方式，_self为默认值（在当前窗口打开，当前的窗口被覆盖），_blank为在新窗口（空白的）中打开（原来的不会被覆盖）页面

链接的分类：外部，内部，空，下载，网页元素，锚点

(1) 外部链接：

在href属性中必须使用http：// + 外部网址

( 2) 内部链接：页面之间的相互链接

使用方法：直接在href属性中输入同一目录文件夹下的另一.html网页文件

( 3) 空链接：

暂时没有确定链接目标，可以先使用#来代替

(4) 下载链接：

如果href中的url是一个可执行文件或者压缩包，会下载/压缩这个文件

( 5) 网页元素链接：
网页中的各种网页元素如文字，图像，表格，音频（录音），视频，都可以添加超链接（把各种网页元素都可以当作是文字）

(6) 锚点链接：

作用：点击链接时候可以快速跳到到该页面的某个位置

设置步骤：

1 在链接文本的href属性中，设置属性值（value)设置为为**#名字**，

2 然后找到目标位置,对应标签里面添加一个id属性=“刚才设置的名字”

8 .注释标签：《！-- 注释–》

注释：便于阅读和理解代码的作用，给程序员看的，不会执行。

html中的注释以 结束

快捷键：ctrl加/

特殊字符的表示：

一些特殊符号无法直接使用，可以使用下面的字符代替

重点记住的空格，大于，小于

http://是超文本传输协议，规定了浏览器和浏览器服务之间通信的规则，能后准确的保证用户请求到达客户端。

9. 表格标签：table,tr,td,th,thead,tbody,

表格的作用：展示数据，使数据可读性更强

各种表格标签：

• table双标签用于定义表格

• tr双标签定义表格中的行（放到table标签中）

• td双标签定义表格中的单元格

• teble data指的单元格中的数据
  三者为嵌套的父子关系

1 表头单元格标签：th

表头单元格也是单元格，一般位于表格中第一行或者第一列，相较于td标签的特点是文本加粗:th标签（table head的缩写）

表示html表格的表头部分：居中，加粗

2 表格属性：要写到table标签中

表格标签属性实际开发不常用，通过CSS设置

学习表格属性的目的：记住这些单词，后边CSS会使用 并且直观感受

• align属性：对齐方式

• width/highth属性：设置表格的宽或高

• border属性：设置边框（文字外），0表示不设边框，1表示设边框

• cellpadding属性：设置单元格的边和内容之间的距离，默认1pixel

• cellspacing属性：设置单元格之间的距离，默认2pixel

使用时一般都将他们设置为0
3. 表格结构标签：thead

thead标签表示表格的头部区域（表头区域，范围相对于th更广），其内部必须有tr行标签
作用：使结构更清晰
tbody为表格的主体部分，用于存放数据

注意：两者都是放在table标签之中

4 合并单元格：把多个单元格合并为一个

（1）合并单元格的方式：

跨行合并：上下合并，涉及两行；rowspan

跨列合并：左右合并，涉及两列;colspan

(2)目标单元格：

跨行合并：最上侧为目标单元格

跨列：最左侧的单元格为目标单元格

合并单元格的三步：
1 确定是跨行还是跨列

2 找到目标单元格，写出代码 合并方式=合并的单元个数量

3 删除多余的单元格

4 表格总结：三部分

表格相关标签：table，tr,td,th,thead,tbody,

表格相关属性:align，border,cellpadding,cellspacing,width

合并单元格

10.列表标签:ul,ol,li,dl,dd,dt

表格用来展示数据，列表用来布局，特点是整齐，有序。

三类：无序列表，有序列表，自定义列表

1 无序列表：ul,li,

ul标签表示无序列表，一般以项目符号呈现列表项，列表项使用li标签定义(ul标签里包含若干li)

(1) 若干个列表项没有顺序之分，是并列的

(2 )ul标签中只能放li（规定）

(3) li相当于一个容器，啥都能放

(4 ) 无序列表带有自己的样式（每个列表项前面会有个小黑点），实际使用过程中，会使用CSS来设置。

2 有序列表：ol,li

各个列表项需要按照一定的顺序排列定义

ol标签来定义有序列表，li标签来定义列表项

注意：

1 ol标签中只能放li标签

2 li之间啥都能放

3 有序列表也带有自己的样式属性，实际使用过程之中会使用CSS来对其设置。

3 自定义列表：dl,dd,dt
由三组标签组成

常用于对属于名词进行解释描述，定义列表的列表项前没有任何项目符号

dl标签用于自定义列表，作用是给出一个大的空间

dt标签和若干dd标签

dt标签给出一个名词，多个dd标签对dt标签中的名词进行解释

(1) dl里面只能包含dt和dd

(2) dt和dd个数没有限制，通常一个dt对应多个dd

(3) dt和dd是并列关系

列表标签的总结：

无序列表：ul标签，里面只能放li

有序列表：ol标签，里面只能放li(了解)

自定义列表：dl标签，里面只能放dt和dd

目标：

什么时候使用无序，什么时候用有序列表

无序列表和自定义列表的代码怎么写

列表布局在学完CSS后整

11.表单标签：input,label,select，textarea

什么是表单？比如这个世纪佳缘网的用于统计用户信息的东西，这就叫表单。

虽然但是，谈恋爱还是需要考虑清楚的。

为什么需要表单？
为了收集用户信息

表单的组成：
（1）表单域（表单的范围）
（2）表单元素
(3）提示信息

表单域：包含表单元素的一个区域，作用是收集用户信息并传递给服务器

form标签定义表单域

form标签常用属性：（了解）

action：指定接收数据处理数据的服务器

method:设置提交表单数据的方式

name：指定表单域的名字

表单元素：
表单元素就是允许用户在表单中输入/选择的内容元素。

一 input输入表单元素标签：

input是单标签。必须包含一个属性type，属性值可以是多种形式

type属性值：不同的type值会显示不同的表单形态

submit属性：将表单域中所有的值发送给服务器

reset属性：重置（初始化）表单域中的元素

button属性：非提交数据的按钮，执行某项活动（一般与JS搭配使用）

file属性：用于上传文件

• input表单元素除了type属性，还有的属性：

name属性:定义input元素的名称，用来区别不同的表单元素，值是自定义的
value:定义表单中元素的值：打开网页默认显示文字，显示主要针对后端人员使用
checked：规定网页首次打开时为选中状态选中，值与属性名相同
maxlength:规定输入字段中字符最大长度

注意：

1 name和value是每个表单元素都有的属性值，主要为后端使用

2 name是表单元素的名字，注意单选框和复选框（多选框）要有相同的name值。

3 checked属性针对单选框和复选框，作用是打开某一网页默认选择某个表单元素。

4 maxlength限制输入最多字符数，不常用

二： label标签：标注标签

和input标签搭配使用，为input捆绑表单元素，增加用户体验

核心：label标签属性for的值和input表单元素中的id属性值相同

三 .select下拉表单元素标签：

select:页面中有多个选择，节约页面空间，使用select标签元素定义下拉列表

语法：

至少包括一对选项，option中定义selected，可以设置默认选项（类似出checked属性）

四. 文本域标签：textarea

使用场景：适用于多行输入文本，内容量较大。

语法：

注：

提前写好的文本域内容会在网页中显示

通过文本域标签可以实现多行文本输入