每个标签实体都有其特定的属性
效果不重要,语义最重要
注释
注释不能嵌套
快捷键 CTRL + /
<marquee loop="1">
<h1>这是一个测试</h1>
<!--这是一个测试 -->
这是一个测试
<input type="password">
</marquee>
<input type="password">
文档声明
字符编码
声明解码和编码协议 chatset
设置语言
lang属性编写规范
块级元素和行内元素
块级元素独占一行
行内元素内,能写行内元素,但是不能写块级元素;
块级元素内,都能写
文本标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<em>"i love you"</em>
<strong>"i love you"</strong>
<span>i love you</span>
</body>
</html>
图片标签
搜索引擎会通过alt属性得知图片的内容,在图片无法展示的时候,有些浏览器会呈现alt的属性
超链接
a标签
超链接锚点(页面顶部/刷新/其他页面的锚点/执行一段js/唤起功能应用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="aa.jpg" target="_blank">"aa"</a>
<p></p>
<img width="100" src="aa.jpg"> <img width="100" src="aa.jpg">
<p>""//////</p>
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
<a href="demo3.html#aaa">刷新页面</a>
<a href="mailto:34@qq.com">发邮件</a>
<a href="tel:10086">tel电话</a>
</body>
列表
有序/无序/自定义列表
表格
在table标签中设置的像素属性为至少概念
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="2" width="500" height="200" cellspacing="0">
<!--表格标题 -->
<caption>用户画像</caption>
<!-- 表格表头 -->
<thead height="500" width="500" align="left" valign="bottom">
<tr>
<th>用户ID</th>
<th>用户性别</th>
<th>用户级别</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>00001</td>
<td></td>
<td>*****</td>
</tr>
<tr>
<td>00002</td>
<td>m</td>
<td> </td>
</tr>
</tbody>
<!--表格标注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td>2p</td>
</tr>
</tfoot>
</table>
<table border="2" cellspacing="0">
<caption>"课程表"</caption>
<thead>
<tr>
<th>1.1</th>
<th colspan="3">1.2</th>
<th>1.5</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">2.1</td>
<td >2.2</td>
<td>2.3</td>
<td>2.4</td>
<td rowspan="2">2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
<tr>
<td>4.2</td>
<td>4.3</td>
<td >4.4</td>
<td>4.5</td>
</tr>
</tbody>
</table>
</body>
</html>
表单
button 默认是type="submit"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://baidu.com/s" target="_blank">
<input type="text" name="wd">
<button>sousuo</button>
</form>
<form action="https://search.jd.com/Search" target="_blank">
<label>
<span>账户:</span>
<input type="text" name="zhanghu" value="mrz" maxlength="12"><br>
</label>
<span>密码:</span>
<input type="password" name="pwd"><br>
<span>性别</span>
<span>男</span> <input type="radio" name="sex" value="male" checked>
<span>女</span> <input type="radio" name="sex" value="female"><br>
<span>爱好</span>
<span>打篮球:</span> <input type="checkbox" name="hobby" value="打篮球" checked>
<span>羽毛球:</span> <input type="checkbox" name="hobby" value="羽毛球">
<span>打足球:</span> <input type="checkbox" name="hobby" value="打足球"><br>
<!-- 文本域-->
<label for="area"></label>
<textarea id="area" cols="10" rows="3" name="msg"></textarea><br>
<!--下拉框-->
<select name="from">
<option value="徽" selected>安徽</option>
<option value="沪" selected>上海</option>
</select>
<!-- 隐藏域-->
<input type="hidden" name="hidden" value="hhhh"><br>
<button type="submit">确认</button>
<button type="reset">重置</button>
</form>
</body>
</html>
框架标签
<a href="https://taobao.com" target="1">taobao</a><br>
<iframe name="1" frameborder="0" width="1000"></iframe>
iframe
字符实体
<
&nbsp;
©
全局属性
meta元信息
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
网友评论