HTMLHyperText Markup Language超文本标记语言是搭建网页结构的核心语言它是标记语言并不是我们了解过的用来编程的语言我们可以通过标签来描述内容的含义和结构总的来说HTML是用来定义网页的内容的比如说文字、图片、表单等等。在学习的过程中我们会发现HTML可以美化网页页面但是这种美化方式会让后台代码变的十分复杂不利于后期的维护所以我们在日常生活中对于HTML的利用基本都在定义网页结构和内容而对于美化网页这个功能我们通常是用CSS更加的方便快捷……下面是我们初学者必须要掌握的框架在学习一项新的技能的时候要先摸清基本的框架包括里面的核心概念、结构等等有了框架我们在之后才能够更好的理解并且应用~一、HTML基础认知1、作用HTML在日常主要是负责网页的结构和内容相当于网页的 “骨架”而CSS则负责网页的样式包括外观、布局相当于给这个网页进行了一次装修JavaScript日常就是负责网页的交互行为相当于给这个网页赋予功能这三个部分组合在一起才构成了一个网页完整的前端开发基础。2、标签基本语法双标签开始标签 内容 /结束标签例如p段落文字/p单标签空标签没有内容和结束标签例如br、img、input标签可以嵌套但不能交叉嵌套✅ 正确pstrong加粗文字/strong/p❌ 错误pstrong文字/p/strong二、HTML标准文档结构下面是一个完整的HTML的完整结构对于初学者来说必须要牢记并且能够默写出来。!DOCTYPE html html head meta charsetutf-8 titleHTML主体框架/title /head body /body /html下面让我们来拆分解读这段代码.....!DOCTYPE html是声明声明这是HTML5文档必须在代码的第一行是为了告诉浏览器要用HTML5进行解析渲染如果没有声明的话就会造成页面的错乱html元素是HTML页面的根元素是整个网页的最外层标签所有HTML内容都必须包裹在这个标签里面head是头部包含了文档的元meta数据meta charsetutf-8 定义网页编码格式为utf-8防止中文乱码。在这里稍微拓展一点关于utf-8utf-8是互联网的通用语是全球统一字符标准能解决日常的乱码问题title元素表示这个标签包含的是文档的标题body元素包含了可见的页面内容在这里给初学者提一个小小的建议在输入标签的时候一次把开始标签和结束标签都打出来再在其中输入其他东西这样的话如果有好几个标签交叠就不会乱也不会漏掉结束标签。三、核心常用标签初学者高频使用1. 文本内容标签标签作用说明h1~h6标题标签从 h1 到 h6 字号、重要性逐级递减p段落标签包裹一段文字自动换行段落间有默认间距br强制换行单标签在段落内强制换行hr水平线单标签生成一条水平分隔线strong加粗强调文字加粗自带 “重要” 语义推荐使用em斜体强调文字倾斜自带 “强调” 语义推荐使用del删除线文字中间加删除线表示已删除内容ins下划线文字下方加下划线表示新增内容这里要注意b加粗、i斜体只有样式效果没有语义我们日常开发优先用strong和em。2. 图片与链接标签图片标签img单标签核心属性src必填图片的路径本地相对路径 / 网络绝对路径alt必填图片加载失败时显示的替代文字同时利于无障碍阅读和 SEOtitle鼠标悬停在图片上时显示的提示文字width/height设置图片宽高只写一个会等比例缩放路径区分相对路径同目录直接写文件名上级目录用../绝对路径完整的网络网址超链接标签a核心属性href必填跳转目标地址网页、文件、锚点等target打开方式_blank表示新窗口打开默认_self表示当前窗口打开特殊用法空链接href#占位用点击后回到页面顶部锚点链接href#id名点击后跳转到页面中对应 id 的位置3. 列表标签无序列表ul子项用li默认显示圆点符号适合导航、无顺序的内容列表有序列表ol子项用li默认按数字排序适合步骤、排名等有顺序的内容自定义列表dldt定义术语 / 名称dd对术语进行描述解释适合名词说明4. 表格标签table用于展示结构化数据不建议用来做页面布局。基础结构tr表格的一行th表头单元格文字默认加粗居中td普通数据单元格语义化结构推荐thead表头、tbody表体、tfoot表尾合并单元格colspan数字跨列合并rowspan数字跨行合并5. 布局容器标签div块级容器无语义用来划分页面区域、组合内容是布局最常用的标签span行内容器无语义用来修饰段落中局部文字的样式下一期我们再来讲解有关HTML基础的部分并且会有一些简单的题目可以自测看自己到底有没有学会有关HTML基础的部分~~~我们下期见