摘要：公司就是中文网页，极度的追求网页的显示速度，要使用。，与类似，用于将相关的内联元素和文本归组在一起。用途区别块元素通常用在页面中的主要构建模块，而内联元素则用来标记小段内容。

之前学习了前端的一些基础知识，现在想深入地、精通地学习前端，往前端和全栈工程师方向发展。

之前学习前端主要是通过看视频，结合动手练习。现在认为看书+视频+实践，应该是最高效的学习方法。对于html、css，我主要参考《head first html 与css 第二版》，head first系列书讲解知识点循序渐近，容易理解。

以下是我看这本书，结合之前学习做的笔记，第一部分梳理如下：

1，作用：负责描述页面的结构；
2， 理解html的含义：
1）ml：标记语言，用来描述网页的结构；

浏览器是怎么知道如何显示一个页面的：通过html语言中的标记。比如

等，标记会告诉浏览器文本的结构和含义。即哪些文本是标题，哪些是段落，图片放在什么位置等。

需要用成对的标记包围页面的内容（有的标记例外：如 6 7 8 9 10 其中的内容是用户可以看见的内容 11 12

第1行：

为浏览器指定页面的文档类型 ，这不是一个html元素！

public表示该标准是公共可用的；

"-//W3C//DTD XHTML 1.0 Transitional//EN" 表示使用的是xhtml1.0版本

html5中的doctype

第4行 ： 字符集设置

字符集：可以在计算机上表示某种语言中的所有字母、数字和其他符号。比如ASCII等。如今标准已经统一为Unicode字符编码，它是很多常用软件和操作系统支持的一个字符集。我们需要告诉浏览器我们在使用unicode编码，用标记。

这是html4.01和更早版本中标记的格式。 html5中，直接写为

Utf-8是unicode系列中的一个编码（这个系列中还有其他编码）
中文能够使用的编码有两种：
第一种：UTF-8 国际通用字库，里面涵盖了所有语言文字，比如阿拉伯文、汉语
第二种：gb2312 也可写成gbk是中国的字库，仅涵盖了汉字和一些常用外文、符号

字库规模： UTF-8（字全） > gb2312（只有汉字）
保存大小： UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
由于UTF-8字库规模大，所以描述一个汉字需要的码更多。
UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。

总结：
UTF-8 字多，有各种国家的语言，但是保存容量大，文件臃肿；
gb2312字少，只用中文和少数外语和符号，但是容量小，文件小巧
.

列出2个使用情形：

公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。

公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。

我们亲测：
● qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
● 新华网藏语频道，使用的是UTF-8，保证字符集的数量。

注：
当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型：
文件→ set File Encoding to → Chinese Simplified(GBK)

第5行： 关键词
第6行： 描述

html中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示

网站的线上版本为了加快网页加载速度，提高用户体验，有时会进行代码压缩，减少代码的体积。如下图所示，HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了：

1，h系列标记

唯一的作用就是插入一个换行；通常只有用块元素，浏览器才会插入换行，如果想在文本中插入一个换行，可用
，或
都可。

4， 短引用，作用段落的一部分；一般浏览器会在引用两边加上双引号

5，

长引用，需要多带带显示引用时运用。

6，列表：

      ：表示列表类型：有序列表
【ordered list】；无序列表
 【unordered list】
    
 ：每个列表项：【list item】
    

注：
1， 列表开始之前有换行，每个列表项之后也有换行，因此

