[真传弟子]JS-赵立鼐|2019年10月27日的日报-技能树.IT修真院

发表于： 2019-10-27 23:42:07

1 1200

今日完成（css任务一）：

(友情提示）为了增强自身查找资料的能力，所有的资料最好都通过自己搜索得到，尽量不依赖官网提供的内容

先准备好开发环境：1、下载WEBstorm

2、下载浏览器Chrome

知识学习：

1、文档类型 (Document type)

在w3c中是这样解释的：

<!DOCTYPE>声明帮助浏览器正确地显示网页。

web世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML也有不同的版本，只有完全明白页中使用的确切HTML版本，浏览器才能正确的显示出HTML页面。这就是<!DOCTYPE>的用处。

<!DOCTYPE>不是HTML标签。它为浏览器提供了一项信息（声明），即HTML是用什么版本编写的。

————————————————————————————————————————————————————————

HTML版本

从Web版本早期至今，已经发展出多个HTML版本：

版本	年份
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

________________________________________________________________________________________________________________________________________

常用的声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

现在随便打开一个网页看一下：

<!doctype html> 位于第一行，它声明了文档的类型为 html5。这样浏览器就可以正确的解析这个网页了。

2、标签

head标签

head本身并不携带任何信息，它主要是用来盛放其他语义类标签的容器来使用的。

head标签规定了自身必须是html标签中的第一个标签，它的内容必须包含一个title,并且最多只能包含一个base。

如果文档作为iframe,或者有其他方式指定了文档标题时，可以不包含title标签。

title标签

title标签表示文档的标题，从字面上就非常容易理解。

其实，语义标签中也有一组表示标题的标签：h1-h6。

heading和title两个英文单词意义区分非常微妙，在中文中更是找不到对应的词汇来区分。但实际使用中，两者还是有一定的区分。

在 HTML 标准中，特意讨论了这个问题。假设有一个介绍蜜蜂跳舞求偶仪式的科普页面，我们试着把以下两个文字分别对应到 title 和 h1

· 蜜蜂求偶仪式舞蹈

· 舞蹈

正确答案是：<title>蜜蜂求偶仪式舞蹈</title> <h1>舞蹈<h1>

为什么要这样放呢？

这主要考虑到title作为元信息，可能会被用在浏览器收藏夹、微信推送卡片、微博等各种场景，这时候往往是上下文缺失的，所以title应该是完整地概括整个页面的。

而h1则仅仅用于页面展示，它可以默认具有上下文，并且有链接辅助，所以可以简写，即便无法概括全文，也不会有很大影响。

base标签

base标签实际上是个历史遗留标签。它的作用是给页面上所以的URL相对地址提供一个基础。

base标签最多只有一个，它改变全局的链接地址，它是一个非常危险的标签，容易造成跟javascript的配合问题，所以在实际开发中，

建议使用javascript来代替base标签。

meta标签

meta标签是一组键值对，它是一种通用的元信息表示标签。

在head中可以出现任意多个meta标签。一般meta标签由name和content两个属性来定义。name表示元信息的名，content表示元信息的

值。它的基本用法为下：

这个标签表示页面所在的web-application ,名为lsForums。

这里的name是一种比较自由的约定，HTTP标准规定了一些name作为大家使用的共识，也鼓励大家发明自己的name来使用。

除了基本用法，meta标签还有一些变体，主要用来简化书写方式或者声明自动化行为。比如：

具有charset属性的meta

从html5开始，为了简化写法，meta标签新增了charset属性。添加charset属性的meta标签无需再有name和content。

charset型meta标签非常关键，它描述了HTML文档自身的编码形式。因此，建议这个标签放在head的第一个。

这样，浏览器读到这个标签之前，处理的所有字符都是ASCII字符，ASCII字符是UTF-8和绝大多数字符编码的子集，所以，在读到meta

之前，浏览器把文档理解多数编码格式都不会出错，这样可以最大限度地保证不出现乱码。

一般情况下，HTTP服务端会通过http头来指定正确的编码格式，但是有些特殊的情况如使用file协议打开一个HTML文件，则没有http头，

这种时候，charset meta就非常重要了。

具有http-equiv属性的meta

具有http-equiv属性的meta标签，表示执行一个命令，这样的meta标签不需要name属性了。

例如下面代码，相当于添加了content-type这个http头，并且指定了http编码方式。

除了content-type,还有以下命令：

content-language 指定内容语言；
default-style 指定默认样式表；
refresh刷新
set-cookie模拟http头set-cookie; 设置cookie;

name为 viewport的meta

实际上，meta标签可以被自定义，只要写入和读取双方约定好的name和content的格式就好了。

有这样一个meta类型，它没有在html标准中定义，却是移动端开发的事实标准：

它就是name为viewport的meta。

这类meta的name属性为viewport,它的content是一个复杂结构，是用逗号分隔的键值对，键值对的格式是key=value。

例如：

这里只指定了两个属性，宽度和缩放，实际上viewport能控制的更多，它能表示的全部属性如下：

width: 页面宽度，可以去具体的数字，也可以是device-width,表示跟设备宽度相等。
height: 页面高度，可以取具体的数字，也可以是device-height,表示跟设备高度相等。
initial-scale:初始缩放比例。
minimum-scale:最小缩放比例。
maximum-scale:最大缩放比例。
user-scaleble:是否允许用户缩放。

对于已经做好移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度，一个标准的meta如下：

3、CSS概念

什么是CSS?

CSS指层叠样式表（Cascading Style Sheets)
样式定义了如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML 4.0中，是为了解决内容与表现分离的问题
外部样式表可以极大地提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可以层叠为一个

CSS引入的方式有三种：

外部样式表

当样式需要被应用到很多页面中的时候，外部样式表是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

内部样式表

当单个文件需要特别的样式时，就可以使用内部样式表。可以在head部分通过<style>标签定义内部样式表。

<head>
    <style type="text/css">
        body {background-color: red}
        p {margin-left: 20px}
    </style>
</head>

内联样式表

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。

<p style="color: red; margin-left: 20px">
This is paragraph
</p>

总结下来就是三种方式代表了三种CSS引用的级别，范围最广的是多个页面的引用同一css文件，下来是单个网页的样式使用，最小的是元素级别。

编码实战：

1、在桌面新建一个文件，修改文件名及其类型为task1.html

编辑文件：

保存，使用浏览器打开。

2、为html添加几个标签，并尝试为其添加css样式

task1.html:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>task1</title>
        <link rel="stylesheet" type="text/css" href="../css/task1.css">
        <style type="text/css">
            ol {background-color: aqua}
        </style>
    </head>
    <body>

    <h1 style="color: blue"> 什么是HTML?</h1>
        HTML是用来描述网页的一种语言。
        <ol>
            <li style="color: red">HTML指的是超文本标记语言（Hyper Text Markup Language）</li>
            <li>HTML不是一种编程语言，而是一种<strong>标记语言</strong>（markup language）</li>
            <li>标记语言是一套<strong>标记标签</strong>（markup tag）</li>
            <li>HTML使用<strong>标记标签来描述网页</strong></li>
        </ol>
    </body>
    </html>