html
段落标签
<p></p>
与上文下文 都有间隔
标题标签
h1-h6 最高到h6 字体加粗 越来越小 <h1></h1>
块级标签
<div></div> 独占一行
布局使用 contenteditable="true" 表示可编辑 默认为false
行级标签
<span></span> 不独占一行
图片标签
img 图片 单标签
<img src="" alt="" width="" height="">
属性
src 相对路径|url
alt 说明
width 宽 像素 或者 比例
height 高 像素 或者 比例
超链接
用法 跳转 下载
<a href="" download="" ></a>
属性
href 相对路径|url
download 下载
<a href=""></a>
列表
有序列表
<ul>
<li><a href=""></a><li>
<ul>
无序列表
<ol>
<li><a href=""></li>
</ol>
表格
<table></table> 设置表格域
常用属性
width 宽
height 高
cellspacing 表格间间距
cellpadding 表格内边距
<thead></thead>表格头域
<tbody></tbody>表格体域
<tr></tr>表格行
<td></td>表格列
<th></th>表格头列
<tr>
<td></td>
</tr>
行包含列
表单域
<form action="后端地址" method="post/get" enctype="application/x-www-form-urlencoded" | "multipart/form-data">
</form> 表单域
form标签属性
action="提交后端地址"
method="提交方式" get/post
get 地址栏显示？key1=val&key2=val2
enctype="提交编码" application/x-www-form-urlencoded 文本编码
multipart/form-data 文件编码
input标签属性
input 标签包含很多子项 type = 文本框text 密码框password 单选框radio 多选框checkbox 文件框file 普通按钮button
重置按钮reset 提交按钮submit
属性
<input type="" name="" value="" checked单选多选默认 disable readonly>
<select name=""><select> 下拉 结合 option使用
默认选项
<select>
<option value="" selected（设置为默认值）>
选项
</option>
</select>
<textarea></textarea> 多行文本输入框
所有需要提交到后台的数据 需要一个属性 name 用户后端接收数据
不能输入值的元素还需要设置value属性设置 向后端提交数据
常用属性
placeholder="请输入账号" 提示输入 输入内容则消失
readonly 只读 真的只读？ 可在元素中更改 可能存在漏洞问题 readonly
disable 禁用 元素中更改 可解除禁用 可能存在越权 disable
maxlength="" 设定长度
单元框 复选框 checked 设置为默认值
select selected 设置为默认值
单标签
<meta> 元属性 给浏览器看的 在<head></head>里
<img src="" alt="" width="" height="" >
<br> 换行
<hr>水平线
<input>
测试源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>你好</li>
<li><a href="">你好</a></li>
<li><a href="">你好</a></li>
</ul>
<ol>
<li><a href="">你好呀</a></li>
<li><a href="">你好呀</a></li>
</ol>
<table width="500" border="1" cellspacing="0" cellpadding="10" >
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>sex</th>
<th>age</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>20242001</td>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>
<a href="">修改</a>
<a href="">删除</a>
</td>
</tr>
</tbody>
</table>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
<p>
<label >账号</label>
<input type="text" name="账号" id="" placeholder="请输入账号" value="8888" disabled>
</p>
<p>
<label >密码</label>
<input type="password" name="密码" id="" placeholder="请输入密码">
</p>
<p>
<label >确认密码</label>
<input type="password" name="确认密码" id="" placeholder="请再次输入密码">
</p>
<p>
<label >选择性别</label>
男<input type="radio" name="sex" value="男" checked>
女<input type="radio" name="sex" value="女" >
保密<input type="radio" name="sex" value="保密">
</p>
<p>
<label >下列属于前端语言的是</label>
A PHP<input type="checkbox" name="project" value="A" checked>
B JAVA<input type="checkbox" name="project" value="B">
C Html<input type="checkbox" name="project" value="C">
</p>
<select name="学历">
<option value="null">请选择学历</option>
<option value="1" >专科</option>
<option value="2" >本科</option>
<option value="3" >硕士</option>
<option value="4" selected>院士</option>
</select>
<textarea name="留言" id="" cols="30" rows="10"></textarea>
<input type="file" name="file" >
<input type="reset" value="重置">
<input type="submit" value="提交">
<a href="" download=""><img src=""></a>
</form>
</body>
</html>
效果图
