常见标签种类模板_HTML常用标签介绍

目录

HTML 简介

1.HTML（）：超文本标记语言，又称网页语言。

超文本：超出文本的范围，可以使用 HTML 轻松实现

标签：HTML的所有操作都是通过标签来实现的，标签就是标签。

2.运行方式：HTML后缀为.html.htm。直接通过浏览器运行即可

3.HTML规范，书写时必须遵循以下规范

1）HTML 文件的开始和结束标签

2）html包含两部分

页面显示的内容写在body里

3）HTML标签有开始标签和结束标签，相互对应。

4）HTML 代码不区分大小写

5）有些标签没有结束标签，而是在标签内结束。例如换行符

分向線

4.html的运行思想

一个网页里面的数据非常多，不同的数据可能需要不同的显示效果，这时候就需要使用标签来封装需要操作的数据，通过修改标签的属性值来改变标签里面的数据样式。标签相当于一个容器，如果想要修改容器里面数据的样式，只需要改变容器的属性值就可以改变容器里面的数据样式。

文本标签和注释标签

text标签用于修改文本的样式。

属性：

size：文本大小范围为1-7，如果超过7则默认为7。

颜色：文字颜色

- 两种表达方式

英文单词：红绿蓝黑白灰......

使用十六进制数表示#:RGB

标签用于添加评论

 
  
 
 
 
	红色的十号字体

	黄色的二十号字体

	绿色的三十号字体

	
 
 
 

标题标签、水平规则标签和特殊字符

标题标签

-.......

- 从h1到h6，尺寸依次减小，并且自动换行。

水平线标签

- 属性

size：水平线的粗细，范围是1到7

颜色： 颜色

特殊字符

如果显示的和标签有冲突，需要对特殊字符进行转义

<

>

空间

&

列出标签

1. ：表示列表的范围

在 dl: 上部内容

在 dl 中：较低级别的内容

 
  
 
 
	

	 
笑一下
	 
哈哈
	 
嘻嘻

	 
嘿嘿
	
 

2.如果想在页面上显示序列号效果

：有序列表的范围

- 属性类型：设置排序方法1（默认）ai

-ol标签中的具体内容

 
  
 
 
	

	 
笑一下


	 

	 
哈哈
	 
嘻嘻
	 
嘿嘿
	 
	
 

3. 想要在页面前面显示特殊字符

：表示无序列表的范围

- 属性：类型：空心圆、实心圆盘（默认）、实心正方形、默认圆盘

-ul标签中的具体内容

 
  
 
 
	

	 
笑一下


	 

	 
哈哈
	 
嘻嘻
	 
嘿嘿
	 
	
 

图片标签

 
        - src: 图片的路径
        - width：图片的宽度
        - height：图片的高度
        - alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容。图片显示出错，提示的内容

关于 Path

1.绝对路径，文件的完整路径。例如：

2. 相对路径

1）html文件和图片在同一个路径下，直接写文件名即可

2）图片在html的下级目录

在html文件中，使用img文件夹下的a.jpg：img\a.jpg【html和img在同一路径下】

3）图片位于HTML文件的上层目录

使用 ../ 表示上层路径

超链接标签

1. 链接资源

  显示在页面上的内容  

href：链接资源的地址

：设置打开方式，默认在当前页面打开

: 在新窗口中打开

_self：打开默认

当超链接不需要转到任何地址时，在 href 中添加#

    - 这是一个超链接2

2. 查找资源

如果你想查找资源：

定义一个位置+返回到此位置

   顶部
   回到顶部

标签前：按原样输出

表格标签

表格标签可以格式化数据，使其更加清晰。

1.表格写法：

：表示表格的范围

：表格线

：表格线条颜色

：细胞间的直接距离

宽度：表格的宽度

：表格的高度

在表中（一行）

设置对齐方式：左右

在 tr（单元格）内

设置显示模式对齐：左边右边

ps: 也可以用th来表示单元格，也就是说可以实现居中、加粗

 
  
 
 
 
	

	
人员信息
	 
 
	  
姓名
	  
性别
	  
年龄
	 
	 

	  
小白
 
	  
女
	  
18
	 
	 

	  
小黑
	  
男
	  
80
	 
	 

	  
小红
 
	  
女
	  
8
	 
	 
	
 

2.表格标题：

3. 合并单元格

: 银行同业

人事信息

：跨列

人事信息

 
  
 
 
	

	
人员信息
	
	 

	  
小白
	  
女
	  
18
	 
	 

	  
小黑
	  
男
	 
	 

	  
小红
 
	  
女
	 
	 
	
 

表单标签

form标签可以向服务器提交数据

1. 表格范围

：定义表单的范围

属性

：提交到地址，默认提交到当前页面

：表单提交方式

- 常用的方法有两种：get和post，默认是get。

1.get请求地址栏会携带提交的数据，但是post不会携带（在请求体中。第七天讲HTTP协议的时候讲的）

2.GET请求安全级别较低，POST请求安全级别较高

3、get请求的数据大小有限制，但是post请求的数据大小没有限制。

：上传文件时需要设置该属性

2.输入项：可输入内容或选择部分内容

大多数输入项都使用这个，并且输入项需要有一个 name 属性才能提交数据。

1）常用输入项：

2）密码输入：

3）单选输入项：

- 需要属性名称

- name属性值必须相同

- 必须有一个值

实现默认选定属性：=“”

4）检查输入项：

- 需要属性名称

- name 属性值必须相同

- 必须有一个值

实现默认选定属性：=“”

5）文件输入项：

6）下拉输入（不在input标签中）

默认选择 = “”

7）文本字段：

8）隐藏项：不会显示在页面上，但存在于 HTML 代码中

9）提交按钮

使用图像提交：

重置按钮：返回输入项的初始状态

普通按钮：

 
  
 
 
 
  

   手机号码：

   密码：

   性别： 女 
男

   爱好：羽毛球
 乒乓球
 篮球

   文件：

   生日：
            请选择
			1997
			1998
			1999
		 
		 

   自我描述：

   隐藏项：

   		
		
		
		

		
  
  
 

其他常见标签

b ：粗体

s ：删除行

u ：下划线

我：斜体

pre ： 原样输出

sub ：下标

sup ：上标

p：段落标签比br标签多一行

div ：自动换行

span：一行显示

框架标签

1.

- 行：按行划分

- cols：按列划分

2. 显示具体页面

注意：使用frame标签时，不能写在body里面，如果使用frame标签，需要把body去掉。

3.如果希望内容显示在正确的页面上，请将超链接属性值设置为名称。

超链接 1

                           //把页面划分成上下两部分 
                      //上面页面
    
                             //把下面部分划分成左右两部分
              //左边的页面
             //右边的页面
         
     

如果需要其他标签，可以查看官方文档。