HTML常见标签
1、标题标签:
…
- 标题标签作用相当于word的标题 ,总共6课级别,取值1-6,数字越小,字体大小越小
2、分割线标签:
-
分隔线标签实例:
-
属性:
- color: 设置颜色,颜色可以是颜色名或者是16进制的色号,格式#xxxxxx; 其中x表示16进制的色号值
- size:分隔线大小取值1-7,数字越大越粗
- width: 宽度,默认居中
3、字体标签:
- 字体实例:
4、加粗标签:
- Strong: 表示强调,并且对强调的内容加粗显示
b: 只有加粗的效果没有强调
5、斜体标签:
- 斜体,将倾斜的内容包含在标签内
6、段落和换行标签:
-
P: 表示段落标签,用于组织一大段文本,段落于段落之间默认会有一个空行。
- 效果
-
br: 换行标签,对于html会忽略空格和换行,因此需要使用换行标签来进行换行
说明: 如果需要多个换行,就加多个换行标签
7、实体字符: < > " ©
-  ; 空格 <: 小于 ;>; 大于
" 双引号
8、HTML注释:
- 对网页内容进行说明
span
- 主要用于包含文本,没有语义。
HTML图片标签
图片标签主要作用是通过图片的形式更直观的表达需要显示的内容。更好的呈现用户需要的效果。
img标签的语法格式:
属性解析:
-
src属性:设置图片的引用路径,可以是相对路径或绝对路径,推荐使用相对路径
- …/ : 上一级目录
- ./ : 当前目录
- 绝对路径是从项目根路径开始向下的路径:如:/项目名/img/aa.jpg
- URL路径:https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596444021094&di=c34a88135b38ac6a74403552dacec6fa&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg
-
width属性:设置图片的宽度,以像素为单位
-
height属性:设置图片的高度,以像素为单位
-
title属性:悬浮文字,当鼠标悬浮到图片上时的提示文字
-
alt属性:替代文本,由于某种原因图片无法显示时会使用替代文本替代图片内容
HTML超链接标签
超链接也成为a: 主要用于从当前页面发送请求连接到指定的地址,并响应。
语法结构:热点文字或图片
属性解析:
-
href属性:访问目标的url地址
- 超链接标签实例:
-
target:定义打开页面的方式 ,常用的两种方式取值为:
- _blank 在新的选项卡中打开;
- _self 在本页面打开(默认);
HTML 列表标签
无序列表 ul>li
- 无序列表
有序列表ol>li
- 有序列表
列表标签的属性 type:
特别说明:
ul和ol标签都有type属性,可以用来设置列表项前面的项目符号类型。其中ul无序列表的type取值为:disc、circle、square,默认值为disc。ol有序列表的type取值为:1、a、A、i、I,默认值为1。
HTML表格标签
table表格标签
-
border:表格边框的宽度
- 注意: 边框的的值是数字,且不需要像素的单位,数字越大越粗。
-
width:表格的宽度
-
height:表格的高度
-
cellpadding:表格边缘与内容之间的空白
-
cellspacing: 单元格之间的空白(边框和边框之间的距离)
-
bgcolor:表格的背景颜色
-
align:表格的对其方式如居中:center
tr
-
align
- 设置该行表格中列里面的数据居中显示
th/td
- align: 表格内容的对其方式
- colspan: 表格的列合并
- rowspan:表格中的行合并
- th的特点: 自动居中,字体默认加粗,其他和td一致
caption
- 设置表格和标题,注意放在table 标签下
HTML表单标签
HTML 表单的主要作用是接收用户的输入,当用户提交表单时,浏览器将用户在表单中输入的数据打包,并发送给服务器,从而实现用户与Web服务器的交互。
表单是控件的容器,一个表单由form元素、表单控件组成。
作用: 表单标签是html中用于手机用户数据,然后将收集到的数据临时保存在浏览器,发送请求提交给服务器的标签
实例展示
- 表单实例.png
表单标签:
姓名:
密码:
年龄:
<span style="color:#000000"><code> 邮箱:<input type="email" name="email"/><br>
头像:<input type="file" name="photo"/><br>
<input type="hidden" value="隐藏作用域" name="test"/><br>
性别:<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女<br>
爱好:<input type="checkbox" name="hobby" value="时间管理"/>时间管理
<input type="checkbox" name="hobby" value="rap" checked="checked"/>rap
<input type="checkbox" name="hobby" value="游泳"/>游泳
<input type="checkbox" name="hobby" value="王者毒药"/>王者毒药
<input type="checkbox" name="hobby" value="英雄联盟"/>英雄联盟<br>
出生日期:<input type="date" name="birthday"/><br>
学校:<select name="school">
<option value="1">斯坦福大学</option>
<option value="2" selected="selected">家里蹲大学</option>
<option value="3">哈弗</option>
<option value="4">中公教育</option>
</select><br>
<textarea name="text" cols="50" rows="30"></textarea>
<input type="submit" value="提交"/><br>
<input type="reset" value="重置" />
<input type="button" value="点我" />
<button>按钮标签</button>
</form>
</body>
</code></span>
- 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
-
概述:form 标签是表单标签的父标签,本身没有样式也不能收集用户数据,但是可以将子标签中的数据组织然后提交
-
属性
-
action: 用于设置数据提交到服务器的地址,相当于a标签中的href的作用
-
method: 指定提交数据的方式,常见的有get和post.,默认为get
-
enctype: 设置提交数据类型编码
- application/x-www-form-urlencoded:在发送前编码所有字符(默认)
- multipart/form-data:不对字符编码。
-
在使用包含文件上传控件的表单时,必须使用该值。
-
子标签
-
input
-
说明: 输入域,用来收集用户数据
-
属性
-
name:设置数据的名字,不能省略。
-
type: 设置输入域中数据的类型
- text: 文本: 文本可见
- password:,密码,输入的数据不可见
- number: 表示的是数字,如:1、2、3
- email: 邮件地址只能是邮件地址
- file: 表示一个文件,在文件上传时,类型必须是file
- hidden: 表示隐藏作用域,可以设置收集提交的数据,但是不能再浏览器显示,值是固定的
- date:表示一个日期格式
- radio: 单选按钮:只能选择一个
- checkbox: 复选框,可以选择多个
- submit: 将表单中的数据提交到服务器
- reset: 重置表单中的数据
- button: 表示一个按钮,没有特殊语义
-
value:设置输入域的默认值的。
-
通用属性 id,class
- id:标签的唯一标识,在一个html文件中不能重复
- class: 表示一类标签,值可以重复
-
-
-
select
-
option
- 下单的菜单的name写在:select;
选择内容写在option标签中。用value设置选择标签的值 - 默认的选中使用selected属性
- 下单的菜单的name写在:select;
-
-
textarea
- 用于组织存放大量文本
- cols: 表示文本框所占的宽度
- rows: 表示文本框所占的高度
-
button
- 注意: 如果将button按钮作为form表单子标签,则相当于submit
-