1.第一个网页：
<!-- 文档声明: html5的文档 -->
<!DOCTYPE html>
<!-- 当前网页的语言是英文 -->
<html lang="en">
<head>
<!-- 指定网页的编码格式 -->
<meta charset="UTF-8">
<!-- 在移动设备浏览网页时，网页不缩放 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 在ie浏览器浏览网页时, 使用ie的最高版本 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello
</body>
</html>2.常用的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 双标签:成对出现的标签 -->
<h1>我是第一个标题</h1>
<h6>我是第一个标题</h6>
<div>我是一个容器标签，可以包裹其他标签内容</div>
<p>我是一个段落标签</p>
<!-- 单标签：只有一个标签， 没有标签内容 -->
<hr>
<img src="435.jpg" alt="图片信息加载失败会显示" />
<br>
<img src="../876740312508119373.jpg" />
<!-- 带有属性标签 -->
<a href="https://www.baidu.com">百度</a>
<!-- 标签可以嵌套 -->
<div>
</div>
</body>
</html>3.列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 列表标签可以分为有序列表标签和无序列表标签 -->
<!-- 无序列表标签 -->
<ul>
<li>苹果</li>
<li>鸭梨</li>
</ul>
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
<!-- 强调显示的顺序使用有序列表标签，不强调则使用无序列表 -->
</body>
</html>4.表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- border-collapse: collapse 表示表格的边线进行合并 -->
<table style="border: 1px solid black; border-collapse: collapse">
<tr>
<th style="border: 1px solid black;">姓名</th>
<th style="border: 1px solid black;">年龄</th>
</tr>
<tr>
<td style="border: 1px solid black;">张三</td>
<td style="border: 1px solid black;">22</td>
</tr>
</table>
</body>
</html>5.表单标签与提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 把数据提交给web服务器需要使用表单标签:<form> -->
<form action="http://www.baidu.com" method="POST">
<p>
<labal>用户名:</labal>
<input type="text" id="name" name="username">
</p>
<p>
<label>密码:</label>
<input type="password" name="password">
</p>
<p>
<label>性别:</label>
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="love" value="学习">学习
<input type="checkbox" name="love" value="打球">打球
<input type="checkbox" name="love" value="上课">上课
</p>
<p>
<label>照片:</label>
<input type="file" name="pic">
</p>
<p>
<label>个人描述:</label>
<textarea name="desc"></textarea>
</p>
<p>
<label>籍贯:</label>
<select name="position">
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">天津</option>
<option value="4">广东</option>
<option value="5">湖北</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</p>
</form>
</body>
</html>
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
