一. 图片✅ 必须掌握的核心用法img src图片路径 alt替换文本src图片的来源路径或网址——必填。alt图片加载失败时显示的文本也有助于无障碍访问屏幕阅读器——建议必填。2. 路径写法重点在 VS Code 里写src的时候直接按Ctrl 空格或Alt 箭头它会弹出当前目录下的文件列表让你选根本不用手打路径既快又不会出错。情况写法示例同一级目录直接写文件名img srclogo.png下一级目录./或直接写文件夹名img src./images/logo.png或简写img srcimages/logo.png上一级目录../img src../images/logo.png网络图片完整的 URLimg srchttps://example.com/logo.png⚠️ 绝对路径如d:\website\img\logo.gif不推荐因为换一台电脑或部署到服务器就会失效。永远用相对路径或网络地址。3. 尺寸控制建议用 CSS旧写法width200 height100单位默认为 px推荐写法用 CSS 控制尺寸更灵活响应式、适配不同设备img srclogo.png altlogo stylewidth: 200px; height: auto;或者用 class.my-img { width: 200px; height: auto; }4.title属性悬停提示title提示文字会在鼠标悬停时显示小气泡可有可无但用户体验加分。⚠️ 了解即可知道存在不必死记width/height写在 HTML 属性里知道可以这样写但实际开发更多用 CSS。单位pxHTML 属性中可以不写px直接写数字如width200CSS 中必须带单位。img是行内元素它不会独占一行可以和其他行内元素如文字并列。但它的宽高可以设置区别于普通行内元素所以也被称为“行内块级元素inline-block”。❌ 不推荐的做法绝对路径如d:\xxx\1.gif换机器或上传服务器就裂了。同时设置width和height导致图片变形通常只设宽度高度设为auto自动等比缩放。忘记写alt对 SEO 和无障碍不友好。二. HTML5 中audio和video标签的基本用法✅ 必须掌握的核心1. 基本结构audio src音乐.mp3 controls 你的浏览器不支持 audio 元素 /audio video src视频.mp4 controls width300 你的浏览器不支持 video 元素 /videosrc媒体文件路径相对路径或网络地址controls显示播放控件播放/暂停、音量、进度条等标签之间的文字当浏览器不支持该元素时显示的回退信息2. 常用属性属性作用示例controls显示播放控件audio controlsautoplay自动播放大部分浏览器限制需静音video autoplay mutedmuted默认静音video mutedloop循环播放audio loopposter视频封面图仅 videovideo postercover.jpgwidth/height视频尺寸建议用 CSS 控制video stylewidth:100%;controlscontrols这种写法在 HTML5 中布尔属性如controls、autoplay、loop可以简写旧写法controlscontrols新写法controls更简洁推荐两种都有效但现代代码倾向于简写。3. 支持格式音频MP3最通用、OGG、WAV视频MP4最通用、WebM、OGG实际开发中MP3 和 MP4 是首选几乎所有现代浏览器都支持。浏览器工作流程​浏览器从上到下依次检查source的type属性。如果type表明该格式浏览器不支持比如老浏览器不支持 WebM则直接跳过不会请求该文件。如果type支持则尝试加载对应的src文件。一旦成功加载并播放后续的source就不再处理。video controls source srcvideo.mp4 typevideo/mp4 source srcvideo.ogg typevideo/ogg source srcvideo.webm typevideo/webm 您的浏览器不支持 HTML5 Video 标签请升级浏览器。 /video标签内的回退文字您的浏览器不支持 HTML5 Video 标签请升级浏览器。这段文字只在极古老的浏览器中才会显示比如 IE8 及以下现在基本看不到。但写上是一种好习惯对无障碍和 SEO 也有帮助。❌ 实际开发中容易踩的坑1. 自动播放被浏览器拦截现代浏览器Chrome、Safari禁止带声音的自动播放必须加上muted属性才能自动播放video srcvideo.mp4 autoplay muted loop如果用户需要声音让他们手动点击播放按钮。音频支持自动播放但静音了所以没意义2. 视频尺寸变形用 HTML 属性同时设置宽高如width300 height200容易导致视频拉伸变形。推荐只设置宽度高度自适应video srcvideo.mp4 controls stylewidth: 100%; max-width: 600px;3. 跨域问题如果视频文件存放在不同域名下如 CDN需要在服务器端配置 CORS否则可能无法播放或无法获取时长等信息。4. 移动端自动全屏在 iOS Safari 中video播放时会自动进入全屏模式。可以通过playsinline属性禁止video srcvideo.mp4 controls playsinline三. 超链接与锚点链接1.超链接基本语法a href目标地址链接文本/a常见链接类型外部链接a hrefhttps://www.example.com访问示例网站/a空连接 (Empty Link)用途通常用于测试或占位置点击后不会跳转。代码href#注意符号是#。a href#这是一个空链接/a下载链接 (Download Link)用途指向.exe或压缩包等文件时点击会触发下载。代码href文件路径/文件名.zipa hrefsetup.exe下载安装包/a邮件链接 (Mailto Link)用途点击后自动打开系统默认邮件客户端撰写邮件。代码hrefmailto:邮箱地址⚠️ 风险大流量网站慎用容易被爬虫抓取导致垃圾邮件风险增加。a hrefmailto:contactexample.com发送邮件/a2、 锚点链接 (Anchor Link)锚点链接用于实现页面内跳转如“回到顶部”或跳转到章节分为“定义目标”和“创建跳转”两步。a href#我想跳到这点击我可以跳到下面/a h2 id我想跳到这你好欢迎/h2添加滑动效果#在head标签中 head style html{ scroll-behavior:smooth; } /style /head四. 列表1.无序列表核心标签ul(列表容器) li(列表项)默认样式前面带有实心圆点•ul li首页/li li关于我们/li li联系客服/li /ul2.有序列表核心标签ol(列表容器) li(列表项)默认样式前面带有数字序号1, 2, 3...ol li第一步打开浏览器/li li第二步输入网址/li li第三步按下回车/li /ol3.描述列表核心标签组dl定义描述列表的容器。dt术语​ (Definition Term)被解释的对象。dd描述​ (Definition Description)对术语的解释。dl dt家电/dt dd电视/dd dd冰箱/dd dd空调/dd dt学科/dt dd语文/dd dd英语/dd /dl4.综合!DOCTYPE html html langzh-CN head meta charsetUTF-8 title列表综合嵌套示例/title /head body h2产品分类无序列表嵌套有序列表/h2 ul li strong电子产品/strong ol lia href#手机/a - 最新款上市/li lia href#笔记本电脑/a - 轻薄便携/li li平板电脑/li /ol /li li strong家居用品/strong ol start4 li沙发/li li床垫/li liem灯具/em特价中/li /ol /li /ul hr h2操作指南有序列表嵌套无序列表/h2 ol li p准备工作/p ul li检查电源/li li准备工具code螺丝刀/code/li /ul /li li p安装步骤/p ul li打开包装箱/li li取出配件/li li参照说明书安装/li /ul /li li p测试运行/p ul li接通电源/li li按下启动按钮/li li观察指示灯/li /ul /li /ol hr h2常见问题描述列表 图文/h2 dl dtstrong如何退货/strong/dt dd p请保留原包装联系客服填写退货单。/p img srcreturn_qr.png alt退货二维码 width100 /dd dtstrong配送时效/strong/dt dd ul li省内1-2天/li li省外3-5天/li /ul a href#查看详细物流政策/a /dd /dl /body /html五. 表格table thead th带有加粗等效果表头/th? tr行标签/tr td列表签/td /thead tbody tr行标签/tr td列表签/td /tbody /table合并单元格rowspan,colspan六. 表单1. 表单控件控件类型HTML 标签 / type 值常用属性说明文本框​input typetextname,value,placeholder,maxlength,size,required,readonly,disabled单行文本输入密码框​input typepassword同上另加autocomplete输入字符显示为圆点数字框​input typenumbermin,max,step,value只能输入数字带增减按钮邮箱​input typeemailmultiple允许多个邮箱自动校验邮箱格式网址​input typeurl–自动校验 URL 格式电话号码​input typetel–移动端弹出数字键盘搜索框​input typesearch–样式略有不同可清除滑块​input typerangemin,max,step,value拖动选择数值颜色选择器​input typecolorvalue十六进制颜色弹出颜色面板日期选择器​input typedatemin,max,value弹出日历时间选择器​input typetime–选择时分文件上传​input typefileaccept限制文件类型,multiple打开文件选择对话框单选按钮​input typeradioname同一组必须相同,value,checked一组中只能选一个复选框​input typecheckboxname,value,checked可多选下拉菜单​selectoptionselect:name,multiple,sizeoption:value,selected单选或多选列表文本域​textarearows,cols,wrap,maxlength,placeholder多行文本输入按钮​button或input typesubmit/reset/buttontype,value,disabled提交、重置、普通按钮隐藏域​input typehiddenname,value不可见用于传递固定数据2. 辅助标签1label#方法一:for和id关联 input typeradio idman namesex label forman男/label #方法二直接包含 label input typeradio idman namesex /label七.字符实体常用 HTML 字符实体显示结果描述实体名称实体编号十进制小于号lt;#60;大于号gt;#62;和号amp;#38;双引号quot;#34;单引号撇号apos;#39;不换行空格nbsp;#160;©版权符号copy;#169;®注册商标reg;#174;™商标符号trade;#8482;×乘号times;#215;÷除号divide;#247;¥人民币/日元yen;#165;€欧元euro;#8364;§节号sect;#167;°度deg;#176;使用场景在 HTML 内容中显示标签符号​如果你想在页面上显示div这段文字必须写成lt;divgt;→ 显示为div在属性值中包含双引号​例如title他说quot;你好quot;→ 显示为 他说你好避免与 URL 参数冲突​在a href...?nameab中需要用amp;代替否则b会被解析为新参数。