HTML基础知识总结

1.基本标签的使用形式

        字体变粗b
        
        字体加粗strong
        文字变斜体i
        文字变斜体em
        文字加下划线
        删除线
        
换行
        

段落

        

用原来
         样式
         输出内容

        标准行内标签，一般用来修饰文本
        

标准块标签，一般用来布局页面

        

哈哈

        

哈哈

        

哈哈

        

哈哈

        

哈哈

        

哈哈

这些基本标签的代码表示为：

	
		
		
	
	
		
		字体变粗b
		
		字体加粗strong
		文字变斜体i
		文字变斜体em
		文字加下划线
		删除线
		
换行
		
段落
		
用原来
		样式
		输出内容
		标准行内标签，一般用来修饰文本
		
标准块标签，一般用来布局页面
		
哈哈
		
哈哈
		
哈哈
		
哈哈
		
哈哈
		
哈哈
		
		
	

其运行结果为：

2.行内标签与块标签

2.1.行内标签

 行内标签：指的是如a、span、b、strong、em、i、u、del

这些标签的内容如果可以在一行中展示，则不会换行，直到占满一行后才会换行输出

2.2.块标签

块标签：指的是div、p、hr、br、hn

这些标签，即使内容不够一行，也会换行输出

 3.HTML5 新增

其代码表示为：

	
		
		
	
	
		
定义页面的顶部（页眉）内容
		
中间部分
		
尾部部分
		
主要是用来表示文章内容的
		
导航条
		
侧边栏
		
用来在文档中呈现联系信息，包括文档作者或文档维护者的名字，他们的网站链接、电子邮件、真实地址、电话号码等
		标注或者高亮一些我们需要的关键字词
		表示当前完成进度情况
		表示作品或文章中的标题
		html5中，small元素被重新定义了，small通常标签与正文无关的文字，内嵌在页面上，如标注的版权信息，网站备案等
		画布标签，用来在页面上画图案
		
		
		
		
		
	

其运行结果为：

4.特殊字符 

特殊字符	转义码
空格
<	<
>	>
¥	¥
"	"
©	©
®	®
±	±
‰	‰
÷	÷

 5.常见的图片格式

<--

        img 标签用来引入图片到页面中

        src是一个必须的属性，该属性表示图片的地址

-->

5.1.img标签的常见属性

属性名称	属性值	功能
width	数字（像素）px	图片的宽
height	数字（像素）px	图片的高
border	数字（像素）px	图片的边框
align	left（左）、center（中）、right（右）	图片的水平对齐方式
vspace	数字（像素）px	图片与文字的水平距
hspace	数组（像素）px	图片与文字的垂直距离
alt	字符串	图片的替换文本

 alt：当浏览器不能显示所指定的图片，这时可以设置一段文字来说明此图。

6.视频音频标签

controls 表示播放器的组件

autoplay 表示自动播放

 注：video、audio标签均需要书写src属性，表示视频或者音频的位置。

7.表格标签

			
			

				
				

					
					
1,1
					
1,2
					
1,3
				
			
			
			
			

				

					
2,1
					
2,2
					
2,3
				
			
			
			
			

				

					
3,1
					
3,2
					
3,3
				
			
		

属性名	属性值	功能
width	数字（像素）px	单元格宽度
height	数字（像素）px	单光格高度
align	left（左）、center（中）、right（右）	单元格水平对齐方式
valign	top（上）、middle（中）、right（下）	单元格竖直对齐方式
bgcolor	颜色	单元格的背景颜色
background	图片	单元格的背景图片
rowspan	数字	垂直方向跨行
colsoan	数字	水平方向跨列

7.1.cellpadding与cellspacing的区别

cellpadding 表示表格的边距

cellspacing 表示表格的间隔

 7.2单元格跨行rowspan

 其代码表示为：

	
		
		
	
	
		

			

				
haha
				
haha2
				
haha3
				
haha4
			
			
			

				
haha2
				
haha3
				
haha4
			
			
			

				
haha
				
haha2
				
haha3
				
haha4
			
		
	

 其运行结果为：

7.3单元格跨列colspan

其代码表示为：

	
		
		
	
	
		

			

				
haha
				
haha2
				
			
			
			

				
haha1
				
haha2
				
haha3
				
haha4
			
			
			

				
haha
				
haha2
				
haha3
				
haha4
			
		
	

 其运行结果为：

