HTML

• 1. 标题与段落标签
• 2. 文本修饰标签
• 3. 图片标签
• 4. 链接标签
• 5. 无序、有序列表与定义列表
• 6. 表格、表单标签
• 7. div与span标签

1. 标题与段落标签

(1) 标题标签是一对双标签：

，

，

，

，

，

。在网页中，h1标签最重要，一个.html文件中只能有一个h1标签，h2、h3、h4、h5、h6可以有多个，最常用的标题标签是h1~h4，h5和h6在网页中不常使用。

(2) 段落标签是一对双标签：

。

	
		
    	
	
	
	    
一级标题
	    
盼望着，盼望着，东风来了，春天的脚步近了。
	    
二级标题
	    
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
	    
三级标题
	    
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。
	    
四级标题
	    
坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2. 文本修饰标签

(1) 强调标签是一对双标签：、，strong标签会对文本进行加粗，em标签会对文本进行斜体，strong的强调性比em更强。

(2) 上、下标文本标签都是一对双标签：、。

(3) 插入、删除文本标签都是一对双标签：、。
(4) 换行标签是单标签：
。
(5) 水平分割线标签是单标签：

---

。

	
		
    	
	
	
	   strong标签强调的文字
	    

	    

	    em标签强调的文字
	    

	    

	    32+22=13
	    

	    

	    100
	    

	    

	    200
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3. 图片标签

(1) 图片标签是单标签：

	
1

(2) 图片标签的属性：
width、height：图片的宽、高；
src：在.html文件中引入图片的地址；
alt：当图片加载出现问题或无法加载时，起提示作用；
title：提示图片的信息。

(3) 引入文件的路径：
相对路径：文件相对于引用文件去定义被引用文件的地址，.表示当前文件目录下，…表示上一级文件目录下。

当图片scene_1.jpg在index.html文件的上一级目录下时，引入这张图片的路径src=“…/img/scene_1.jpg”。

绝对路径：文件相对于磁盘位置定位的地址，例如：C:Users9464Desktopimgscene_1
，或者文件在网络中的地址，例如：https://img-blog.csdnimg.cn/5c19201f59c9434eae99cc9ced43c0a8.png#pic_center。

4. 链接标签

(1) 链接标签是一对双标签：。

(2) a标签的属性：
href：链接的地址；
target：链接的跳转方式，默认值_self是在当前页面打开，_blank是在新窗口打开链接。

	
		
    	
	
	
	    哔哩哔哩官网
	    
	    
	        
	    
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14

给文本加上a标签，点击文本内容就会跳转到指定网址。不仅文本可以加上a标签，图片也可以，点击图片也会跳转到指定网址。

(3) base标签：单标签，可以改变链接的默认跳转行为。

	
	    
	    
	    
	    
	
	
	    哔哩哔哩官网
	    哔哩哔哩官网
	    哔哩哔哩官网
	    
	        
	    
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

(4) 跳转锚点：
在网页内部进行跳转，网页内部的一个点跳转到另一个点。
第一种方式：href属性值为#id名，跳转到带id属性的标签元素处；
第二种方式：href属性值为#name属性的属性值，跳转到带name属性的a标签处。

    
    


    段落1
    段落2
    
文字段落
    
文字段落
    
文字段落
    
文字段落1文字段落1文字段落1文字段落1文字段落1文字段落1
    
文字段落
    
文字段落
    
文字段落
    
    
文字段落


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5. 无序、有序列表与定义列表

ul、ol标签和li标签必须组合存在，而且li的父级标签必须是ul或者ol，不能是其它标签。有序列表用得比较少，无序列表经常可以代替有序列表实现列表功能。

(1) 无序列表：

列表项：

• 
  (2) 有序列表：
  
  列表项：
• 
  (3) 定义列表：
  、 、
  。

  
  
  
      
      
  
  
      
      
  
          
  无序列表项1
          
  无序列表项2
          
  无序列表项3
      
      
  
          
  有序列表项1
          
  有序列表项2
          
  有序列表项3
      
      
  
          
  HTML
          
  
              HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
          
          
  CSS
          
  
              层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
          
      
      
      
  
          
  
              
  
          
  
      
      
  
          
              
  
          
      
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41

  
  (4) 列表之间也可以相互嵌套，从而形成多层级的列表，二级导航就是使用多层级列表来实现的。

  
  
  
      
      
  
  
      
  
          
  
              
  
                  
  列表项1
                  
  列表项2
                  
  列表项3
              
          
          
  
              
  
                  
  列表项4
                  
  列表项5
                  
  列表项6
     
              
          
      
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25

  6. 表格、表单标签

  (1) 表格外层容器：

  ，表格标题：，表头：，表格行：，表格单元：。
  (2) 表格语义化标签：、、，tBody和tFood在一个表中可以定义多个，但是tHead只能定义一次。
  (3) 表格的属性：
  border：表格边框；
  cellpadding：单元格内空间；
  cellspacing：单元格之间空间；
  rowspan：合并一行的单元格；
  colspan：合并一列的单元格；
  align：水平对齐方式；
  valign：竖直对齐方式。

  
  
  
      
      
  
  
      
  
          
  员工工资表
          
  
              
  编号
  姓名
  工资
          
          
  
              
  1
  张三
  8000
          
          
  
              
  2
  李四
  10000
          
      
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21

  

  (4) 表单外层容器：，表单input标签：；
  input标签的type属性值：

  type属性值

  含义

  text

  文本框

  password

  密码输入框

  checkbox

  复选框

  radio

  单选框

  submit

  提交按钮

  reset

  重置按钮

  file

  上传文件

  多行文本框：；
  下拉菜单：，选项：；
  辅助表单：。
  表单的常用属性：
  placeholder：给出输入框的提示信息；
  checked：被选中；
  name：表单名称；
  disabled：用于复选框禁用某个选项；
  action：表单提交数据的目的地；
  method：表单发送数据的方式，get和post方式；
  for：规定 label 与哪个表单元素绑定。

  
  
  
      
      
  
  
      
  
          账号
          
  
          密码
          
  
          
              运动
              音乐
              电影
          
      
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20

  

  7. div与span标签

  (1) div（块）标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联，div标签是一个块级元素，每个div标签独占一行，换行是div标签固有的唯一格式表现。
  (2) span（内联）标签被用来组合文档中的行内元素。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。

  
  
  
      
      
  
   
      
  
          这是一个块级元素
      
      这是一个内联元素
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

  

  先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