HTML常用标签详解学习博客：从基础标签到页面结构完整掌握

一、HTML标签基础概念1. 什么是HTML标签HTML使用**标签Tag**来描述网页结构。基本格式标签名内容/标签名例如p这是一个段落/p其中p是开始标签/p是结束标签中间的内容是标签内容2. 单标签和双标签1双标签有开始和结束p我是段落/p常见h1/h1 p/p div/div a/a2单标签只有一个标签例如img srcphoto.jpg常见img br hr input二、HTML文档基本结构一个完整HTML页面!DOCTYPE html html head title我的网页/title /head body 网页显示内容 /body /html结构说明标签作用!DOCTYPE html声明HTML5文档html网页根标签head网页头部信息title网页标题body网页主体内容三、格式化标签HTML提供了一些标签用于控制文字显示效果。1. 标题标签 h1-h6HTML提供6级标题h1一级标题/h1 h2二级标题/h2 h3三级标题/h3效果一级标题 ↓ 二级标题 ↓ 三级标题特点h1最大h6最小实际开发h1个人博客首页/h1 h2技术文章/h22. 段落标签 p用于表示一段文字p HTML是网页开发的基础语言。 /p特点自动换行段落之间有间距3. 换行标签 br作用强制换行代码你好br 世界显示你好 世界注意br是单标签。4. 水平线标签 hr创建分割线hr效果-----------------常用于文章分割内容区域划分5. 加粗标签strong标签推荐strong重要内容/strong效果重要内容b标签b加粗文字/b区别标签含义strong强调重要性b单纯视觉加粗开发推荐strong6. 斜体标签em标签em强调文字/emi标签i斜体文字/i7. 删除线标签del 原价格999元 /del显示原价格999元常用于商品价格修改内容8. 下划线标签u 重点内容 /u四、图片标签 img图片是网页的重要组成部分。基本语法img src图片地址例如img srccat.jpgimg常用属性1.src属性srcsource资源表示图片路径。例如img src./images/logo.png2.alt属性图片加载失败时显示文字。img srclogo.png alt网站logo作用提高用户体验SEO优化无障碍访问3.width和height属性设置图片大小img srcdog.jpg width300 height200单位默认px像素五、超链接标签 a超链接用于跳转网页。基本格式a href地址 链接文字 /a例如a hrefhttps://www.baidu.com 百度 /a点击跳转百度。六、a标签 href属性hrefHypertext Reference超文本引用。作用指定跳转地址。例如a hrefhttps://www.google.com Google /ahref跳转类型1. 外部网站a hrefhttps://www.baidu.com 百度 /a2. 本地页面目录项目 index.html about.html跳转a hrefabout.html 关于我们 /a3. 锚点跳转跳转页面某位置。定义h2 idjava Java学习 /h2跳转a href#java Java章节 /a七、a标签 target属性target控制链接打开方式。1._self默认方式当前窗口打开。a hrefhttps://www.baidu.com target_self 百度 /a2._blank新窗口打开。a hrefhttps://www.baidu.com target_blank 百度 /a常用网站外链。八、列表标签HTML提供三种列表无序列表有序列表自定义列表1. 无序列表 ul语法ul liHTML/li liCSS/li liJavaScript/li /ul显示HTMLCSSJavaScript特点默认圆点。2. 有序列表 olol li第一步/li li第二步/li li第三步/li /ol显示第一步第二步第三步适合教程步骤。3. 自定义列表 dl结构dl dtHTML/dt dd 网页结构语言 /dd /dl含义标签作用dl列表整体dt标题dd描述常用于商品介绍、名词解释。九、表格标签 table表格用于展示数据。基本结构table tr td姓名/td td年龄/td /tr /tabletable相关标签标签作用table表格tr行td单元格th表头示例table border1 tr th姓名/th th成绩/th /tr tr td张三/td td90/td /tr /table显示姓名成绩张三90十、表单标签 form表单用于收集用户信息。例如登录注册搜索基本结构form 用户名 input /form十一、input输入框input是最重要的表单元素。文本框input typetext效果请输入内容密码框input typepassword输入******单选按钮input typeradio 男 input typeradio 女复选框input typecheckbox 篮球 input typecheckbox 足球文件上传input typefile提交按钮input typesubmit十二、按钮标签 buttonbutton 登录 /button相比inputbutton更加灵活。例如button img srcicon.png 提交 /button十三、select下拉列表select option 北京 /option option 上海 /option /select效果北京 ▼十四、textarea多行文本框用于输入大量文字。例如留言textarea /textarea常用于评论简介留言十五、div标签div是最常用布局标签。div 网页内容 /div特点没有特殊含义用于页面布局例如div classheader 网站头部 /div div classcontent 文章内容 /div十六、span标签用于修饰一小段文字。例如p 价格 span 99元 /span /p特点行内元素不会换行十七、语义化标签 HTML5HTML5新增标签作用header头部nav导航main主要内容article文章section区域footer底部aside侧边栏示例header 网站Logo /header nav 首页 新闻 /nav article 文章内容 /article footer 版权信息 /footer十八、HTML标签学习总结HTML常用标签体系HTML ├── 文本标签 │ ├── h1-h6 标题 ├── p 段落 ├── strong 加粗 ├── em 强调 │ ├── 媒体标签 │ ├── img 图片 │ ├── 链接标签 │ ├── a │ ├── href │ └── target │ ├── 列表标签 │ ├── ul ├── ol ├── dl │ ├── 表格 │ ├── table ├── tr ├── td │ ├── 表单 │ ├── form ├── input ├── select ├── textarea │ └── 布局标签 div span学习建议HTML阶段重点掌握标签结构标签属性页面布局表单交互HTML5语义化HTML只是网页的骨架HTML ↓ 网页结构 CSS ↓ 网页样式 JavaScript ↓ 网页交互