位置: IT常识 - 正文
HTML【前端基础】(html前端技术)
编辑：rootadmin推荐整理分享HTML【前端基础】(html前端技术)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:html5前端教程,html5前端教程,html&js+前端,html前端开发教程,html前端架构,html 前端,html前端页面设计,html 前端,内容如对您有帮助，希望把文章链接给更多的朋友！
目录
1.HTML 结构
1.1 HTML 标签
1.2 HTML 文件基本结构
1.3 标签层次结构
1.4 快速生成代码框架
2.HTML 常见标签
2.1 注释标签
2.2 标题标签: h1-h6
2.3 段落标签：p
2.4 换行标签: br
2.5 格式化标签
2.6 图片标签: img
2.7 超链接标签: a
2.8 表格标签
2.8.1 合并单元格
2.9 列表标签
2.10 表单标签
2.10.1 form 标签
2.10.2 input 标签
2.10.3 label 标签
2.10.4 select 标签
2.10.5 textarea 标签
2.10.6 无语义标签: div & span
🌈🌈🌈一篇文字带你了解使用 HTML
1.HTML 结构超文本标记语言（Hyper Text Markup Language）
1.1 HTML 标签HTML 代码是由 "标签" 构成的
<body>hello</body>1️⃣标签名 (body) 放到 < > 中
2️⃣大部分标签成对出现. <body> 为开始标签, </body> 为结束标签
3️⃣少数标签只有开始标签, 称为 "单标签"
4️⃣开始标签和结束标签之间, 写的是标签的内容. (hello)
5️⃣开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)
1.2 HTML 文件基本结构<html> <head> <title>第一个页面</title> </head> <body> hello world </body></html>html 标签是整个 html 文件的根标签(最顶层标签)head 标签中写页面的属性.body 标签中写的是页面上显示的内容title 标签中写的是页面的标题.打开 Visual Studio Code,创建一个html-demo.html的一个文本文件(这里要注意所有目录不要出现中文)：
<html> <head> <title>我的第一个html页面</title> </head> <body> hello world </body></html>然后我们双击刚刚路径下的html-demo.html文件（尽量用edge、Google），看效果：
1.3 标签层次结构其中:
head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)title 是 head 的子标签. head 是 title 的父标签.head 和 body 之间是兄弟关系.可以使用 chrome 的开发者工具查看页面的结构；F12 或者右键审查元素, 开启开发者工具, 切换到 Elements 标签, 就可以看到页面结构细节.标签之间的结构关系, 构成了一个DOM 树 ——DOM 是 Document Object Mode (文档对象模型) 的缩写.1.4 快速生成代码框架在刚刚创建的一个 html-demo.html 里边输入 htlm，选择 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></body></html>简单了解：
<!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
<html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览器会根据此处的上一篇：21世纪20年代的ConvNet——ConvNeXt(21世纪20年代的中国)
下一篇：Vue3动态路由（Vite+Vue3+TS+Mock）(vue3动态路由权限)