技能补全计划：HTML5

发表于 更新于 分类于 Waline： 阅读次数：

技能补全计划：HTML5

1
2
3
4
5
6
7
8
9
<html>
    <head>
    	<title>网页标题：技能补全计划：HTML5</title>
    </head>
    <body>
   
    </body>
    
</html>
1
2
3
4
5
6
<!DOCTYPE html> 文档类型声明标签，表示当前界面由html书写
<html lang='zh-CN'>   只是网页语言
    <head>
        <meta charset="UTF-8" />  字符集
    </head>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
<h1>标题标签，h1-h6</h1>
<p>段落标签</p>
换行标签<br />
<strong>文字加粗</strong>
<b>文字加粗</b>
<em>倾斜</em> <i>倾斜</i>
<del>删除线</del> <s>删除线</s>
<ins>下划线</ins> <u>下划线</u>
<hr /><!--水平线-->
<sub>上标</sub>
<sup>下标</sup>

1
2
3
4
<div>
	容器，占一行
</div>
<span>跨距，在一行</span>
1
<img src="url" alt="图片显示不出来时显示的文字" title="鼠标放在图片上的提示文本" width="1" height="1" border="边框粗细"/> 图像标签
1
2
3
4
5
6
7
8
9
10
11
12
<!--表格-->
<table>
    <tr>
    	<th>标头单元格</th>
    </tr>
    <tr>
    	<td colspan="2">跨列合并</td>
    </tr>
    	<td rowspan="2">跨行合并</td>
    <tr>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--列表-->
<ul>
    <li>无序列表</li>
    <li></li>
</ul>

<ol>
    <li>有序列表</li>
</ol>

<dl>
    <dt>自定义列表</dt>
    <dd>自定义列表的小弟</dd>
    <dt></dt>
</dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--表单-->
<form action="url" method="提交方式" name="名字" maxlength="6">
    用户名：<input type="text" name="username" value="请输入用户名"> <br />
    密码：<input type="password" name="pwd"> <br />
    性别：<label for="male">男</label><input type="radio" name="sex" id="male"> 女<input type="radio" name="sex"> <br />
    爱好：吃饭<input type="checkbox" name="hobby" checked="checked">睡觉<input type="radio" name="hobby"> <br />
    <input type="submit" name="注册"> <br />
    <input type="reset" name="重置"> <br />
    上传文件：<input type="file">
    <select>
        <option selectd="selected">山东</option>
        <option>北京</option>
        <option>下拉菜单</option>
    </select>
    <textarea cols="50" rows="5">文本域
</form>

label标签用户重定向到input，提高用户体验