1HTML 全称 HyperText Markup Language中文译为超文本标记语言是所有网页开发的基础核心语言。它不属于编程语言 没有逻辑运算、条件判断能力核心作用是通过不同的标签把文字、图片、链接、音视频等各类网页元素结构化地组织起来让浏览器能够正确解析渲染出完整的网页界面。关于如何创建一个html文档,需要右键屏幕建立一个新的文本文档在编辑完成后将文件扩展名修改为.html需打开查看中的“显示扩展名”通常扩展名也可以用.htm表示但是这种表示并不正规。建议通常还是使用.html作为扩展名。通过我们人工编辑的内容被称为源代码源代码必须经由浏览器“渲染”才能呈现在我们眼前。2通常在我们编写的代码中含有标签标签中又包含标签名标签体起始标签和结束标签。举个例子marquee我来自中国。/marquee中的“我来自中国。”就属于标签体而marquee则属于标签名同时前一个标签名为*起始标签后一个标签名为结束标签。通常代码在运行的过程中我们能看到的是标签体。3图中的代码中的marquee和input为包含关系input为输入框标签用于在代码运行时生成一个可输入文字的文字框。同时如果在input后面再加上“type”则可以控制输入的文字类 型比如使用input typetext会使内容变成文本形式input typepassword则会用*来隐藏输入的内容。4标签分为单标签和双标签双标签的使用格式为双标签内容/双标签单标签则为单标签/内容。在使用单标签的时候/可以省略但这种写法并不严谨若追求严谨性/则不能省略。5标签之间存在的关系包括并列关系和嵌套关系tab键可以进行缩进使用记事本等软件编写的时候无法使用tab键缩进。同时需要注意的是并非所有标签都能发生嵌套关系如h1和h2等。6关于标签的属性正如上文所举出的例子input typepassword中的input就属于标签而后面的type就是属性名password就为属性值两者结合即为标签属性。同时我们有可能会遇到在使用一个标签的时候需要使用多个标签属性的时候比如input typetext placeholder输入框这个时候会出现多个 标签属性不同标签属性之间要用空格间隔开。同时下面还有一些与标签属性有关的规则7当使用网页的时候我们通过右键可以对网页进行检查或者查看网页的源代码。这两者看上去似乎是一回事但实际上有所不同。查看网页的源代码所指的是程序员所编写的代码而检查则是浏览器在检查了源代码之后进行了部分修正的代码属于被二次处理的代码可能与源代码不同故一般“检查”选项更常用。8VSCode的Live Server插件有什么作用我们无法在没有任何插件的情况下直接用VSCode打开自己写的代码Live Server通过对网页注入一段JS脚本实现了这个功能使我们在使用VSCode时更方便同时可以让网页显示的内容根据我们对html文件的修改实现自动刷新。然而插件存在自己的弊端比如当我们直接打开单个文件的时候通过空白处右键无法直接打开网站所以必须使用文件夹同时Live Server的自动刷新功能仅限于html文件所以其他形式的文件是无法通过这个插件实现自动刷新的。9关于HTML的注释在编写源代码的时候有时我们需要对代码进行解释注释的内容会被浏览器忽视我们无法在网页中看到这些信息但我们在查看源代码的时候仍然可以看到注释。当我们试图进行注释时可以在标签的前方加上!--,在后方加上–比如 这是一条注释 →但是值得注意的是单个注释无法与其他注释进行嵌套否则在代码运行的时候可能会出现错误。添加注释有快捷键可以使用ctrl/10我们现在使用的html一般为html5,并且绝大部分浏览器在渲染的时候都会默认根据html5的语法进行渲染但部分浏览器可能会因为不会默认html5导致渲染出错这时候就要对文档进行一个文档声明向别人宣称我的文档应该以html5的标准进行渲染该文档声明的写法就是。通常标签名默认使用小写但在文档声明里DOCTYPE默认使用大写而html则仍然是小写这是最标准的写法。若想让浏览器使用其他方式进行渲染需要把文档声明里的html改成对应的内容详细写法可参考W3C11当我们在编写代码的时候有时需要对所选择的语言进行说明常见的语言有zh-CN简体中文zh-TW(繁体中文)zh(中文)和en英文且编写的方式一般是在html中的html后面加上“lang“””。关于其他语言可以在W3C或则W3School等网站中进行查询。还有解释语言并不会对实际编写内容造成影响但他会告诉浏览器使用的语言种类方便进行翻译。以下内容是相关网站的网址12关于标准写法上文我们曾说过如果在编写源代码的时候只写一行marquee我是一个中国人。/marquee在进行渲染的时候是可以正常显示出来的但实际上这种写法是非常不严谨的之所以浏览器可以把这串代码渲染出来是因为它在检查之后对代码进行了一定的修正随后就更改成了这样head/head body marquee我是一个中国人/marquee /body实际上这仍然不是最严谨的写法比如没有对编码的方法语言进行说明同时也没有标题。比较严谨的写法应该是meta charsetUTF-8 title标题/title我是一个中国人其中的对文档进行了说明对使用的语言进行了说明则对编码的方式进行说明。编码的方式还有GBK等其他的方法但我认为现在的UTF-8非常常用这点不需要特别记忆。13关于排版标签这类标签通常是双标签被大量用于新闻等地方在没做其他修改的情况下h1~h6分别代表了文字的重要性和大小。数字越小则实际字体的重要性和大小就会越大p标签一般用于划分段落div则用于整体布局无实际意义。同样的以上所有标签在使用时都要加上,比如在使用p时要写成p内容/p.14关于语义化标签以上所讲的h1~h6,以及p和div都属于语义化标签它们会在赋予文字意义的同时对文字施加效果比如变大加粗变成斜体字…,但重要的是我们不能光看效果不看语义不能为了效果而偏离语义。用特定语义的标签去表达特定的含义对引擎的优化设备的解析等都有很大的好处。15关于块级元素和行内元素块级元素独占一行行内元素不独占一行。块级元素内能写行内元素和块级元素但行内元素中只能写行内元素不能写块级元素。有一些特殊规则在h1~h6之间不能互相嵌套p中不能写块级元素这些特殊规则很少但十分重要。16关于文本标签文本标签通常用于包裹词汇短语等。一般都是行内元素但是有例外情况。常用的标签名有em,strong和span,前两者起到强调作用实际使用上差别不大span则类似div,无实际意义用于包裹短语。如果说div是个大袋子那span就像一个小袋子。语义感强的有以上几个标签当然存在例如i和del这样的冷门标签但是它们通常很少用。所以不做特殊强调。17关于图片标签标签名为img通常用于导入图片。img的标签属性有很多比如src ,alt,width,height等。src用于描述图片的路径如果导入了一个不存在的路径则图片不能正常显示alt则为对图片的描述通常不会在网页中直接表现出来类似于之前使用的注释。width和height则可以对图片的长宽进行调整会对图片进行横向或者纵向的压缩。图片长宽使用的单位为像素px常见的图片大小有1600900192010801k,25601440(2k),38402160(4k)等。