8.超链接与锚链接

 html文件最重要的应用之一就是超链接，通过网上提供的超链接功能，用户可以链接到网上的其他网页。如果没有超链接，就只能在浏览器地址栏中输入各个网页的地址，这是一件非常麻烦的事情。

8.1超链接

超链接 

1. href :用来明确链接的目标文件
2. target属性：用来明确目标文件的打开方式
3. target = "-blank":表示在新窗口打开目标文件，省略在原窗口打开目标文件
4. target属性默认值为self：表示当前选项卡打开页面

其代码表示为：

	
		
		
	
	
		超链接
	

我们可以看到链接到之前的代码“index.html”(也就是1.基本标签的使用形式）

8.2锚链接

        在制作网页时可能会遇到网页内容过长的情况，这样用户浏览起来就不太方便。要解决这个问题可以在网页上部创建一个导航，利用导航直接链接到下面定义好的锚点

和淘宝这些网络的楼层效果类似，就是让页面定位到需要的地方，注意在链接的href属性上加"#id",之后在需要停止的位置的标签上设置对应的id即可。

当点击ul标签后的超链接，系统就会自动跳转至相应的页面。

9.列表标签（有序、无序、数据列表）

9.1右序列表-ol

 

       

       

种类	表现形式
type="1"	用数字表示条目
type="a	用字母表示条目
type="I"	用罗马数字表示条目

其代码表示为：

	
		
		
	
	
		

			
haha1
			
haha2
			
haha3
		
	

type="a" 表示他的类型是a

start = "a" 表示他是从a开始的

reverser 表示他的顺序为原本顺序的逆序

其运行结果为：

9.2无序列表-ul

       

       

type属性设置序号的种类，无序列表序号种类有3种

种类	表现形式
type="circle"	用圆形表示条目
type="disc"	用实心圆表示条目
type="square"	用方形表示条目

9.3数据列表-dl

数据列表主要用来描述存在标题的列表组

       

这个是标题

       

这个是内容

        

这个是内容

其代码表示为：

	
		
		
	
	
		

			
这个是标题
			
这个是内容
			
这个是内容
		
	

其运行结果为：

 10.表单标签form

表单是用form标签来定义的

• method:方法有get（可看见的）、post（加密的）这两种提交方式

属性名称	属性值	属性作用
action	要处理文件的路径	表单提交后，处理表单的文件
method	请求方式	method属性用来明确表单的提交方式
name	字符串	表单的名称

10.1.input标签

input表示表单元素，type是非常重要的属性，type不同的值表示不同的元素类型

类型	作用
type="text"	单行文本框
type="password"	密码框
type="radio"	单选按钮
type="checkbox"	多选按钮
type="submit"	提交按钮
type = "reset"	复位按钮
type = "button"	按钮
type = "image"	图像按钮
type="hidden"	隐藏域
type = "file"	文件域

属性名称	属性值	功能
name	字符串	元素的名称
value	字符串	元素的值
id	字符串	客户端唯一标识
size	数字	以字符个数设定的元素宽度
maxlength	数字	元素接受字符数的上限
checked		元素是否被选中

10.2.select标签

select元素主要是表单的下拉选择框

       

选项1

        

选项2

        

选项3

        

选项4

属性名称	属性值	属性作用
option	子项	下拉框中的选项
value	字符串	选项的值
name	字符串	下拉框的名称
selected		默认被选中的选项
multiple	"multiple"	以列表形式显示

注意：

当select标签设置multiple属性时，select以列表形式显示，当select标签不设置multiple属性时，以下拉框形式显示。列表框在选择时按住键盘的ctrl或shift建可以实现多选，而下拉框只能单选。

10.3.textarea标签

textarea也是表单标签的三大核心元素之一。

        内容

属性名称	属性值	属性作用
cols	数字	以字符个数设定的多行文本框的宽度
rows	数字	以行数设定的多行文本框的高度
name	字符串	多行文本框的名称

11.综合案例

	
		
		
	
	
		
用户注册
		
		

			用户名称:
			
			

			用户密码:
			

			用户性别：男
			女
			

			用户爱好：
			篮球
			LOL
			王者
			唱歌
			

			用户头像：
			
			
			

			用户博客地址：
			
			

			
			

			提交数据
			

			
			
			

			用户邮箱：
			
			

				用户地址：
				
					北京
					上海
					广州
					西安
				
			
			
			

				用户意见：