文章目录1. 什么是HTML51.1 定义1.2 主要特点2. 准备工作编辑器与浏览器3. HTML5文档结构4. HTML5常用标签4.1 文本标签4.2 链接与图像4.3 列表4.4 表格4.5 表单4.6 HTML5语义化标签4.7 多媒体标签4.8 容器标签4.9 特殊符号实用技巧下一步学习方向1. 什么是HTML51.1 定义HTML5HyperText Markup Language 5是HTML超文本标记语言的第五次重大修订也是当前Web标准的核心技术。它不仅仅是HTML标签的更新更是一整套Web平台技术的集合。1.2 主要特点更清晰的语义结构新增加了一些有实际含义的“标签”就像文章的标题、段落、章节一样让网页结构一目了然。例如header页眉、nav导航、main主要内容、footer页脚。内置音视频播放以前看网页视频需要安装Flash等插件现在HTML5可以直接用video和audio标签播放视频和音乐。更智能的表单可以直接选择日期、颜色或者输入邮箱、电话号码浏览器会自动进行简单的格式检查。强大的绘图和动画能力引入了canvas画布这个“绘图板”让开发者可以用JavaScript在上面自由绘制各种图形、图表甚至制作2D/3D游戏。适应各种设备响应式设计配合CSS3HTML5开发的网页可以自动适应不同大小的屏幕无论是在电脑、平板还是手机上都能获得良好的浏览体验。2. 准备工作编辑器与浏览器编辑器写代码的地方Visual Studio CodeVSCode点击链接Visual Studio Code安装配置教程下载、汉化、常用组件、基本操作Sublime Text点击链接Sublime Text 下载教程HBuilder X点击链接HBuilderX安装入门教程浏览器看效果的地方Google Chrome谷歌浏览器下载地址https://www.google.com/chrome/Microsoft EdgeWindows系统自带。3. HTML5文档结构!DOCTYPEhtmlhtmlheadmetacharsetutf-8title/title/headbody/body/html!DOCTYPE html文档类型声明告诉浏览器这是HTML5文档。html根元素整个HTML文档的根元素包含整个页面的内容。head头部区域包含页面的元数据不直接显示在页面上。meta charsetutf-8设置字符编码为UTF-8支持中文等特殊字符。title页面标题显示在浏览器标签页。body主体区域包含所有可见的页面内容。4. HTML5常用标签HTML标签就像是搭建网页的积木每个标签都有特定的功能和意义。下面我们来学习最常用的一些标签。4.1 文本标签标题标签!--数字越大标题越小 --h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6段落与换行p这是一个段落。/pp这是另一个段落。/pbr!-- 换行标签不需要闭合 --文本格式化:strong加粗重要内容/strongb加粗单纯样式/bem斜体强调内容/emi斜体单纯样式/iu下划线/udel删除线/delsup上标/sup!-- 如x² --sub下标/sub!-- 如H₂O --mark高亮标记/mark4.2 链接与图像超链接:!DOCTYPEhtmlhtmlheadmetacharsetutf-8title超链接/title/headbody!-- 基本链接 --ahrefhttps://www.baidu.com访问示例网站/a!-- 新窗口打开 --ahrefhttps://www.baidu.comtarget_blank新窗口打开/a!-- 链接到页面内锚点 --ahref#section1跳转到第一节/ah2idsection1第一节内容/h2!-- 邮件链接 --ahrefmailto:someoneexample.com发送邮件/a!-- 下载链接 --ahrefdocument.pdfdownload下载文档/a/body/html图像!-- 基本图像 --imgsrcimage.jpgalt图片描述!-- 设置尺寸 --imgsrcimage.jpgalt图片width300height200!-- 响应式图像推荐 --imgsrcimage.jpgalt图片stylemax-width:100%;height:auto;4.3 列表有序列表olli第一项/lili第二项/lili第三项/li/ol运行效果无序列表ulli苹果/lili香蕉/lili橙子/li/ul运行效果4.4 表格tableborder1caption学生成绩表/captiontr!-- 表格行 --th姓名/th!-- 表头单元格 --th语文/thth数学/th/trtrtd张三/td!-- 数据单元格 --td90/tdtd85/td/trtrtd李四/tdtd88/tdtd92/td/tr/table运行效果4.5 表单formaction/submitmethodPOST!-- 表单控件放在这里 --/formaction数据提交的地址method提交方式GET或POST常用表单元素!-- 文本输入框 --labelforusername用户名/labelinputtypetextidusernamenameusernameplaceholder请输入用户名!-- 密码框 --labelforpassword密码/labelinputtypepasswordidpasswordnamepassword!-- 邮箱 --inputtypeemailnameemail!-- 数字 --inputtypenumbernameagemin0max120!-- 日期 --inputtypedatenamebirthday!-- 单选按钮 --labelinputtyperadionamegendervaluemale男/labellabelinputtyperadionamegendervaluefemale女/label!-- 复选框 --labelinputtypecheckboxnamehobbyvaluereading阅读/labellabelinputtypecheckboxnamehobbyvaluemusic音乐/label!-- 下拉选择 --selectnamecityoptionvaluebeijing北京/optionoptionvalueshanghai上海/optionoptionvalueguangzhou广州/option/select!-- 多行文本 --textareanamemessagerows4cols50/textarea!-- 按钮 --buttontypesubmit提交/buttonbuttontypereset重置/buttonbuttontypebutton普通按钮/buttonHTML5新增表单类型inputtypecolornamecolor!-- 颜色选择 --inputtyperangenamevolumemin0max100!-- 滑块 --inputtypesearchnamesearch!-- 搜索框 --inputtypeurlnamewebsite!-- URL输入 --inputtypetelnamephone!-- 电话号码 --inputtypetimenametime!-- 时间选择 --4.6 HTML5语义化标签!-- 网页头部 --headerh1网站标题/h1navahref#home首页/aahref#about关于/a/nav/header!-- 主要内容区域 --main!-- 独立文章内容 --articleh2文章标题/h2p文章内容.../p/article!-- 区块内容 --sectionh2章节标题/h2p章节内容.../p/section!-- 侧边栏 --asideh3相关链接/h3ulli链接1/lili链接2/li/ul/aside/main!-- 网页底部 --footerp© 2023 版权所有/p/footer4.7 多媒体标签视频videocontrolswidth640sourcesrcvideo.mp4typevideo/mp4sourcesrcvideo.webmtypevideo/webm/video音频audiocontrolssourcesrcaudio.mp3typeaudio/mpegsourcesrcaudio.oggtypeaudio/ogg/audio4.8 容器标签!-- 通用容器最常用 --div这是一个区块容器/div!-- 行内容器 --span这是一个行内容器/span区别div块级元素单独占一行span行内元素不换行4.9 特殊符号lt;!-- 小于号 --gt;!-- 大于号 --amp;!-- 和号 --quot;!-- 双引号 --nbsp;!-- 空格 --copy;!-- 版权符号 © --实用技巧标签分类记忆文本类h1-h6、p、span结构类div、header、footer、section媒体类img、video、audio交互类a、form、button常用属性快速参考属性用途示例id唯一标识div idheaderclass样式类名p classintrostyle内联样式div stylecolor: red;src资源路径img srcimage.jpghref链接地址a hrefpage.htmlalt替代文本img alt描述下一步学习方向恭喜你完成了HTML5基础学习接下来可以学习CSS3美化你的网页学习JavaScript让网页动起来推荐资源MDN Web文档https://developer.mozilla.org/zh-CN/W3School教程https://www.w3school.com.cn/freeCodeCamp中文https://chinese.freecodecamp.org/有问题欢迎在评论区留言讨论
前端入门：HTML5基础篇｜搭建你的第一个网页
文章目录1. 什么是HTML51.1 定义1.2 主要特点2. 准备工作编辑器与浏览器3. HTML5文档结构4. HTML5常用标签4.1 文本标签4.2 链接与图像4.3 列表4.4 表格4.5 表单4.6 HTML5语义化标签4.7 多媒体标签4.8 容器标签4.9 特殊符号实用技巧下一步学习方向1. 什么是HTML51.1 定义HTML5HyperText Markup Language 5是HTML超文本标记语言的第五次重大修订也是当前Web标准的核心技术。它不仅仅是HTML标签的更新更是一整套Web平台技术的集合。1.2 主要特点更清晰的语义结构新增加了一些有实际含义的“标签”就像文章的标题、段落、章节一样让网页结构一目了然。例如header页眉、nav导航、main主要内容、footer页脚。内置音视频播放以前看网页视频需要安装Flash等插件现在HTML5可以直接用video和audio标签播放视频和音乐。更智能的表单可以直接选择日期、颜色或者输入邮箱、电话号码浏览器会自动进行简单的格式检查。强大的绘图和动画能力引入了canvas画布这个“绘图板”让开发者可以用JavaScript在上面自由绘制各种图形、图表甚至制作2D/3D游戏。适应各种设备响应式设计配合CSS3HTML5开发的网页可以自动适应不同大小的屏幕无论是在电脑、平板还是手机上都能获得良好的浏览体验。2. 准备工作编辑器与浏览器编辑器写代码的地方Visual Studio CodeVSCode点击链接Visual Studio Code安装配置教程下载、汉化、常用组件、基本操作Sublime Text点击链接Sublime Text 下载教程HBuilder X点击链接HBuilderX安装入门教程浏览器看效果的地方Google Chrome谷歌浏览器下载地址https://www.google.com/chrome/Microsoft EdgeWindows系统自带。3. HTML5文档结构!DOCTYPEhtmlhtmlheadmetacharsetutf-8title/title/headbody/body/html!DOCTYPE html文档类型声明告诉浏览器这是HTML5文档。html根元素整个HTML文档的根元素包含整个页面的内容。head头部区域包含页面的元数据不直接显示在页面上。meta charsetutf-8设置字符编码为UTF-8支持中文等特殊字符。title页面标题显示在浏览器标签页。body主体区域包含所有可见的页面内容。4. HTML5常用标签HTML标签就像是搭建网页的积木每个标签都有特定的功能和意义。下面我们来学习最常用的一些标签。4.1 文本标签标题标签!--数字越大标题越小 --h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6段落与换行p这是一个段落。/pp这是另一个段落。/pbr!-- 换行标签不需要闭合 --文本格式化:strong加粗重要内容/strongb加粗单纯样式/bem斜体强调内容/emi斜体单纯样式/iu下划线/udel删除线/delsup上标/sup!-- 如x² --sub下标/sub!-- 如H₂O --mark高亮标记/mark4.2 链接与图像超链接:!DOCTYPEhtmlhtmlheadmetacharsetutf-8title超链接/title/headbody!-- 基本链接 --ahrefhttps://www.baidu.com访问示例网站/a!-- 新窗口打开 --ahrefhttps://www.baidu.comtarget_blank新窗口打开/a!-- 链接到页面内锚点 --ahref#section1跳转到第一节/ah2idsection1第一节内容/h2!-- 邮件链接 --ahrefmailto:someoneexample.com发送邮件/a!-- 下载链接 --ahrefdocument.pdfdownload下载文档/a/body/html图像!-- 基本图像 --imgsrcimage.jpgalt图片描述!-- 设置尺寸 --imgsrcimage.jpgalt图片width300height200!-- 响应式图像推荐 --imgsrcimage.jpgalt图片stylemax-width:100%;height:auto;4.3 列表有序列表olli第一项/lili第二项/lili第三项/li/ol运行效果无序列表ulli苹果/lili香蕉/lili橙子/li/ul运行效果4.4 表格tableborder1caption学生成绩表/captiontr!-- 表格行 --th姓名/th!-- 表头单元格 --th语文/thth数学/th/trtrtd张三/td!-- 数据单元格 --td90/tdtd85/td/trtrtd李四/tdtd88/tdtd92/td/tr/table运行效果4.5 表单formaction/submitmethodPOST!-- 表单控件放在这里 --/formaction数据提交的地址method提交方式GET或POST常用表单元素!-- 文本输入框 --labelforusername用户名/labelinputtypetextidusernamenameusernameplaceholder请输入用户名!-- 密码框 --labelforpassword密码/labelinputtypepasswordidpasswordnamepassword!-- 邮箱 --inputtypeemailnameemail!-- 数字 --inputtypenumbernameagemin0max120!-- 日期 --inputtypedatenamebirthday!-- 单选按钮 --labelinputtyperadionamegendervaluemale男/labellabelinputtyperadionamegendervaluefemale女/label!-- 复选框 --labelinputtypecheckboxnamehobbyvaluereading阅读/labellabelinputtypecheckboxnamehobbyvaluemusic音乐/label!-- 下拉选择 --selectnamecityoptionvaluebeijing北京/optionoptionvalueshanghai上海/optionoptionvalueguangzhou广州/option/select!-- 多行文本 --textareanamemessagerows4cols50/textarea!-- 按钮 --buttontypesubmit提交/buttonbuttontypereset重置/buttonbuttontypebutton普通按钮/buttonHTML5新增表单类型inputtypecolornamecolor!-- 颜色选择 --inputtyperangenamevolumemin0max100!-- 滑块 --inputtypesearchnamesearch!-- 搜索框 --inputtypeurlnamewebsite!-- URL输入 --inputtypetelnamephone!-- 电话号码 --inputtypetimenametime!-- 时间选择 --4.6 HTML5语义化标签!-- 网页头部 --headerh1网站标题/h1navahref#home首页/aahref#about关于/a/nav/header!-- 主要内容区域 --main!-- 独立文章内容 --articleh2文章标题/h2p文章内容.../p/article!-- 区块内容 --sectionh2章节标题/h2p章节内容.../p/section!-- 侧边栏 --asideh3相关链接/h3ulli链接1/lili链接2/li/ul/aside/main!-- 网页底部 --footerp© 2023 版权所有/p/footer4.7 多媒体标签视频videocontrolswidth640sourcesrcvideo.mp4typevideo/mp4sourcesrcvideo.webmtypevideo/webm/video音频audiocontrolssourcesrcaudio.mp3typeaudio/mpegsourcesrcaudio.oggtypeaudio/ogg/audio4.8 容器标签!-- 通用容器最常用 --div这是一个区块容器/div!-- 行内容器 --span这是一个行内容器/span区别div块级元素单独占一行span行内元素不换行4.9 特殊符号lt;!-- 小于号 --gt;!-- 大于号 --amp;!-- 和号 --quot;!-- 双引号 --nbsp;!-- 空格 --copy;!-- 版权符号 © --实用技巧标签分类记忆文本类h1-h6、p、span结构类div、header、footer、section媒体类img、video、audio交互类a、form、button常用属性快速参考属性用途示例id唯一标识div idheaderclass样式类名p classintrostyle内联样式div stylecolor: red;src资源路径img srcimage.jpghref链接地址a hrefpage.htmlalt替代文本img alt描述下一步学习方向恭喜你完成了HTML5基础学习接下来可以学习CSS3美化你的网页学习JavaScript让网页动起来推荐资源MDN Web文档https://developer.mozilla.org/zh-CN/W3School教程https://www.w3school.com.cn/freeCodeCamp中文https://chinese.freecodecamp.org/有问题欢迎在评论区留言讨论