星辰大海1412
星辰大海1412

HTML 从入门到进阶（黑马 ）

目录

HTML简介

HTML语法规范

VS Code 工具生成骨架标签新增代码 

（1）文档类型声明标签

（2）lang语言

（3）字符集

HTML 常用标签

（1）标题标签 

（2）段落和换行标签

（3）文本格式化标签

（4）div和span标签

（5）图像标签和路径

（6）超链接标签

（7）注释标签：

特殊字符

 （8） 表格标签

1️⃣表头单元格标签

2️⃣表格属性

3️⃣表格结构标签

4️⃣合并单元格

 （9）列表标签

①无序列表

②有序列表

（10）自定义列表

（11）表单标签

（1） 表单域：

（2）表单控件（表单元素）

（3）label标签

（4）select选择标签

（5）表单元素

HTML简介

HTML是超文本标记语言（Hyper Text Markup Language ), 用来描述网页的一种语言。并非是编程语言，而是一种标记语言（即是一套标记标签）。

（1）超文本即

1.可加入图片，声音，动画，多媒体等内容 (超过了文本限制)
2.可加入一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文件) 

（2）游览器内核：读取网页内容，整理讯息，计算网页的显示方式并显示页面

HTML 从入门到进阶（黑马 ）_第1张图片

 

（3）Web标准

构成：结构、表现、行为

标准 说明
结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为 行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

最佳体验方案：结构、样式、行为相分离，即结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

HTML语法规范

（1）基本语法概述

1️⃣HTML标签   单 / 双 标签

1. HTML标签是由尖括号包围的关键词，例如.
2.HTML标签通常是成对出现的，例 和，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。

3.有些特殊的标签必须是单个标签(极少情况)，例如
，我们称为单标签。

2️⃣标签关系：包含 / 并列关系（ 父子 / 兄弟关系 ）

包含关系：

并列关系：

（2）基本结构标签

骨架标签：页面内容在基本标签上书写，HTML页面也称为HTML文档

标签名 定义 说明
HTML标签 页面中最大的标签，我们 称为 根标签
文档的头部 注意在head标签中我们必须要设置的标签是title
文档的标题 让页面拥有一个属于自己的网页标题
文档的主体 元素包含文档的所有内容，页面内容 基本都是放到body里面的

HTML 从入门到进阶（黑马 ）_第2张图片

VS Code 工具生成骨架标签新增代码 

（1）文档类型声明标签

这句代码的意思是: 当前页面采取的是HTML5版本来显示网页。
⭕注意:
1.声明位于文档中的最前面的位置，处于标签之前；

2.不是一个HTML标签，它就是文档类型声明标签。

（2）lang语言

用来定义当前文档显示的语言
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说定义为en就是英文网页定义为 zh-CN 就是中文网页

其实对于文档显示来说，定义成en的文档也可以显示中文，定义成 zh-CN 的文档也可以显示英文

  • en定义语言为英语
  • zh - CN定义语言为中文

（3）字符集

多个字符的集合，以便计算机能够识别和存储各种文字。

< head > 标签内，通过 标签的charset属性来规定HTML文档应该使用哪种字符编码。

字符集(Characterset)是多个字符的集合。以便计算机能够识别和存储各种文字。
在标签内，可以通过标签的charset属性来规定 HTML文档应该使用哪种字符编码。

HTML 常用标签

（1）标题标签 

-

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题即

-

。

我是一级标题

单词 head的缩写，意为头部、标题。
标签语义: 作为标题使用，并且依据重要性递减。
特点:
1.加了标题的文字会变的加粗，字号也会依次变大；

2.一个标题独占一行。

（2）段落和换行标签

1️⃣

为段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干个段落。

 我是一个段落标签

单词 paragraph[paeragraef]的缩写，意为段落。

标签语义:可以把HTML文档分割为若干段落。
特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行；

2.段落和段落之间保有空隙。

2️⃣换行标签
: 强制换行（单标签）

在 HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
。


单词 break的缩写，意为打断、换行。
标签语义:强制换行。
特点:
1.
是个单标签
2.
标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

