1. HTML的基本机构

文档声明，用来指定页面所使用的html版本，这里声明的是一个html5的文档。
```
<!DOCTYPE html>
```
html的开始标签和结束标签
```
<html>……</html>
```
定义文档的头部，负责对网页进行设置标题、编码格式以及引入css和js文件。
```
<head>……</head>
```
编写网页上显示的内容。
```
<body>……</body>
```

2. 开发工具

Visual Studio Code
插件推荐
- Chinese(Simplified) Language Pack for VS Code：中文（简体）汉化包
- open in browser：右键在浏览器打开html

3. 常见的html标签

标签不区分大小写，推荐小写
根据标签的书写形式，分为双标签（闭合标签）和单标签（空标签）

4. 资源路径

绝对路径
相对路径

5. 表单提交

表单用于搜集不同类型的用户输入（用户输入的数据），然后可以把用户数据提交到web服务器。

9. html标签总结

代码实例

<!-- 文档声明：html5的文档 -->
<!DOCTYPE html>
<!-- 当前网页的语言是英文，默认是中文=>lang="zh" -->
<html lang="en">
<head>
    <!-- 指定网页的编码格式 -->
    <meta charset="UTF-8">
    <!-- 在移动设备浏览网页时，网页不缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 在ie浏览器浏览网页时，使用ie的最高版本 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 网页标题 -->
    <title>Document</title>
</head>
<body>
    <!-- 双标签 -->
    <h1>h1标题</h1>
    <div>div标签</div>
    <p>段落标签</p>
    <!-- 单标签 -->
    <br>
    <img src="*.*" alt="图片标签">
    <!-- 带属性的标签 -->
    <img src="*.*" alt="图片标签">
    <a href="http://www.ccblogs.com">ccblogs</a>
    <!-- 标签的嵌套 -->
    <div>
        <img src="*.*" alt="图片标签">
    	   <a href="http://www.ccblogs.com">ccblogs</a>
    </div>
    <!-- ul定义无序列表 -->
    <ul>
 	   <!-- li定义列表标签项目 -->
 	   <li>列表标题一</li>
 	   <li>列表标题二</li>
 	   <li>列表标题三</li>
    </ul>
    <!-- ol定义有序列表 -->
    <ol>
 	   <!-- li定义列表标签项目 -->
 	   <li>列表标题一</li>
 	   <li>列表标题二</li>
 	   <li>列表标题三</li>
    </ol>>
    <!-- 表格标签 -->
    <!-- border-collapse: collapse; 设置表格的边线合并 -->
    <table style="border-collapse: collapse;">
 	   <!-- 标题 -->
 	   <th>
 		   <!-- 列 -->
 		   <td>No</td>
 	   </th>
 	   <!-- 行 -->
 	   <tr>
 		   <td>1</td>
 	   </tr>
    </table>
    <!-- 表单标签，定义整体的表单区域 -->
    <!-- action属性表示要提交到的服务器，method属性表示提交的方法，name属性表示提交的参数名 -->
    <form action="www.ccblogs.com" method="GET">
        <label>label标签</label>
        <!-- 单行文本输入框 -->
        <input type="text" name="">
        <!-- 密码输入框 -->
        <input type="password" name="">
        <!-- 单选框 -->
        <!-- name属性设置选项互斥 -->
        <input type="radio" name="">
        <!-- 复选框 -->
        <input type="checkbox" name="">
        <!-- 上传文件 -->
        <input type="file" name="">
        <!-- 提交按钮 -->
        <input type="submit" name="">
        <!-- 重置按钮 -->
        <input type="reset" name="">
        <!-- 普通按钮 -->
        <input type="button" name="">
        <!-- 表单元素的多行文本输入框标签，定义多行文本输入框 -->
        <textarea></textarea>
        <!-- 下拉列表标签 -->
        <select>
            <option>1</option>
            <option>2</option>
        </select>
    </form>
</body>
</html>

姜晶

发布了13 篇原创文章 · 获赞 2 · 访问量 817

私信关注

1、HTML基础

HTML基础

1. HTML的基本机构

2. 开发工具

3. 常见的html标签

4. 资源路径

5. 表单提交

9. html标签总结

猜你喜欢