HTMLHyperText Markup Language超文本标记语言是构建网页的基础语言。它通过**标签Tag**来描述网页的结构而不是编写程序逻辑。一、HTML 页面基本结构一个完整的 HTML 页面如下!DOCTYPE html html head meta charsetUTF-8 title我的第一个网页/title /head body h1Hello World/h1 /body /html结构说明元素作用!DOCTYPE html声明HTML5文档html整个网页根元素head网页信息不会显示body网页内容会显示二、HTML 元素组成HTML元素通常由三部分组成p我是一个段落/p包括开始标签 p 内容 我是一个段落 结束标签 /p有些标签没有结束标签例如br hr img称为空元素Void Element。三、标题元素HeadingHTML提供6级标题。h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6显示效果一级标题最大 二级标题 三级标题 ... 六级标题最小说明h1最大h6最小一个页面建议只有一个h1四、段落元素p这是第一段。/p p这是第二段。/p浏览器会自动换行。例如p 今天学习HTML 非常简单。 /p浏览器显示今天学习HTML 非常简单。HTML会忽略多个空格和换行。五、换行元素br例如你好br 世界显示你好 世界六、水平线hr效果------------------------通常用于内容分隔。七、注释!-- 这是注释 --浏览器不会显示。例如!-- 首页标题 -- h1欢迎来到我的网站/h1八、文本格式元素粗体b粗体/b推荐strong重要内容/strong斜体i斜体/i推荐em强调/em删除线del100元/del显示100元下划线u下划线/u高亮mark重点/mark上标2sup3/sup显示2³下标Hsub2/subO显示H₂O九、列表元素无序列表ul li苹果/li li香蕉/li li西瓜/li /ul显示• 苹果 • 香蕉 • 西瓜有序列表ol li第一步/li li第二步/li li第三步/li /ol显示1. 2. 3.自定义列表dl dt水果/dt dd苹果/dd dd香蕉/dd /dl十、链接元素a hrefhttps://www.baidu.com 百度 /a打开新窗口a hrefhttps://www.baidu.com target_blank 百度 /a常见属性属性作用href网址target打开方式title提示文字十一、图片元素img srccat.jpg alt小猫 width300属性属性作用src图片地址alt图片说明width宽度height高度例如img srcdog.png width200 height150十二、表格元素基本结构table tr th姓名/th th年龄/th /tr tr td张三/td td18/td /tr /table组成table │ ├──tr行 │ ├──th表头 │ └──td单元格十三、表单元素输入框input typetext密码框input typepassword按钮input typebutton value按钮提交input typesubmit复选框input typecheckbox单选框input typeradio文本域textarea/textarea下拉菜单select option中国/option option美国/option /select十四、容器元素div块级元素div 这是一个区域 /div特点独占一行用于布局最常用span行内元素span红色文字/span特点不换行用于局部修改样式十五、HTML5 常用语义化元素HTML5 提供了更有语义的布局标签header 网站头部 /header nav 导航栏 /nav main 页面主体 /main section 内容区域 /section article 文章 /article aside 侧边栏 /aside footer 页脚 /footer相比大量使用div这些标签能让代码更易读也更利于搜索引擎和辅助工具理解页面结构。十六、常见 HTML 元素速查表分类标签用途文档html、head、body页面结构标题h1~h6标题文本p、strong、em、span文本内容换行br换行分隔hr水平分隔线链接a超链接图片img显示图片列表ul、ol、li、dl列表表格table、tr、th、td表格表单form、input、textarea、select用户输入布局div、header、nav、main、section、article、aside、footer页面布局