html常用标签和基本表创建

html的常见标签

标题: <h1>…<h6>

作用:强调，黑体，加粗，换行效果

用户醒目；搜索引擎添加索引。

段落标签: <p>

区分段落内容，默认有换行效果。

换行标签:<br />

空标签。换行。

水平线: <hr/>

设置width属性控制长度

超链接标签: <a>

href:代表链接资源(url)

本地资源(绝对路径,相对路径)/网络资源(协议)

target:目标

_blank: 在新标签页打开连接内容

_self: 默认，覆盖当前的标签页

_parent: 父级窗口打开

_top: 顶级窗口打开

锚链接: 页面内跳转

图片标签<img>

src:设置图片的url

width/height:设置宽高

alt:图片无法正确显示时用于提示

title:鼠标悬停时提示

列表标签

无序列表

ul:无序列表

li: 列表项

有序列表

ol:有序列表

li: 列表项

自定义列表

dl:自定义列表

dt:列表项

dd:对列表项解释说明

表格标签

table:表格

border:边框

cellspacing:单元格的间距

cellpadding:单元格的内边距(边框和内容间距)

thead:表头表的字段描述

tbody:表体正文信息

tfoot:表脚统计信息

tr:行

td:单元格

colspan:列合并

rowspan:行合并

align:对齐方式(left、center、right)

表单标签

表单form:将表单项内容整体提交给服务器

action:动作 (服务器的url)

method:提交方式(get/post)

http请求:

组成: 请求行(请求路径协议)

请求头: key/value(页面内容类型,编码，长度等)

请求体(可选): 用户发送数据

get请求: get请求没有请求体 (在url中传输参数信息)

?user=zs&password=123

get较小数据(1k)

不能使用在上传情况下

post请求: post请求参数在请求中

post传输较大数据

表单项:

input: 文本输入框,密码框，单选，多选，提交按钮等

type:控制表单项的显示格式

text:单行文本框

password:密码框

button:按钮

submit:提交按钮

radio:单选

checkbox:多选

hidden:隐藏域

file:文件传输(不能使用get请求)

value:控制表单项值(传输给服务器的值)

name:表单项的名称(传输给服务器的key值)

checked:控制选中状态

其他标签

div标签：默认样式和父级容器宽度保持一致,高度默认为0。

块级元素，默认不和其他元素共享一行。

div+css用于布局页面。

span标签: 用于标记,内联元素，能够和其他元素共享一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing="0" cellpadding="5px">
			<thead>
				<tr>
					<td>密码：</td>
					<td><input type="password"></td>
				</tr>
				<tr>
					<td>重复:</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td>信箱:</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td>QQ:</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td>身份证:</td>
					<td><input type="text"></td>
				</tr><tr>
					<td>年龄:</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td>电话:</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td>生日:</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td>邮政编码:</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td>操作系统</td>
					<td>
						<select name="choose">
							<option value="1">选择您的操作系统</option>
							<option value="1">win7</option>
							<option value="1">win10</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>所在省份：</td>
					<td>
					<input type="radio" name="address" value="Guangdong">广东
					<input type="radio" name="address" value="Shanxi">山西
					<input type="radio" name="address" value="Zhejiang">浙江
					<input type="radio" name="address" value="Jiangxi">江西
					</td>
				</tr>
				<tr>
					<td>爱好：</td>
					<td>
					<input type="checkbox" name="hobby" value="play">运动
					<input type="checkbox" name="hobby" value="net">上网
					<input type="checkbox" name="hobby" value="listen">听音乐
					<input type="checkbox" name="hobby" value="read">看书
					</td>
				</tr>
				<tr>
					<td>自我介绍：</td>
					<td>
						<textarea>中文是一个字</textarea>
					</td>
				</tr>
			</thead>
		</table>
	</body>
</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--边框 边框间距 内容和边框的间距-->
		<table border="1px" cellspacing="0" cellpadding="10px">
			<thead>
			<tr>
				<td colspan="2" align="center" width="30">a</td>
				<td rowspan="2" width="30"align="center">b</td>
			</tr>
			<tr>
				<td rowspan="2" width="30" align="center">d</td>
				<td width="30"align="center">e</td>
			</tr>
			<tr>
				
				<td colspan="2" align="absmiddle" width="30">c</td>
			</tr>
			</thead>
		</table>
	</body>
	
</html>

html常用标签和基本表创建

猜你喜欢