- 图片标签:
- img:展示图片
- 属性
- src:指定图片的位置
- align:对齐方式
- alt:当图片加载错误或加载不出来时显示的文字
- width:宽度
- height:高度
- 列表标签:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
早上起床干的事情
<ol type="A" start="5">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ol>
早上起床干的事情
<ul>
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
早上起床干的事情
<ul type="square">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
早上起床干的事情
<ul type="circle">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
</body>
</html>
- 链接标签:
- a:定义一个超链接
- 属性:
- href:指定访问资源的URL(统一资源定位符)
- target:指定打开资源的方式
- _self:默认值,在当前页面打开
- _blank:在空白页面打开
- 举例:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<a href="https://www.baidu.com/">点我搜索</a>
<br>
<a href="https://www.baidu.com/" target="_self">点我</a>
<br>
<a href="https://www.baidu.com/"target="_blank">点我</a>
<br>
<a href="mailto:47******[email protected]">
联系我们
</a>
<br>
<a href="https://www.baidu.com/">
<img src="TIM图片20200207173443.png">
</a>
</body>
</html>
- 块标签:
- div:每一个div占满一整行。块级标签
- span:文本信息在一行展示。行内标签(内联标签)
- 举例:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<span>史迪仔仔仔</span>
<span>嘤嘤嘤QAQ</span>
<hr>
<div>史迪仔仔仔</div>
<div>嘤嘤嘤QAQ</div>
</body>
</html>
- 语义化标签: html5中为了提高程序的可读性,提供了一些标签
- < header>:页眉
- < footer>:页脚
- …
- 表格标签:
- table:定义表格
- width:宽度
- border:边框
- cellpadding:定义内容和单元格的距离
- cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条
- bgcolor:背景色
- align:对齐方式
- tr:定义行
- td:定义单元格
- th:定义表头单元格
- < caption>:表格标题
- < thead>:表示表格的头部分
- < tbody>:表示表格的体部分
- < tfoot>:表示表格的脚部分
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>1</td>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>杨过</td>
<td>80</td>
</tr>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<thead>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>杨过</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3</td>
<td>学渣</td>
<td>50</td>
</tr>
</tfoot>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<th rowspan="2">编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">杨过</td>
</tr>
</table>
<hr>
</body>
</html>
- 表单标签:
- 表单:
- 概念:用于采集用户输入的数据的,用于和服务器进行交互。
- form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围。
- 属性:
- action:指定提交数据的URL
- method:指定提交方式
- 分类:一共7种,2种比较常用
- get:
- 请求参数在地址栏中显示。会封装到请求行中(HTTP协议后讲)
- 请求参数大小是有限制的
- 不太安全
- post:
- 请求参数不会在地址栏中显示。会封装到请求体中(HTTP协议后讲)
- 请求参数大小没有限制
- 较为安全
- 表单项中的数据要想被提交,必须指定其name属性。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="get">
用户名:<input name="username"><br>
密码:<input name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
- 表单项标签:
- input:可以通过type属性值,改变元素展示的样式
- type属性:
- text:文本输入框,默认值
- placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
- password:密码输入框
- radio:单选框
- 注意:
1.要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
2.一般会给每一个单选框提供value属性,指定其被选中后提交的值
3.checked属性可以指定默认值
- checkbox:复选框
- 注意:
1.一般会给每一个单选框提供value属性,指定其被选中后提交的值
2.checked属性可以指定默认值
- file:文件选择框
- hidden:隐藏域,用于提交一些信息。
- 按钮:
1.submit:提交按钮,可以提交表单
2.button:普通按钮
3.image:图片提交按钮(src属性指定图片的路径)
- label:指定输入项的文字描述信息
- 注意:label的for属性一般会和 input 的 id 属性值对应。如果对应了,则点击label区域,会让input输入框获取焦点。
- select:下拉列表
- textarea:文本域
- cols:指定列数,每行有多少个字符
- rows:默认多少行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="get">
<label for="username">用户名:</label> <input type="text" name="username" placeholder="请输入用户名" id="username"><br>
<label for="password">密码:</label> <input type="password" name="password" placeholder="请输入密码" id="password"><br>
性别:<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female" checked> 女
<br>
爱好:<input type="checkbox" name="hobby" value="shopping" checked> 逛街
<input type="checkbox" name="hobby" value="singing"> 唱歌
<input type="checkbox" name="hobby" value="gem"> 运动
<br>
图片:<input type="file" name="file"><br>
隐藏域:<input type="hidden" name="id" value="aaa"><br>
取色器:<input type="color" name="color"><br>
生日:<input type="date" name="birthday"><br>
生日:<input type="datetime-local" name="birthday"><br>
邮箱:<input type="email" name="email"><br>
年龄:<input type="number" name="age"><br>
省份:<select name="province">
<option>--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">河北</option>
</select><br>
自我描述:<textarea cols="20" rows="5" name="des"></textarea><br>
<input type="submit" value="登录"><br>
<input type="button" value="按钮"><br>
<input type="image" src="">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="get">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td>
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label></td>
<td><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td><label for="checkcode">验证码</label></td>
<td>
<input type="text" name="checkcode" id="checkcode">
<img src="u=1502676338,3772310299&fm=26&gp=0.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>