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 > |
  | 空格 |
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
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.作用:
表单作用是提交数据,表格的作用是展现数据
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:图片提交