1 html基础-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44638744/article/details/119221681

本文介绍了HTML的基础语法，包括文档声明、元标签、标题、段落等常见标签。同时，讲解了VScode中安装的两个实用插件：中文语言包和快速在浏览器中预览页面的插件。还详细阐述了HTML表格、无序列表、有序列表、表单元素的使用，以及表单数据的提交方法和属性设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 html基础

1.1 结构代码

<!-- 文档声明：html5的文档 -->
<!DOCTYPE html>
<!-- 当前网页的语言是英文 不指定默认lang="zh"-->
<html lang="en">
<head>
    <!-- 指定网页的编码格式 -->
    <meta charset="UTF-8">
    <!-- 在ie浏览器浏览网页时，使用ie的最高版本 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 在移动设备浏览网页时，网页不缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页的标题 -->
    <title>网页标题</title>
</head>
<body>
    <!-- windos vs code注释：ctr + / -->
    hello
</body>
</html>

1.2 VS code操作

安装两个插件
1 中文语言包：Chinese (Simplified) Language Pack for Visual Studio Code
2 快速在浏览器打开：open in browser
	key					command
	Alt + B				open in default browser在默认浏览器打开
	Shift + Alt + B		open in specified browser在特殊浏览器打开

1.3 常见的html标签

1、双标签，成对出现的标签
	<h1>一级标题</h1>
	<h6>六级标题</h6>
	<div>容器标签</div>
	<p>段落标签</p>
2、单标签，只有一个标签，没有标签内容
	<hr>	水平分隔线
	<br>	换行符
	<img src="路径" alt="出现错误显示的内容">			图片标签
3、带有属性的标签
	<a href="https://www.baidu.com">百度</a>		网页标签
4、标签可以嵌套，但是不能交叉嵌套
	<div>
        <p>段落标签</p>
    </div>
5、html不区分大小写，建议使用小写
6、无序列表<ul>
	<ul>
        <li>苹果</li>
        <li>桃子</li>
    </ul>
7、有序列表<ol>
    <ol>
        <li>苹果</li>
        <li>桃子</li>
    </ol>
8、表格标签
 <!-- 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>
            <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;">19</td>
            <td style="border:1px solid black;">高三1班</td>
            <td style="border:1px solid black;">20151506157</td>
       </tr>
   </table>
9、表单标签
   <form>
       <label>姓名:</label>
       <input type="text">
       <br>
       <label>密码:</label>
       <input type="password">
       <br>
       <label>性别:</label>
       <input type="radio">男
       <input type="radio">女
       <br>
       <label>爱好</label>
       <input type="checkbox">学习
       <input type="checkbox">打球
       <input type="checkbox">睡觉
       <br>
       <label>照片</label>
       <input type="file">
       <br>
       <label>个人描述</label>
       <textarea></textarea>
       <br>
       <label>籍贯</label>
       <select>
           <option>北京</option>
           <option>上海</option>
           <option>深圳</option>
           <option>澳门</option>
       </select>
       <br>
       <input type="submit" value="提交按钮">
       <br>
       <input type="reset" value="重置按钮">
       <br>
       <input type="button" value="普通按钮">
   </form>

<input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
type属性
	type="text" 定义单行文本输入框
	type="password" 定义密码输入框
	type="radio" 定义单选框
	type="checkbox" 定义复选框
	type="file" 定义上传文件
	type="submit" 定义提交按钮
	type="reset" 定义重置按钮
	type="button" 定义一个普通按钮

2 表单提交

<form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名：</label><input type="text" name="username" value="11">
    </p>
    <p>
        <label>密码：</label><input type="password" name="password">
    </p>
    <p>
        <label>性别：</label>
        <input type="radio" name="gender" value="0"> 男
        <input type="radio" name="gender" value="1"> 女
    </p>
    <p>
        <label>爱好：</label>
        <input type="checkbox" name="like" value="sing"> 唱歌
        <input type="checkbox" name="like" value="run"> 跑步
        <input type="checkbox" name="like" value="swiming"> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>个人描述：</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍贯：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

小结
表单标签的作用就是可以把用户输入数据一起提交到web服务器。
表单属性设置
	action: 是设置表单数据提交地址
	method: 是表单提交方式，提交方式有GET和POST
表单元素属性设置
	name: 表单元素的名称，用于作为提交表单数据时的参数名
	value: 表单元素的值，用于作为提交表单数据时参数名所对应的值