一、网页的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="favicon.ico">
<meta charset="UTF-8">
<title>网站的标题</title>
<meta name="description" content="网站的描述">
<meta name="keywords" content="网站的关键字">
</head>
<body>
</body>
</html>
二、常用的标签
1. 老牌的通用标签
标签描述 | 标签 |
---|
标题 | <h1>、...、<h6> |
段落 | <p> |
换行 | <br /> |
盒子【块级】 | <div> |
盒子【行内】 | <span> |
2. 新增的语义化标签
标签描述 | 标签 |
---|
头部 | header |
导航 | nav |
内容 | article |
某区域 | section |
侧边栏 | aside |
底部 | footer |
时间 | time |
三、特殊字符
描述 | 字符 |
---|
空格 | |
大于号 | > |
小于号 | < |
四、特殊的标签
1. 超链接标签
<a href="#" target="_blank|_self" title="提示内容">文本</a>
2. 图像标签
<img src="dog.jpg" title="这是个小狗">
3. 锚点标签
以 #
开头的目标路径,点击AA,跳转到BB
<a href="#abc">AA</a>
<h1 id="abc">BB</h1>
4. 按钮标签
<button>我是按钮</button>
5. 列表标签
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
6. 缩写提示标签
yyds 是 永远的神 的缩写,鼠标放在 yyds 上,会提示 永远的神
<abbr title="永远的神">yyds</abbr>
7. 表格标签
1. 格式举例
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
8. iframe标签
<iframe src="http://www.lvyestudy.com" width="200" height="150"></iframe>
五、表单
<form action="url地址" method="提交方式" name="表单名称">
<input type="text" value="在文本框中默认的提示内容" maxlength="最多可以输入字符的长度">
<input type="password" maxlength="最多可以输入字符的长度">
<input type="radio" name="XXX" checked="checked">
<input type="checkbox" checked="checked">
<input type="button" value="按钮的提示内容">
<input type="submit" value="按钮的提示内容">
<input type="reset" value="按钮的提示内容">
<input type="file" mutiple="mutiple">
<select>
<option>选项XXX</option>
<option selected="selected">有selected属性是默认选中项</option>
<option>选项YYY</option>
</select>
<textarea cols="每行中的字符数" rows="显示的行数" > XXX </textarea>
<label>
输入用户名:<input type="radio" name="usename" value="请输入用户名">
</label>
<label>
<img src="dog.jpg" alt="出错了~" title="这是个小狗">
<input type="radio" name="usename" value="请输入用户名">
</label>
</form>
六、多媒体标签
1. 视频标签
<video></video>
2. 音频标签
<audio></audio>