<!DOCTYPE html>
<!-- en表示英文，zh-CN表示中文 -->
<html lang="en">
<head>
<!-- 1:原标签meta：指定编码 -->
<!-- 2:自动保存 file + Auto save -->
<!-- 3:设置字体大小setting + settings + TextEditor + Fount -->
<!-- 4:设置背景setting + colorTheme -->
<!-- 5:设置默认浏览器 setting + settings + Extensions +Set Defaulate browser -->
<meta charset="UTF-8">
<!-- 4：手机打开页面，不缩放，如果缩放就手机查看很小 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用标签</title>
</head>
<body>
<!-- 1：标题 h1到h6 -->
<!-- 一次选中多个地方：alt + 光标 -->
<!-- ait+shift+向下 快速复制一行 -->
<h1>标题1</h1>
<h2>标题1</h2>
<h3>标题1</h3>
<h4>标题1</h4>
<h5>标题1</h5>
<h6>标题1</h6>
<!-- 2：段落与换行 -->
<p>啦啦啦啦啦啦啦啦啦啦<br>啦啦啦啦</p>
<p>啦啦啦啦啦啦啦啦啦啦<br>啦啦啦啦</p>
<!-- 3：行分割线 特点：一行显示所有 -->
<hr>
啪啪啪啪啪啪铺
啊啊啊啊啊啊
啦啦啦啦啦啦啦啦啦啦
<hr>
<!-- 4:图片标签 alt:找不到图片显示文字 ，图片默认横着排列-->
<img src="images/pic.jpg" alt="图片">
<img src="images/pic.jpg" alt="图片">
<!-- 5:div盒子标签 -->
<div>
</div>
<!-- 6：超链接 -->
<a href="http://www.baidu.com">百度网址</a>
<a href="http://www.baidu.com"><img src="images/pic.png" alt="图片"></a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表-表格-表单</title>
</head>
<body>
<!-- 1：有序列表:开头默认数字 -->
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
<!-- 2：无序列表：开头默认圆点 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
<!-- 3：表格：多行多列 -->
<table style="border: 1px black solid; border-collapse: collapse;">
<tr>
<th style="border: 1px black solid; border-collapse: collapse;">姓名</th>
<th style="border: 1px black solid; border-collapse: collapse;">年龄</th>
<th style="border: 1px black solid; border-collapse: collapse;">电话</th>
</tr>
<tr>
<td style="border: 1px black solid; border-collapse: collapse;">任善文</td>
<td style="border: 1px black solid; border-collapse: collapse;">23</td>
<td style="border: 1px black solid; border-collapse: collapse;">1785203203</td>
</tr>
<tr>
<td style="border: 1px black solid; border-collapse: collapse;">牛牛</td>
<td style="border: 1px black solid; border-collapse: collapse;">26</td>
<td style="border: 1px black solid; border-collapse: collapse;">1785203203</td>
</tr>
</table>
<!-- 4：表单标签 -->
<form action="http://www.baidu.com" method="GET">
<!--单行文本框 -->
<p>
<label>姓名：</label>
<input type="text" value="任善文">
</p>
<!-- 密码输入框 -->
<p>
<label>密码:</label>
<input type="passworld">
</p>
<!-- 单选框 -->
<p>
<label>性别:</label>
<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女
</p>
<!-- 复选框 -->
<p>
<label>爱好:</label>
<input type="checkbox" name="like" value="basktbal">篮球
<input type="checkbox" name="like" value="football">足球
</p>
<!-- 单行文本 -->
<p>
<label>照片：</label>
<input type="file">
</p>
<!-- 多行文本 -->
<p>
<label>个人描述：</label>
<textarea></textarea>
</p>
<!-- 下拉列表 -->
<p>
<label>籍贯：</label>
<select>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">德州</option>
</select>
</p>
<!-- 提交按钮 -->
<p>
<input type="submit" value="提交">
</p>
<!-- 重置按钮 -->
<p>
<input type="reset" value="重置">
</p>
<!-- 普通按钮 -->
<p>
<input type="button" value="普通按钮">
</p>
</form>
</body>
</html>
浙公网安备 33010602011771号