（3）文本格式化标签

粗体、斜体、下划线等

加粗 （或者是); 斜体; 删除线; 下划线

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义:突出重要性比普通文字更重要。

语义 标签 说明
加粗 或者 更推荐使用 标签加粗语义更强烈
倾斜 或者 更推荐使用标签加粗 语义更强烈
删除线 或者 更推荐使用标签加粗 语义更强烈
下划线 或者 更推荐使用 标签加粗 语义更强烈

（4）
和标签

两个标签没有语义，是用来装内容的，div是division，表示分割、 分区，一行放一个； span意为跨度、跨距，一行放多个。

和是没有语义的，它们就是一个盒子，用来装内容的。

div 是 division的缩写，表示分割、分区。span 意为跨度、跨距。

 这是头部 

今日价格

特点:
1.

标签用来布局，但是现在一行只能放一个
大盒子；

2.标签用来布局，一行上可以多个小盒子。

（5）图像标签和路径

1️⃣图像标签

在HTML标签中，标签用于定义HTML页面中的图像

单词image的缩写，意为图像。
src 是标签的必须属性，它用于指定图像文件的路径和文件名。

所谓属性: 简单理解就是属于这个图像标签的特性。

图像标签的其他属性:

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示的文字
title 文本 提示文本。鼠标放到图像上，显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细

< img >标签定义HTML页面中的图像，src 为标签的必须属性，指定图像文件的路径和文件名；alt里面放替换文本；title放提示文本。

⭕图像标签属性注意点:
①图像标签可以拥有多个属性，必须写在标签名的后面。
②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

③属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。
重点掌握点:

  • 请说出 图像标签哪个属性是必须要写的?
  • 请说出 图像标签中  和 title 属性区别?

2️⃣目录文件夹与根目录

  • 目录文件夹：普通文件夹，存放相关素材；
  • 根目录：打开目录文件夹的第一层；VSCode可打开文件夹，选择目录文件，方便管理文件

 3️⃣相对 / 绝对 路径：以引用文件所在位置为参考基础而建立出的目录路径

①相对路径: 以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，图片相对于HTML页面的位置。

相对路径分类 符号 说明
同一级路径

图像文件位于HTML文件同一级 如
下一级路径 /

图像文件位于HTML文件下一级 如

。
上一级路径 ../

图像文件位于HTML文件上一级 如

。

相对路径：从代码所在的这个文件出发，去寻找目标文件，即上一级、下一级、同一级是图片相对于HTML页面的位置。

②绝对位置：目录下的绝对位置，直接达到目标位置，通常是从盘符开始的路径，例如：“D:web\img\logogif”或完整的网络地址“http://wwwitcast.cn/images/logo.gif”

（6）超链接标签

HTML标签中，标签用于定义超链接，作用是从一个页面链接到另
个页面。

1.链接的语法格式：

 
    
     
     属性 
     作用 
     
     
     href 
     用于指定链接目标的url地址，(必须属性) 当为标签应用href属性时，它就具有了超链接的功能 
     
     
     target 
     用于指定链接页面的打开方式，其中_self为默认值， blank为在新窗口中打开方式。 
     
    
   
  
链接语法格式：href ： 链接目标的url地址，target ：链接页面的打开方式，
 
  
2.链接分类:
 1.外部链接: 例如 < a href = "http://www.baidu.com">百度
 2.内部链接:网站内部页面之间的相互链接直接链接内部页面名称即可，例如首页
 
  
3.空链接:如果当时没有确定链接目标时，首页
 4.下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件
 5.网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
 
  
6.锚点链接: 点我们点击链接可以快速定位到页面中的某个位置
 
  
     
   
  • 在链接文本的href属性，设置属性值为#名字的形式，如第2集
    •  
   
  • 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如:
    第2集介绍
    •  
  
 
  
（7）注释标签：
 
  
解释代码功能   快捷键 Ctrl + /
 
  
 
  
特殊字符
 
  
在HTML中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
HTML 从入门到进阶（黑马 ）_第3张图片
 
  
 （8） 表格标签
 
  
