HTML标签讲解使用（超详细）

目录

Day01：HTML

1、HTML标准结构

2、标签的语法

3、基本标签

4、超链接标签

4.1 超链接基本使用

4.2 锚点

5、img标签

6、列表标签

7、表格标签

7.1 table结构

7.2 table属性

7.3 td属性

8、表单标签

---

Day01：HTML 

1、HTML标准结构

    
    


​

1、 告诉浏览器使用什么样的html或者xhtml来解析html文档

2、是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML文档，在它们之间是文档的头部和主体。

3、元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

4、定义网页标题，在浏览器标题栏显示。

5、之间的文本是可见的网页主体内容

6、 声明编码方式用utf8

2、标签的语法

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

1、HTML标签是由尖括号包围的特定关键词

2、标签分为闭合和自闭合两种标签

3、HTML不区分大小写

4、标签可以有若干个属性,也可以不带属性,比如就不带任何属性

5、标签可以嵌套,但是不可以交叉嵌套

3、基本标签

• 标题标签

标题1
标题2
标题3
....
标题3
​
ps: 最多到h6

• 段落标签

大家好，我是段落1。
大家好，我是段落2。

• 换行标签

大家好，我是段落标签p。我按了enter一下
换行了
​
大家好，我是段落标签p。我按了enter一下
 换行了

• 文本格式化标签

HTML提供了一系列的用于格式化文本的标签，可以让我们输出不同外观的元素，比如粗体和斜体字。如果需要在网页中，需要让某些文本内容展示的效果丰富点，可以使用以下的标签来进行格式化。

定义粗体文本

定义粗体文本方式2

定义斜体字

定义斜体字方式2

定义删除文本

• 特殊符号

®   ©

标签大致可分为两类

• 块级标签(block) -- 独占一行

• 内联标签(inline) -- 按文本内容占位

• div和span标签

只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现

块级元素与行内元素的区别所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

4、超链接标签

4.1 超链接基本使用

属性	值	描述
href	网络链接 [ 例如: 百度一下，你就知道 ] 本地链接 [ 例如：F:\html\index.html ]	规定链接的跳转目标
title	百度	链接的提示信息
target	_blank [ 在新建窗口中打开网页 ] _self [ 默认值，覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页]	与前面四项固定值不同，framename是泛指，并不是这个值，这点将在后面框架部分内容中详细介绍，这里可以暂时先略过

1、href是超链接最重要的属性，规定了用户点击链接以后的跳转目标，这个目标可以是 网络连接，也可以是本地连接。

2、网络链接指的是依靠网络来进行关联的地址，一般在地址前面是以 http://或者https://这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标。

3、本地链接指的是本地计算机的地址，一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的，不需要经过网络。

4、如果href的值留空，则默认是跳转到当前页面，也就是刷新当前页面。

4.2 锚点

锚点( anchor )是超链接的一种应用，也叫命名锚记，锚点可以像一个定位器一样，可以实现页面内的链接跳转，运用相当普遍。例如，我们有一个网页，由于内容太多，导致页面很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。又例如，我们页面中，有个链接需要跳转到另一个页面的中间或者底部去，这时候也可以运用上锚点技术来解决这个问题。

  
    
  
  
  第一章
  第二章
  第三章
​
   

      
第一章内容
  
   

      
第二章内容
  
  

     
 第三章内容
  
  

5、img标签

在HTML中，图像由标签定义的，它可以用来加载图片到html网页中显示。网页开发过程中，有三种图片格式被广泛应用到web里，分别是 jpg、png、gif。

img标签的属性：

/*
src属性：
    指定图像的URL地址，是英文source的简写，表示引入资源。
    src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
    如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
alt属性：指定图像无法显示时的替换文本。
width属性： 指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
title属性：悬浮图片上的提示文字
*/

点击图片跳转可以配合a标签使用

6、列表标签

无序列表  

      
item1
      
item2
      
item3
  
​
有序列表
  

      
item1
      
item2
      
item3
  

7、表格标签

7.1 table结构

在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样，都是有行有列的。HTML使用tr标签定义行，使用td标签定义列。

语法：

  
    
    ……
  
  ……
单元格的内容

1、

和表示一个表格的开始和结束。一组...表示一个表格。

2、border用于设置整个表格的边框宽度，默认为0，表示不显示边框。

3、和表示表格中的一行的开始和结束。一组...，一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。

4、和表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了。

7.2 table属性

属性	值	描述
width	px、%	规定表格的宽度。
height	px、%	规定表格的高度。
align	left、center、right	规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定表格的背景颜色。
background	url	规定表格的背景图片。
border	px	规定表格边框的宽度。
cellpadding	px、%	规定单元格边框与其内容之间的空白。
cellspacing	px、%	规定单元格之间的空隙。

7.3 td属性

表格中除了行元素以外，还有单元格，单元格的属性和行的属性类似。td和th都是单元格。

属性	值	描述
height	px、%	规定单元格的高度。
width	px、%	规定单元格的宽度。
align	left、center、right	规定单元格内容的对齐方式。
valign	top、middle、bottom	规定单元格内容的垂直对齐方式。
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定单元格的背景颜色。
background	url	规定单元格的背景图片。
rowspan	number	规定单元格合并的行数
colspan	number	规定单元格合并的列数

8、表单标签

表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分：

• 表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。

• 表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。

• 表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性：

属性	值	描述
action	访问服务器地址	服务器端表单处理程序的URL地址
method	post、get[默认值]	表单数据的提交方法
target	参考超链接的target属性	表单数据提交时URL的打开方式
enctype	application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送]	表单提交数据时的编码方式

用户注册
​
  

       
姓名： 
       
密码： 
       
爱好：
           篮球
           足球
           双色球
       
       
性别：
           男
           女
           其他
       
      
生日：
      
      
籍贯：
          
              广东省
              山东省
              河北省
          
      
      

          
      
​
      

          

          

          
普通按钮
          

      
​
  

​