HTML 标签

二、HTML标签

1、文本标签

 标签分类：   是否有主体；是否能自动换行；

是否有主体	格式
有主体标签	标签体内可以包含其他标签或文本（可以嵌套其他标签）；例如：<h1>您好</h1>、<b><font size="7" color="blue" face="楷体">字体加粗</font></b>
没有主体的标签	标签体内不能包含其他标签。  例如： <br/>、<hr/>

是否换行	特点
块级标签	标签本身 自带有换行功能
内联标签	标签本身 不具有换行功能

标签	作用	示例
h1~h6	标题标签       一级字体最大，六级最小，默认的字体是加粗，自带换行功能                      属性：  align  表示对齐方式； center;right;left (标签中间有一条线：表示是一个过时的标签，可能在下一个HTML的版本中消失)	< h1 align ="center" style =" color : pink " > 我叫人生 </ h1 >
font	设置字体、大小、字号；	< font size ="7" color ="blue" face =" 楷体 " > 江西工业工程职业技术学院 </ font >
br	换行              属于换行标签但是没有主体
hr	水平线          没有主体的标签;可以换行；属于级联标签 属性：  width 表示设置水平线的宽度，单位是像素px；  size  表示线条的粗细；  color  表示线条的色彩；	< hr width ="500" size ="5" color ="red" align ="center" />
i	斜体	< i > 职业技术学院 </ i >
strong	加粗	< strong > 江西学院 </ strong >
b	加粗	< b > 江西工业 </ b >
p	段落	< p > 就在戒指里浮现 </ p >
&nbsp	空格

2、列表标签

标签	属性	说明	说明
ol-li	type		有序列表
	1	数字列表
	A,a	大小写字母列表
	I,i	罗马字母列表
ul-li	type		无序列表
	disc	实心圆
	circle	空心圆
	square	实心正方形

3、容器标签

学习 span 和 div 标签的作用的区别

作用：都是用来做容器的，用来包含其他的子标签或是文本，这两个标签的本身是不可见的。（本身没有特殊功能）

+span 标签：为了在一个区域进行分割然后达成特殊的样式；

div 标签：为了网页做布局。

标签	作用	特点	用法规则
span	包含其他的文本和标签，用于 小范围的布局；	不带换行功能，属于内联标签	如果需要 对单独的文本中一部分进行操作，就使用span 标签
div	包含其他的文本和标签，用于 大范围的布局	带换行功能，属于块级标签

4、实体字符

作用：因为有一些特殊的字符在HTML的语言当中是有一些特殊的功能，所以才需要用到另外一些实体命名的字符代替特殊字符。

结构：都是以 & 符号开头， ； 号结尾 ！！，对大小写是敏感的

5、图像标签

标签名： <img/>

属性： src 表示指定的图片地址，有使用规则，不能使用本地地址（C:\,D:\），因为图片是存在服务器上，服务的本地上是没有这个图片地。

width: 表示宽度，如果只是指定了其中一个属性，那另一个属性就会按照比例进行缩放。

height：表示高度，

alt:  如果图片不存在了，则显示这个文字来代替这个图片。

title：如果鼠标移动到图片上，显示的是提示文字。

属性名	作用
src	设置图片地址
width	宽度，如果只指定一个，则另一个按比例进行缩放
height	高度
alt	如果图片丢失，替代的文字
title	悬浮显示的提示文字

6、链接标签

<a href="要跳转的地址">这里填写要跳转的文字或图片</a>

作用：用户在文本或图片上点击，跳转到另一个网页，a 标签是内联标签，没有换行功能。

属性：

href: 指定跳转地址，  # 表示跳转到网页本身。

title:  当鼠标移到上面，显示提示信息。

taraget: 指定打开网页窗口的默认方式。【_self 默认值，在当前的窗口打开；_blank 表示在新的窗口中打开。】 

7、表格标签

 目标：

         1.表格的基本结构

          2.表格表签的使用

作用：

      1.用来服务器端发送给浏览器的数据

       2.也是可用于网页的布局

        3.制作表格

1.表格的标签名：

         table：表格的容器

         width：宽度

          height：表格的高度

       ·  align：用在表格上，表示整个表的对齐

          caption：表格的标题

         cellspacing ：单元格之间的间距

3.th：表格的头部，自动加粗，默认居中

4.tr：代表表格的一行

4.td：代表表格的一列

总结：

标签	作用
table	表格容器，包含其他的表格元素，行，列，标题的等
tr	表格中的行，table row
th	表格中的列标题， 特点：加粗，居中table head
td	表格的某一个单元格
caption	表格的标题

表格的属性：

属性名	作用
border	外边框的粗细
width	宽
align	对齐方式，用在表格上，整个表的居中，如果用于th,tr列的居中，如果用在tr，就是这一行的居中
rowspan	跨几行的数据
colspan	跨几列的数据

5.还有两个表格中的样式

    cellspacing:单元格之间的间距

    cellpadding:单元格边框与内容之间的间距；padding内边距

8.表单标签

1.作用：

        表单作用是提交数据，表格的作用是展现数据

2.标签名： form ：数据的容器

属性：

1. ation指定数据提交服务器的地址

2. method:提交方式

          get ：提交的数据会展现在浏览器的地址当中

post：不会在浏览器地址中显示数据

get方法和post方法的区别

提交方法	是否显示数据	安全性	性能	数据大小	常用
get	显示	低	高	1024kb	查询
post	不显示	高	低	8M	新增

9.输入标签

1.标签名： input

      type：指定标签的类型

      text：表示文本输入，这个值是默认值

      password：密码框，密码不可显示

      sumbit：提交按钮，value指定按钮的文字

      radio：单选框

      CheckBox：复选框

      select：下拉列表 option某一项

      file：文件域，一个请选择的按钮

      textarea：文本域，cols列   rows行

      rest：重置按钮

      button:普通按钮

      image：图片提交