主要作用：显示、展示数据，并非是布局页面的
 
  
 
   
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数报的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。HTML 从入门到进阶（黑马 ）_第4张图片
 
  
 
  
表格基本语法：
 
  
< table > < / table >用于定义表格的标签 ;
 
  
< tr>  用于表格中的行（并没有列的概念），必须嵌套在< tr > < /tr> 标签中，
 
  
字母td指表格数据（ table data）即单元格的内容。
 
  

        ···
    
    ···


    

        单元格内的文字
 
  
1.
是用于定义表格的标签
 2.标签用于定义表格中的行，必须嵌套在
标签中
 
  
3.用于定义表格中的单元格，必须嵌套在标签中
 
  
4.字母 td 指表格数据(table data)，即数据单元格的内容
 
  
 
  
1️⃣表头单元格标签
 
  
< th > < /th > 表头单元格文本内容会加粗并居中，突出重要性，也还是单元格。
 
  
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示标签表示HTML表格的表头部分(table head 的缩写)
 
  

    

        姓名
    




 
  
 
    
    
 
     个人信息表 
    
 
    
 
     姓名 
     性别 
     电话 
    
 
    
 
     小王         
     女 
     110 
    
 
    
 
     小明 
     男 
     120 
    
 
    
  
 
  
2️⃣表格属性
 
  
实际开发不常用，是通过CSS设置。cellpadding为表格中内容距离边框的距离；cellspacing为边框与边框之间的距离；也可以有height（写到里面）。
 
  
表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置。
 目的有2个：
 1.记住这些英语单词,后面CSS会使用
 2.直观感受表格的外观形态
 
  
 
    
    
 
     属性名 
     属性值 
     描述 
    
 
    
 
     align 
     left 、center、right 
     规定表格相对周围元素的对齐方式 
    
 
    
 
     border 
     1或" " 
     规定表格单元是否拥有边框，默认为””，表示没有边框 
    
 
    
 
     cellpadding 
     像素值 
     规定单元边沿与其内容之间的空白，默认1像素 
    
 
    
 
     cellspacing 
     像素值 
     规定单元格之间的空白，默认2像素。 
    
 
    
 
     width 
     像素值或百分比 
     规定表格的宽度 
    
 
    
  
 
  
综合案例：
 
  
先书制作表格的结构
 1.第一行里面是th表头单元格
 2.第二行开始里面是td 普通单元格
 3.单元格里面可以放任何元素, 文字链接图片等都可以
 
  

 后书写表格属性
 1.用到宽度高度边框cellpadding 和 cellspacing
 2.表格浏览器中对齐align
 
  
HTML 从入门到进阶（黑马 ）_第5张图片
 
  
 
  
 
  
 
  
3️⃣表格结构标签
 
  
< thead >标签：表格头部区域，内部必须拥有 < tr>标签；
 
  
< tbody >标签：表格主体区域。
 
  
使用场景: 因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分在表格标签中，分别用: 标签 表格的头部区域、标签 表格的主体区域这样可以更好的分清表格结构。
 
  
 
  
4️⃣合并单元格
 
  
（1）合并单元格方式
 
  
跨行合并：rowspan = " 合并单元格个数 " ;
 
  
跨列合并：clospan = " 合并单元格的个数 " ；
 
  
例：< td colspan = " 2 "> < /td >
 
  
HTML 从入门到进阶（黑马 ）_第6张图片
 
  
 （2）目标单元格
 
  
     
   
  • 跨行:最上侧单元格为目标单元格,写合并代码
    •  
   
  • 跨列:最左侧单元格为目标单元格,写合并代码
    •  
  
 
  
HTML 从入门到进阶（黑马 ）_第7张图片
 
  
 合并单元格步骤三步曲:
 1.先确定是跨行还是跨列合并
 2.找到目标单元格写上合并方式= 合并的单元格数量。比如:
 3.删除多余的单元格。
 
  
 
  
 
  
 
  
总结：
 
  
表格的相关标签
 我们学习了 table标签 tr行标签 td单元格标签 th 表头单元格 标签thead表格头部区域标签
 
  
