1、文本标签




 标签分类:   是否有主体;是否能自动换行;



是否有主体

格式

有主体标签

标签体内可以包含其他标签或文本(可以嵌套其他标签);例如:<h1>您好</h1>、<b><font size="7" color="blue" face="楷体">字体加粗</font></b>

没有主体的标签

标签体内不能包含其他标签。  例如: <br/>、<hr/>



是否换行

特点

块级标签

自带有换行功能

内联标签

不具有换行功能




标签

作用

示例

h1~h6

标题标签       一级字体最大,六级最小,默认的字体是加粗,自带换行功能



                     属性:  align  表示对齐方式; center;right;left



(标签中间有一条线:表示是一个过时的标签,可能在下一个HTML的版本中消失)

< h1align="center"style="color : pink" > 我叫人生 </ h1 >

font

设置字体、大小、字号;

< fontsize="7"color="blue"face="楷体" > 江西工业工程职业技术学院 </ font >

br

换行              属于换行标签但是没有主体


hr

水平线          没有主体的标签;可以换行;属于级联标签



属性:  width 表示设置水平线的宽度,单位是像素px;  size  表示线条的粗细;  color  表示线条的色彩;

< hrwidth="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的语言当中是有一些特殊的功能,所以才需要用到另外一些实体命名的字符代替特殊字符。



& 符号开头, ;




在span标签中使用elemenplus的icon_标签名



5、图像标签



标签名: <img/>



src



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内边距



在span标签中使用elemenplus的icon_标签名_02



8.表单标签


1.作用:


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



form :数据的容器


属性:


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


method:提交方式


          get


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


get方法和post方法的区别



提交方法

是否显示数据

安全性

性能

数据大小

常用

get

显示

1024kb

查询

post

不显示

 低

8M

新增








9.输入标签


input


      type:指定标签的类型


      text:表示文本输入,这个值是默认值


      password:密码框,密码不可显示


      sumbit:提交按钮,value指定按钮的文字


      radio:单选框


      CheckBox:复选框


      select:下拉列表 option某一项


      file:文件域,一个请选择的按钮


      textarea:文本域,cols列   rows行


rest:重置按钮


button:普通按钮


image:图片提交