<head>...</head>标签用于定义文档的头部，是负责对网页进行设置标题、编码格式以及引入css和js文件的
<body>...</body>标签是编写网页上显示的内容
<!-- 文档声明：html5的文档 -->
<!DOCTYPE html>
<!-- 当前网页的语言是英文 默认不指定是中文 lang="zh "-->
<html lang="en">
<head>
<!-- 指定网页的编码格式 -->
<meta charset="UTF-8">
<!-- 在移动设备浏览网页时，网页不缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
VSCode中编写Html程序，在默认浏览器打开，快捷键：
alt + b
在其他浏览器中打开，快捷键：shift + alt + b
修改VSCode的默认浏览器
设置VSCode代码自动保存
标签
- 标签是不区分大小写的，但是推荐使用小写
2.根据标签的书写形式，标签分为双标签（闭合标签）和单标签（空标签）
<!-- 成对标签 -->
<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这是一个段落标签</p>
<!-- 单个出现的标签 -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>
<!-- 带属性的标签 -->
<img src="images/pic.jpg" alt="图片">
<a href="https://wwww.baidu.com">百度网</a>
<!-- 标签的嵌套 -->
<div>
<img src="images/pic.jpb" alt="图片">
<a href="https://www.baidu.com">百度网</a>
</div>
列表标签
<ul>
<li>无序</li>
<li>无序</li>
</ul>
<ol>
<li>有序</li>
<li>有序</li>
</ol>
表格标签
表格由行和列组成
<table> 标签：表示一个表格
<tr>标签：表示表格中的一行
<td>标签：表示表格中的列
<th>标签：表示表格中的表头
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>0</td>
<td>张三</td>
<td>18</td>
</tr>
</table>
表单
表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器
<form> 标签 表示表单标签，定义整体的表单区域
<label> 标签 表示表单元素的文字标注标签，定于文字标注
<input> 标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
<input> 标签 数据type
* type = "text" 定义单行文本输入框
* type = ”password“ 定义密码输入框
* type = "radio" 定义单选框
* type = ”checkbox“ 定义复选框
* type = "file" 定义上传文件
* type = "submit" 定义提交按钮
* type = ”reset“ 定义重置按钮
* type = "button" 定义一个普通按钮
<textarea> 标签 表示表单元素的多行文本输入框标签 定义多行文本输入框
<select> 标签 表示表单元素的下拉列表标签，定义下拉列表
<option> 标签 与 <select> 标签配合，定义下拉列表中的选项
表单属性设置
action属性：设置表单提交数据的地址
methond属性：设置表单提交的方式，一般的有”GET“和”POST“方式，不区分大小写
表单元素数据设置
name属性：设置表单元素的名称，该名称是提交数据时的参数名
value属性：设置表单元素的值，该值是提交数据时参数名所对应的值
# 例如：提交数据到百度
<body>
<!-- 把数据提交到web服务器需要使用表单标签 -->
<form action="https://www.baidu.com" method="GET">
<p>
<!-- for 根据id名给指定id的标签设置为第一响应者 -->
<!-- 也就是说点击用户名之后，对应的输入框会变成第一响应者 -->
<label for="name">用户名：</label>
<input type="text" id="name" name="username">
</p>
<p>
<label>密码：</label>
<input type="password" name="password">
</p>
<p>
<!-- 单选 -->
<label for="">性别：</label>
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
</p>
<p>
<!-- 多选 -->
<label for="">爱好：</label>
<input type="checkbox" name="like" value="lanqiu">篮球
<input type="checkbox" name="like" value="zuqiu">足球
<input type="checkbox" name="like" value="wangqiu">网球
</p>
<p>
<!-- 文件选择 -->
<label for="">照片：</label>
<input type="file" name="pic">
</p>
<p>
<!-- 多行输入框 -->
<label for="">描述：</label>
<textarea name="desc" rows="10"></textarea>
</p>
<p>
<!-- 选项 -->
<label for="">籍贯：</label>
<select name="site" id="">
<option value="gz">广州</option>
<option value="sz">深圳</option>
<option value="zh">珠海</option>
<option value="st">汕头</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</p>
</form>
</body>
网友评论