一、HTML 是什么HTMLHyperText Markup Language超文本标记语言作用定义网页结构骨架特点不是编程语言使用“标签tag”描述内容二、HTML 基本结构!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title网页标题/title/headbody页面内容/body/html关键点!DOCTYPE html声明 HTML5html根标签head元信息不显示body页面可见内容三、常用标签1. 标题和文本h1标题/h1~h6p段落/pbr换行hr分割线2. 文本格式b加粗/bstrong强调更语义化/strongi斜体/iem强调斜体/emu下划线/umark高亮/mark3. 列表3.1 无序列表ulli项目/li/ul3.2 有序列表olli项目/li/ol4. 超链接ahrefhttps://example.com点击/a常见属性href跳转地址target_blank新窗口打开5. 图片imgsrcimage.jpgalt描述属性src路径alt加载失败显示6. 表格tabletrth表头/thth表头/th/trtrtd数据/tdtd数据/td/tr/table7. 表单formaction提交地址methodpostinputtypetextinputtypepasswordinputtypesubmit/form常见 input 类型textpasswordradiocheckboxfilesubmitbutton四、HTML 属性写在标签里面tag属性值常见属性id唯一标识class样式类style内联样式title提示信息五、块级元素 vs 行内元素块级元素block独占一行可以设置宽高例div, p, h1, ul, table行内元素inline不换行例span, a, img, strong六、语义化标签HTML5 比div更清晰headernavmainsectionarticlefooter好处代码更清晰更利于维护七、多媒体标签audiocontrolssrca.mp3/audiovideocontrolssrcv.mp4/video八、HTML5 新特性1. 新标签canvasvideoaudiosection / article2. 表单增强inputtypeemailinputtypedateinputtyperange九、常见易错点1. button 默认提交button提交/button 在 form 里默认是submit2. img 是单标签img3. 路径问题相对路径./ ../绝对路径https://4. 标签必须正确嵌套❌pdiv/div/p