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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
