Susan学习HTML | 青训营笔记

Susan
90 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

一、本堂课重点内容：

1.什么是HTML？

image.png

2.开发环境

image.png 所以浏览器是我们学习前端必备的工具 关于浏览器，以下是我收集的一些相关概念，希望对大家有帮助

浏览器的主要构成（High Level Structure） 浏览器的主要组件包括：

  1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

  2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。

  3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

  4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

  5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

  6. JS解释器 － 用来解释执行JS代码。

  7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

需要注意的是，不同于大部分浏览器，Chrome为每个Tab分配了各自的渲染引擎实例，每个Tab就是一个独立的进程。

渲染引擎（The rendering engine）

渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。

默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式，将由专门一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。

如果对浏览器的相关知识感兴趣的话，点这里详细了解

3.HTML语法规范

1.区分大小写

2.正确嵌套所有元素

3.元素必须要封闭

  • 在XHTML中，所有的页面元素都要有相应的结束元素。如< /body>。

4.属性必须加上双引号

HTML中所有的属性，包括数字值都必须加上双引号。实例代码如下。

< table width="400" >

5.明确所有的属性值

HTML中规定每一个属性都必须有一个值，没有值的属性也必须用自己的名称作为值。例如，在HTML中，checked属性是可以不取值的，但是在HTML中必须用它自身名称作为值。实例代码如下。

<input type=“checkbox" name="box1" value=”abc" checked="checked"/>

详细的可以去看看这篇博客

4.语义化

1、什么是语义化：

在编程中，语义指的是一段代码的含义（这个HTML元素有什么作用，扮演了什么样的角色）。HTML语义元素清楚地向浏览器和开发者描述其意义，例如：form、table、img等。

2、语义化的重要性

要明白语义化的重要性首先得明白是哪些人在看我们写的HTML

  • 开发者：修改和维护页面
  • 浏览器：展示页面
  • 搜索引擎：提取关键字、排序
  • 屏幕阅读器-给盲人读页面内的文字

3、为什么要语义化

语义化的优势主要体现在下面几点： 1）其它开发者便于阅读代码，通过不同的标签明白每个模块的作用和区别；

2）结构明确、语义清晰的页面能有更好的用户体验，在样式（CSS）没有加载前也有较为明确的结构，更如ing这一类的，在图片无法加载的情况下，有alt属性告知用户此处图片具体是关于什么内容的；

3）有利于SEO，语义化便于搜索引擎爬虫理解，和搜索引擎建立良好的沟通，能让爬虫爬去更多关键有效的信息

4）方便其他设备阅读（如屏幕阅读器、盲人设备和移动设备等）

4.那么语义化有哪些好处呢

  • 对搜索引擎友好，有了良好的结构和语义，网页内容自然容易被搜索引擎抓取

举个栗子

image.png

在浏览器运行的结果为:

image.png

使用h1标签能一眼就看出这是页面的一个一级标题

  • 可维护性：当页面需要维护时，语义化的标签能够快速让我们掌握页面的结构和各种信息
  • 搜索引擎优化：搜索引擎会获取HTML内容，语义化能让搜索引擎知道页面的重点、主要内容等等。
  • 提升无障碍性

5、如何语义化

一般网站分为头部、导航、文章（或其他模块）、侧边栏、底部，根据不同部位，使用不同的标签进行书写。

表示页面不同位置的标签：header、nav、article、section、aside、footer 表示具体元素的作用或者意义的标签：a、abbr、address、audio、blockquote、caption、code、datalist、detail、ol、ul、img、input、p等

1）尽可能少的使用无语义的标签div或者span

2）在语义不明显时，既可以使用div标签又可以使用p标签时，尽量使用p标签，因为p标签默认情况下有上下间距，对兼容特殊终端有利；

3）不要使用纯样式标签，如：b、font、u等，使用css进行设置

4）需要强调的文本，可以包含在strong或者em标签中

5）使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

6）表单域要用fieldset标签包起来，并用legend标签说明表单的用途；详细内容请参考

5、总结：

第一次课虽然内容不多，但是确激励我们向前迈进 我们应该在平时多自学，利用好身边的资源，如b站上的优质前端学习视频

引用参考：

blog.csdn.net/miniBeier/a… blog.csdn.net/qq_39903993… blog.csdn.net/qq_40276753…

avatar
文章
阅读
粉丝