一.常用标签
<p> -------------- 段落标签
<strong> <b>
----
字体加粗
<i> <em>
-----
斜体
<u>
----
文字下面加上下划线
<del>
----- 删除线
<br>
----
换行
<hr>
------
水平分割线
<font>
----
用来修饰字体
<a href ="" ></a>
<img src="image/图片1.png" alt="zhangsan">
二.input标签
语法格式:
<input type="元素类型" name="元素名称" value="元素值" id="客户唯一标识符'>
type属性的取值表格:
type="text" | 文本框 |
type="password" | 密码框 |
type="radio" | 单选按钮 |
type="chexbox" | 多选按钮 |
type="submit" | 提交按钮 |
type="reset" | 复位按钮,重置按钮 |
type="button" | 普通按钮 |
type="image" | 图像按钮 |
type="file" | 上传文件 |
type="email" | 邮箱 |
type="date" | 日期 |
type="range" | 进度条 |
type="datetime-local" | 日期+时间 |
input的属性表格:
checked | 默认选择 |
readonly | 字段只读不能修改 |
disabled | 表示input禁用 不可点击 |
autofocus | 默认光标的位置 |
required | input不能为空白提交 |
三 .select标签
select标签表示下拉选择框
会和option标签连用 option表示的下拉选择框中的选项
属性:
value ---- 选项的值
name ---- 下拉框的名称
selected ----- 默认被选中的选项
multiple ----- 以列表的形式显示
四.textarea标签
语法结构:
<textarea name = "" cols = "" rows = "">内容</textarea>
cols ---- 多少列 表示的是文本域的宽度
rows --- 多少行 表示的文本域的高度
五.标签综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单练习</title>
</head>
<body>
<div align="center">
<h1>用户注册</h1>
</div >
<form align="center">
用户名:<input type="text" name="username" method="post"><br>
密 码:<input type="text" name="possword" autofocus required ><br>
请选择您的性别:<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender" checked>女<br>
<p> 请选择你的爱好:<input type="checkbox" value="足球" name="dance" >足球
<input type="checkbox" value="篮球" name="dance" >篮球
<input type="checkbox" value="lol" name="dance" >lol
<input type="checkbox" value="韩剧" name="dance" >韩剧
<input type="checkbox" value="王者荣耀" name="dance" >王者荣耀<br>
邮箱:<input type="email"><br>
用户头像:<input type="file" placeholder="请输入邮箱"><br>
你的家庭住址:<select >
<option value="北京">北京</option>
<option selected="selected">重庆</option>
<option>上海</option>
<option>西安</option>
</select><br>
您的收货地址是:<select multiple="multipie">
<option>永川</option>
<option selected="selected">江北</option>
<option>万州</option>
</select><br>
请留下您的收获地址:<textarea cols="20" rows="5">您的建议或意见</textarea><br>
请您选择您喜欢的颜色:<input type="color">
注册的时间:<input type="date"><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p><br>
</form>
</body>
</html>
六.HTML的简单缩写
 ;
| 空格 |
©; |
©
|
<; | < |
转义符 | /n /t |
> | > |
¥ |
¥
|
÷ |
÷
|
‰ | % |
± |
±
|
" | " |
七.表格基本属性
table标签
-------
用于定义一个表格
thead
----
定义表头
tr
----
行
td
----
列
单元格
必须放在
tr
tbody
---
主干
tfoot
-----
尾
表格的属性:
border
属性
------
边框
取值是数字
单位是像素 当取值为
0
的时候表示没有边框(默认)大于
0的时候表格是有
边框
的,数值一定要为整数,不能为负数
height
----
表示表格高度
width
----
表示的是表格宽度
align
------
表示的是表格对齐方式
left(居左) center(居中) right(居右),
默认是
left
bgcolor
-----
表示的是表格的背景颜色
background
----
表示背景颜色
cellpadding
-----
表示表格边距
cellspacing
-----
表示表格间距
八.列表标签
(1)有序标签--------ol
属性:
type属性
-----
表示设置序号的种类
start 属性
-----
控制开始序号的位置
reversed
----
降序(反序)
(2)无序标签---------ul
属性:
disc属性--------------默认值,实心圆
circle属性--------------空心圆
square属性-------------实心方块