• 都是块元素
  2，
  • 是一起使用的，分开使用就没有任何意义了。
    3，
    元素中只能包含
    • ，不能直接包含文本或其它元素；
      4，
    • 中可以嵌套写
      ，即嵌套列表。li是容器级，里面可以放任何东西
      5， 还有另一类列表，定义列表。

      
          
       列表中每一项都有 定义术语 和 定义描述
              
      
          
      
              
      
      

      7，标记

      1， 浏览器如何加载图像？

      HTML页面不是直接插入图片，而是插入图片的引用地址。浏览器获取到index.html文件，读取该文件，显示文件时，发现有图像需要获取，再从web服务逐个得到这些图像。

      2，web常用的3种图像格式：jpeg、 png、 gif

      3，
      src：相同网站上的图像，最好用相对路径；不同网站上的图像，使用url；
      
      alt：如果图像未能显示，就会用alt中的文本来替代它，html5中alt属性必须写。
      
      width height：单位是像素，告诉浏览器图像在页面中显示的宽度、高度。
      
      图像链接：把 元素放到中。

      8，see the tea 元素
      href：是英语hypertext reference的缩写；默认显示时会有下划线。
      href属性可以使用 相对路径 或 url 来链接到其他页面 ；
      相对路径：用于链接到同一网站内的页面； url：用来链接其他网站。
      
      target: 在新窗口中打开。现在浏览器的默认设置会在一个标签页打开新容器，而不是全新的浏览器窗口
      title：悬停文本，提供链接的一个描述。
      
      直接链接到另一个页面的某一段：
      1）找到希望创建锚点的元素，创建id=”chai”，
      2）see the tea

      9，

      
      用于将相关的块元素归组在一起，放在逻辑区中。
      使用嵌套
      元素为文件增加更多结构，这有利于保证结构清晰或方便增加样式。除非确实需要，否则不要过多地增加嵌套。
      
      10，
      与
      类似，用于将相关的内联元素和文本归组在一起。
      11，字符实体：对于特殊字符，用相应的缩写来输入
      例：想在html中显示文本 the element rocks； 通过字符实体，这样输入
                      the  elment rocks
      & ：&
      < ：<
      ：>
      
      4 块元素、内联元素
      1） 块元素：显示时前后各有一个换行；
      
      、
      h系列、
      、
      、
      、
      • 
        
        2） 内联元素：在页面文本流中总在“行内”出现；
        、、 、、
        
        3） 两者都是： 它可以包围块元素，而不是只文本；根据上下文来判断 。
        4） 用途区别：块元素通常用在web页面中的主要构建模块，而内联元素则用来标记小段内容。设计一个页面时，一般先从较大的块开始，然后在完善页面时加入内联元素。
      混合云 超融合服务器 零基础入门学习 零基础入门深度学习 零基础入门学习python 基础学习笔记
      文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
      转载请注明本文地址：https://www.ucloud.cn/yun/52479.html
      • 上一篇：前端开发注意事项(HTML与CSS进阶)
      • 下一篇：手机端页面在项目中遇到的一些问题及解决办法（持续更新）
      相关文章
      • 01 【零基础入门】html学习笔记（2）

        摘要：，表单的两个常见属性为填写表单的人提供一个输入提示。可用于任何表单控件，表示这个域是必要的，如果不填，则无法提交表单。，表格，表格由行中的数据单元格组成，列隐含地定义在行中。，表格应用于表示表格数据，而不是建立页面布局。 1，如何设计一个页面 1） 先规划好web页面的结构，首先画出一个草图，然后创建一个略图，最后再写html2） 规划页面时，先设计大的块元素，再用内联元素...

        kamushin233 2019-08-02 10:39 评论0 收藏0

      • 【零基础入门】 css学习笔记（4） 布局与定位 介绍

        摘要：内联元素在水平方向上相互挨着，总体上会从左上方流向右下方。，增加元素，设置属性，两个内联元素并排摆放，但只有左右方向有。还能与其它内联元素并排。 写在前面：作为一个刚开始写技术博客的新手，看到有人收藏了文章，写作动力又猛增了。这应该就是写技术博客的好处之一：能给自己增加成就感和驱动力。最近关于css布局和定位相关内容整理地有点慢，因为同时在做freecodecamp上的题，所以节奏有点...

        nevermind 2019-08-30 15:53 评论0 收藏0

      • 【零基础入门】 css学习笔记（5） 浮动

        摘要：浮动元素性质，浮动的元素脱离标准流这个元素像从标准流中被删除一样。下图是左浮动时的显示效果。，浮动的元素会互相贴靠如果父元素的宽度能显示所有浮动元素，则浮动的元素会并排显示。，无论是块级元素行内元素，一旦浮动了，都可以设置宽高，不需要用。 浮动 1.1、语法： float: left; 左浮动，元素往最左边靠； float: right; 右浮动，元素往最右边靠 1.2...

        clasnake 2019-08-30 15:53 评论0 收藏0

      • 【零基础入门】 css学习笔记（1） 字体颜色样式等

        摘要：在元素中使用元素是一个元素，没有结束标记表示链入的是样式表，在中可省略不写。一般页面中，中文用宋体黑体微软雅黑，英文使用。英文字体要放在最前面，中文字体后面的备选字体用逗号隔开。表示方法可用像素指定或使用或百分数相对于字体大小指定。 一、基础介绍 1， css：cascading style sheet 层叠式样式表2， 语法：p {background-color:red...

        fai1017 2019-08-30 15:53 评论0 收藏0
      发表评论
      登陆后可评论
      0条评论