✨博客主页 https://blog.csdn.net/m0_63815035?typeblog《博客内容》大数据、Java、测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识博客专栏https://blog.csdn.net/m0_63815035/category_11954877.html欢迎点赞 收藏 ⭐留言 本文为学习笔记资料如有侵权请联系我删除疏漏之处还请指正大厦之成非一木之材也大海之阔非一流之归也✨目录一、Web 工作原理快速回顾二、HTML 文档基础1. 文档类型声明DOCTYPE2. 基本结构模板3. head 中常用标签三、HTML 元素分类与显示模式1. 块级元素Block2. 行内元素Inline3. 行内块元素Inline-block四、常用标签详解补充1. 文本格式化补充2. 链接与锚点3. 多媒体元素图片 img视频 video音频 audio嵌入外部内容 iframe4. HTML5 语义化标签布局利器5. 列表进阶6. 表格进阶7. 表单增强HTML5新的 input 类型常用新属性表单分组8. 其他实用标签五、字符实体转义字符六、全局属性所有标签通用七、路径写法八、注释与代码规范九、SEO 基础补充十、浏览器兼容性提示十一、扩展HTML 与 CSS、JS 的关系十二、案例作业完善人物简历一、Web 工作原理快速回顾HTTP超文本传输协议是浏览器与服务器之间的通信语言。流程输入 URL → DNS 解析 → 发送 HTTP 请求 → 服务器返回 HTML/CSS/JS → 浏览器渲染。URL统一资源定位符例如https://example.com/page.html。二、HTML 文档基础1. 文档类型声明DOCTYPE作用告诉浏览器使用哪种 HTML 标准解析页面。推荐写法HTML5!DOCTYPE html必须放在文档第一行否则触发“怪异模式”导致布局错误。2. 基本结构模板!DOCTYPEhtmlhtmllangzh-CN!-- lang 属性有助于搜索引擎和读屏软件 --headmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title文档标题/titlemetanamedescriptioncontent页面描述用于SEOmetanamekeywordscontent关键词1,关键词2linkrelstylesheethrefstyle.cssscriptsrcscript.jsdefer/script/headbody!-- 页面内容 --/body/html3.head中常用标签标签作用meta charsetUTF-8声明字符编码推荐 UTF-8meta nameviewport控制移动端适配meta http-equivX-UA-Compatible contentIEedge强制 IE 使用最新渲染引擎title浏览器标签页标题link引入外部 CSS 或 faviconstyle内部 CSSscript引入或编写 JS三、HTML 元素分类与显示模式1. 块级元素Block独占一行默认宽度 100%可设宽高、内外边距。常见div、h1~h6、p、ul、ol、li、table、form、header、footer、section、article、nav、aside。2. 行内元素Inline不换行宽高由内容决定不可设上下边距。常见span、a、strong、em、img虽为替换元素但默认为行内、br、i、b。3. 行内块元素Inline-block不换行但可设宽高、内外边距。常见img、input、button、select、textarea。 可通过 CSS 的display属性改变元素类型如display: inline-block。四、常用标签详解补充1. 文本格式化补充标签语义strong重要文本加粗em强调斜体mark高亮标记small小号字如版权声明del删除文本ins插入文本sub/sup下标 / 上标2. 链接与锚点!-- 普通链接 --ahrefhttps://example.comtarget_blankrelnoopener新标签页打开/a!-- 锚点跳转 --ahref#section1跳转到 section1/ah2idsection1章节1/h2!-- 返回顶部 --ahref#返回顶部/a!-- 发送邮件 --ahrefmailto:someoneexample.com发送邮件/a!-- 拨打电话移动端 --ahreftel:123456789拨打电话/a3. 多媒体元素图片imgimgsrcphoto.jpgalt描述文字width300height200loadinglazyalt必须写提升可访问性。loadinglazy懒加载优化性能。视频videovideocontrolswidth600posterpreview.jpgsourcesrcmovie.mp4typevideo/mp4sourcesrcmovie.oggtypevideo/ogg您的浏览器不支持 video 标签。/video音频audioaudiocontrolssourcesrcaudio.mp3typeaudio/mpeg您的浏览器不支持 audio 元素。/audio嵌入外部内容iframeiframesrchttps://www.youtube.com/embed/xxxwidth560height315allowfullscreen/iframe4. HTML5 语义化标签布局利器标签含义header页眉或区域头部nav导航链接main页面主内容一个页面唯一article独立文章section文档中的一个区块aside侧边栏或附属信息footer页脚示例bodyheader网站标题/headernav导航菜单/navmainarticleh1文章标题/h1p内容.../p/articleaside相关链接/aside/mainfooter版权信息/footer/body5. 列表进阶定义列表dldt术语dd描述dldtHTML/dtdd超文本标记语言/dddtCSS/dtdd层叠样式表/dd/dl6. 表格进阶合并单元格colspan跨列、rowspan跨行tableborder1trtdcolspan2合并两列/td/trtrtdrowspan2合并两行/tdtd单元格/td/trtrtd另一行/td/tr/table表格结构thead、tbody、tfoot提升语义和滚动时头部固定7. 表单增强HTML5新的 input 类型类型示例说明emailinput typeemail内置邮箱格式验证numberinput typenumber min1 max10数字输入带增减按钮telinput typetel电话号码不验证格式urlinput typeurl网址格式验证dateinput typedate日期选择器timeinput typetime时间选择器colorinput typecolor颜色选择器rangeinput typerange min0 max100滑块searchinput typesearch搜索框带清除按钮常用新属性属性说明placeholder提示文字输入框内灰色提示required必填字段autofocus页面加载时自动聚焦autocompleteon/off是否启用自动完成multiple允许多选如文件上传pattern正则自定义输入格式验证表单分组fieldsetlegend个人信息/legendlabel姓名inputtypetextnamename/labellabel年龄inputtypenumbernameage/label/fieldset8. 其他实用标签标签作用progress value70 max10070%/progress进度条meter value0.660%/meter度量条如磁盘使用率detailssummary更多信息/summary隐藏内容/details可折叠面板dialog对话框需配合 JS 或open属性五、字符实体转义字符显示实体名数字形式空格nbsp;#160;lt;#60;gt;#62;amp;#38;©copy;#169;®reg;#174;“ ”ldquo;rdquo;#8220;#8221;六、全局属性所有标签通用属性说明id唯一标识符用于 CSS/JS / 锚点class类名用于 CSS 或 JS 批量控制style内联样式title鼠标悬停时显示的提示文本data-*自定义数据属性如data-user-id123hidden隐藏元素tabindex控制 Tab 键切换顺序lang定义元素语言七、路径写法相对路径推荐用于同网站image/photo.jpg– 当前目录下的 image 文件夹../photo.jpg– 上一级目录绝对路径https://example.com/photo.jpg– 完整 URL/photo.jpg– 从网站根目录开始八、注释与代码规范注释!-- 这是注释不会显示在页面中 --注释的作用解释代码、标记待办、临时禁用代码。规范建议标签名、属性名一律小写。属性值始终加引号双引号优先。自闭合标签如img、br、hr在 HTML5 中可不写斜杠但写/更安全兼容 XHTML。合理缩进提高可读性。九、SEO 基础补充除了title、meta namedescription、meta namekeywords外使用语义化标签article、section等帮助搜索引擎理解结构。图片添加alt属性。为链接写有意义的描述不要用“点击这里”。保证页面有清晰的h1~h6层级。使用canonical标签避免重复内容link relcanonical href主链接。十、浏览器兼容性提示使用 HTML5 新标签时对于老旧 IE 浏览器可引入html5shiv.js使其支持。表单新类型如date在不同浏览器中显示样式不同可使用 polyfill 或统一 UI 组件库。使用 CSS 前缀或自动化工具如 Autoprefixer处理兼容性。十一、扩展HTML 与 CSS、JS 的关系HTML结构骨架CSS表现外观JavaScript行为交互最佳实践结构、样式、行为分离尽量不使用内联样式和内联事件。十二、案例作业完善人物简历在原有吴彦祖简历基础上要求将导航区div idnavigation改为nav标签内部列表改为语义化。为主体内容添加main标签各部分用section包裹。在获奖记录部分制作一个完整表格至少包含年份、奖项名称、结果。为联系表单增加email类型的输入框并添加required属性。在页面底部添加一个details标签展示参考资料来源。今天这篇文章就到这里了大厦之成非一木之材也大海之阔非一流之归也。感谢大家观看本文