HTML 从入门到进阶（黑马 ）_第8张图片
 
  
 
  
 
  
 
  
 （9）列表标签
 
  
列表标签：布局；特点——整齐、整洁、有序；
 
  
分类为无序列表、有序列表、自定义列表。
 
  
 
   
表格是用来显示数据的，那么列表就是用来布局的。
 
   
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
 
   
根据使用情景不同，列表可以分为三大类: 无序列表、有序列表和自定义列表HTML 从入门到进阶（黑马 ）_第9张图片
 
  
 
  
 
  
①无序列表
 
  

     标签 表示 HTML页面中项目的无序列表，一般会以项目符号星现列表项，而列表项使用
  • 标签定义
     无序列表的基本语法格式如下:
     
  
      
    
    • 列表项1
      • 
    
    • 列表项2
      • 
    
    • 列表项3
      • 
    ...

     
  
    1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
     2.
      中只能嵌套 
    • 直接在 
  
      3.
    • 与
      • 之间相当于一个容器，可以容纳所有元素
       4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS 来设置。
       
  
       
  
       
  
       
  
      ②有序列表
       
  

       有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义在HTML标签中，<0l>标签用于定义有序列表，列表排序以数字来显示，并且使用li>标签来定义列表项有序列表的基本语法格式如下:
       
  
        
    
      1. 列表项1
        2. 
    
      2. 列表项2
        3. 
    
      3. 列表项3
        4. 
    ...

       
  
      1.
        中只能嵌套
      1. 标签中输入其他标签或者文字的做法是不被允许的。
         
  
        2.
      2. 与之间相当于一个容器，可以容纳所有元素
         3.有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS来设置。
         
  
         
  
         
  
         
  
        （10）自定义列表
         
  

         自定义列表的使用场景
         自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
         
  
        HTML 从入门到进阶（黑马 ）_第10张图片
         
  
         
   
         自定义列表 < dl>：描述列表；
        ：项目名称； 
        ：项目子项
         
   
        在HTML标签中，
        标签用于定义描述列表(或定义列表，该标签会与
        (定义项目/名字)和
        (描述每一个项目/名字)一起使用。
         
   
        其基本语法如下:
         
  
         
  
        
    
        名词1
        
    
        名词1解释1
        
    
        名词1解释2
        

         
  
        1. 
         里面只能包含
         和 

         2.
        和
        个数没有限制，经常是一个
         对应多个
        。
         
  
         
  
        列表总结：
         
  
         
    
    
         
     标签名 
     定义 
     说明 
    
         
    
         
     
          		 
     无序标签 
     里面只能包含li 没有顺序，使用较多。li里面可以包含任何标签 
    
           
    
           
     
            		 
     有序标签 
     里面只能包含li 有顺序，使用相对较少。 i里面可以包含任何标签 
    
             
    
             
      
     自定义列表 
     里面只能包含dt 和 dd 。 dt和dd里面可以放任何标签、 
    
             
                
  
             
  
            ⭕注意：
             1.学会什么时候用无序列表，什么时候用自定义列表
             2.无序列表和自定义列表代码怎么写?
             3.列表布局在学习完CSS后再来完成
             
  
             
  
             
  
             
  
            （11）表单标签
             
  
            表单目的：收集用户信息，进行交互；
             
  
            表单组成：表单域、表单控件（表单元素）、提示信息
             
  
             
   
            在 HTML中，一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。HTML 从入门到进阶（黑马 ）_第11张图片
             
  
             
  
             
  
            （1） 表单域：
             
  
            包含表单元素的区域；< form>标签：用于定义表单域，实现用户信息的收集和传递。
             
  
            表单域 是一个包含表单元素的区域
             在HTML标签中，
             标签 用于定义表单域，以实现用户信息的收集和传递。
             
  
             会把它范围内的表单元素信息提交给服务器
             
  
            
    各种表单元素控件

             
  
            常用属性:
             
  
             
    
    
             
     属性 
     属性值 
     作用 
    
             
    
             
     action 
     url地址 
     用于指定接收并处理表单数据的服务器程序的url地址 
    
             
    
             
     method 
     get/post 
     用于设置表单数据的提交方式，其取值为get或post。 
    
             
    
             
     name 
     名称 
     用于指定表单的名称，以区分同一个页面中的多个表单域。 
    
             
                
  
             
  
             
   
            1.在写表单元素之前,应该有个表单域把他们进行包含
             2.表单域是form标签
             
  
             
  
             
  
            （2）表单控件（表单元素）：
             
  
            表单中可输入和选择的内容控件，包括：
             
  
            1. input输入表单元素；
             
  
            2. select下拉表单元素；
             
  
            3. textare文本域元素
             
  
             
   
            在英文单词中，input是输入的意思，而在表单元素中  标签用于收集用户信息
             
   
            在 标签中，包含一个type属性，根据不同的 type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)
             
  
             
  
             
  
               
   
            • 标签为单标签
              •  
   
            • type属性设置不同的属性值用来指定不同的控件类型
              •  
  
             
  
            type属性的属性值及其描述如下：
             
  
             
    
    
             
     属性值 
     描述 
    
             
    
             
     button 
     定义可点击按钮 (多数情况下，用于通过JavaScript 启动脚本)。 
    
             
    
             
     checkbox 
     定义复选框。 
    
             
    
             
     file 
     定义输入字段和“浏览”按钮，供文件上传。 
    
             
    
             
     hidden 
     定义隐藏的输入字段。 
    
             
    
             
     image 
     定义图像形式的提交按钮。 
    
             
    
             
     password 
     定义密码字段。该字段中的字符被掩码. 
    
             
    
             
     radio 
     定义单选按钮。 
    
             
    
             
     reset 
     定义重置按钮。重置按钮会清除表单中的所有数据 
    
             
    
             
     submit 
     定义提交按钮。提交按钮会把表单数据发送到服务器。 
    
             
    
             
     text 
     定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符 
    
             
                
  
             
  
             
   
             < input >表单元素（单标签）例：< input type = " type " > 
             ;
             
   
            ⭕注意：
             
   
               
    
            • 单选按钮必须有相同的name才能实现多选一；
              •  
    
            • value = " 请输入用户名 " ; checked = " checked "；
              •  
    
            • button 按钮结合js使用
              •  
   
             
  
             
  
            除type属性外，标签还有其他很多属性，其常用属性如下：
             
  
             
    
    
             
     属性 
     属性值 
     描述 
    
             
    
             
     name 
     由用户自定义 
     定义 input 元素的名称。 
    
             
    
             
     value 
     由用户自定义 
     规定 input 元素的值 
    
             
    
             
     checked 
     checked 
     规定此 input 元素首次加载时应当被选中 
    
             
    
             
     maxlength 
     正整数 
     规定输入字段中的字符的最大长度。 
    
             
                
  
             
  
            1.name和value是每个表单元素都有的属性值主要给后台人员使用
             2.name 表单元素的名字要求 单选按钮和复选框要有相同的name值
             3.checked属性主要针对于单选按钮和复选框 主要作用一打开页面,就要可以默认选中某个表单元素
             
  
            4.maxlength是用户可以在表单元素输入的最大字符数一般较少使用。
             
  
             
  
             
  
            2.页面中的表单元素很多，如何区别不同的表单元素?
             答: name 属性:当前input表单的名字，后台可以通过这个name 属性找到这个表单。页面中的表单很多name的主要作用就是用于区别不同的表单。
             
  
            用户名:
             
  
               
   
            • name属性后面的值，是自定义的
              •  
   
            • radio(或者checkbox)如果是一组，我们必须给他们命名相同的名字
              •  
  
             
  
            男
女
             
  
             
  
             
  
             
  
            （3）
             
  
            标签为input元素定义标注(标签)。
             
             
  
            语法:
             
  
             

             
  
            核心:
             
  
             
  
             
  
             
  
            （4）标签控件定义下拉列表
             语法:
             
  
             
  
            1.

        1.通过