HTML基础入门第2天课堂笔记

ゞ浴缸里的玫瑰 2022-06-01 08:39 272阅读 0赞

## HTML第2天基础入门 第2天课堂笔记（本课程共2天） ##

目录  
一、复习上节课的内容  
二、HTML骨架  
2.1 文档声明头  
2.2 字符集  
2.3 关键字和页面描述  
2.4 title标签  
三、HTML的基本语法特性  
3.1 HTML对换行不敏感，对tab不敏感  
3.2 空白折叠现象  
3.3 标签要严格封闭  
四、h和p标签  
4.1 h系列  
4.2 p标签  
五、图片  
5.1 能用的图片类型  
5.2 语法  
5.3 alt属性  
5.4 相对路径  
六、超级链接  
6.1 基本写法  
6.2 a标签的另外两个属性  
6.3 页面内的锚点  
6.4 a是一个文本级的标签

--------------------

## 一、复习上节课的内容 ##

网页的原理：用户输入网址之后，对应的服务器就发现有人请求我的网页了，所以这个服务器就会把网页和相关的图片、js文件、css文件、flash文件都通过HTTP协议传输到用户的电脑里面。HTML页面在用户的电脑里面进行渲染。HTTP协议指的是超文本传输协议。每一个网址，都对应了服务器上面的确定的文件。  
纯文本文件：只有内容，没有样式。常见的纯文本文件有：.txt、.html、.js、.css、.java。没有语义，即使你这个文件中的内容排版再清晰，那也是人认为的，实际上纯文本文件中的所有的文字生而平等，没有任何的语义。  
HTML：超文本标记语言，HyperText Markup Language。就是通过标签对儿，给纯文本增加语义。也就是说，用文本给文本增加语义，所以这个叫做“超文本”。而有一对儿对儿标签，也成为“标记”，所以就是“超文本标记语言”。  
标签： 主标题的语义 ，h是英语headline标题的意思。

1<h1></h1>

二级标题

1<h2></h2>

段落，p是英语paragraph段落的意思。

1<p></p>

HTML中除了语义，其他什么都没有：没有样式、没有交互、没有行为。  
所以HTML不能让文本居中、字号调整、颜色改变、字体、下划线、倾斜……  
sublime: 做网页和什么软件没有任何关系，所以做网页不等于DreamWeaver。Sublime非常快、方便、小巧、插件多，所以我们使用sublime。sublime中有常用的快捷键。  
新建文件 ctrl+n  
保存 ctrl+s  
调整字号 ctrl+滚轮  
上移当前行 ctrl+shift+↑  
复制当前行 ctrl+shift+d  
删除当前行 ctrl+shift+k

## 二、HTML骨架 ##

![这里写图片描述][SouthEast]  
标准的骨架

我们一部分一部分学习。  
**2.1 文档声明头**  
任何一个标准的HTML页面，第一行一定是一个以

1<!DOCTYPE ……

开头的语句。  
这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。  
到底有哪些规范呢？  
首先我们先确定一件事儿，我们现在学习的是HTML4.01这个版本，这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。但是IE6、7、8这些浏览器还不能过早的淘汰，所以这几年网页还是应该用HTML4.01来制作。后面将知道手机、移动端的网页，就可以使用HTML5了。  
HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范（见下面）：  
HTML4.01里面规定了普通、XHTML两大种规范。  
HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？

1<H1></H1>

所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。  
总结一下，一共有6种DTD，说白了，HTML第一行语句一共有6种：  
![这里写图片描述][SouthEast 1]

strict表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。  
比如，u标签，就是可以让一个本文加上下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。

1   <u>嘻嘻嘻嘻嘻</u>

怎么给文本增加下划线呢？今后的css将使用css属性来解决。

Transitional表示“普通的”，这种模式就是没有一些别的规范。  
Frameset表示“框架”，在框架的页面使用。

我们学习的就是XHTML1.0中的transitional版本。因为我们的页面中偶尔要使用一些类似u这种标签（当做CSS钩子）。  
sublime输入的html:xt x表示XHTML，t表示transitional  
HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自己打脸了）：  
1

**2.2 字符集**

1<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。  
charset就是charactor set“字符集”的意思。这个meta不用背，谁背谁傻，用sublime生成就行。  
中文能够使用的字符集两种：  
第一种：UTF-8

第二种：gb2312

也可以写成gbk

什么是字符集？活字印刷术，所有的汉字都有一个个小印章，需要哪个字，就取哪个字。

但是，有两个人都发明了字库。老王发明了一个，老李也发明了一个。  
比如同一个汉字，“传”字在老王的字库里面是第2个大盘子第4行第43列的。  
而这个汉字“传”在老李的字库里面是第5个大盘子第6行第13列的。  
计算机，不能直接存储汉字，而是存储的是编码，所以，计算机记录“传”这个字，就是这么记录的：  
老王：  
120443  
老李  
150613

有两个字库UTF-8和gb2312。  
UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……  
gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。  
字库规模： UTF-8（字全） > gb2312（只有汉字）  
我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点）  
![这里写图片描述][SouthEast 2]

当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： 文件→ set File Encoding to → Chinese Simplified(GBK)  
记住两者匹配：  
![这里写图片描述][SouthEast 3]

注意，由于UTF-8里面保存了世界上所有人类语言，所以描述一个汉字需要的码更多。  
UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。  
保存大小： UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）  
总结：  
UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；  
gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。

列出2个使用情形：  
1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。  
2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。

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

我们的课程，一律使用UTF-8，因为我们懒，懒得改了。

浏览器就是通过meta来看你是什么字符集的，比如你保存的时候meta写的和声明的不匹配，那么浏览器就是乱码。

**2.3 关键字和页面描述**  
meta除了可以设置字符集，还可以设置关键字和页面描述。  
设置页面描述：

1<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

只要设置的Description页面面熟，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO，search engine optimization，搜索引擎优化。  
![这里写图片描述][SouthEast 4]

抽象一下：

1<meta name=”” content=”” />

name就是“名字”的意思，content是“内容”的意思。  
也就是说，我们定义了一个名字是“Description”（描述）的meta。内容是网易是中国领先……  
定义关键词：

1<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。  
Keywords就是“关键词”的意思。

所以，一个比较完整的骨架是这样：

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    3<head>
    4   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    5   <meta name="Keywords" content="牛逼，很牛逼，特别牛逼" />
    6   <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
    7   <title>Document</title>
    8</head>
    9<body>
    10  
    11</body>
    12</html>

第4行 ： 字符集设置  
第5行： 关键词  
第6行： 描述

**2.4 title标签**

1<title>网页的标题</title>

title也是有助于SEO搜索引擎优化的：

1<title>传智播客官网-传智播客提供java培训、web前端培训、php培训、C/C++培训、iOS培训、网页设计培训、平面设计培训、UI设计培训、游戏开发培训、网络营销培训服务</title>

网页的head标签里面，表示的是页面的配置，有什么配置？  
字符集（charset）、关键词（keywords）、页面描述（Description）、页面标题(title)。  
今后我们还能看见一些配置：IE适配、视口、iPhone小图标等等……

## 三、HTML的基本语法特性 ##

**3.1 HTML对换行不敏感，对tab不敏感**  
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。  
换不换行、tab不tab，都不影响页面的结构。  
所以：

1   <div>
    2<h3></h3>
    3    <p></p>
    4   </div>

完全等价于：

1   <div>
    2       <h3></h3>
    3       <p></p>
    4   </div>

也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。

百度为了追求极致的显示速度，所以HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了：  
![这里写图片描述][SouthEast 5]

**3.2 空白折叠现象**  
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。  
代码：里面有空格、缩进、换行

1   <p>我爱
    2
    3
    4                                 陈伟</p>

显示的时候，折叠了：

**3.3 标签要严格封闭**  
标签不封闭是灾难的：

1<title>欢迎<title>

多说一嘴，HTML、CSS就是写代码，不能算“编程”，因为这里面没有业务逻辑，加减乘除，与或非。  
说白了，就是用代码画画。

## 四、h和p标签 ##

**4.1 h系列**

<h1> 到 <h6> 都是标签：
    <h1></h1> 一级标题
    <h2></h2> 二级标题
    ……
    <h6></h6> 六级标题

h标签没有嵌套关系的。由于h3跟着一个h2，所以，我们自己就知道了这个h3是h2子标题。

1   <h1>今日学习内容</h1>
    2   <h2>一、复习上节课的内容</h2>
    3   <h2>二、HTML骨架</h2>
    4   <h3>2.1 文档声明头</h3>
    5   <h3>2.2 字符集</h3>
    6   <h3>2.3 关键字和页面描述</h3>
    7   <h3>2.4 title标签</h3>
    8   <h2>三、HTML的基本语法特性   </h2>
    9   <h3>3.1 HTML对换行不敏感，对tab不敏感</h3>
    10  <h3>3.2 空白折叠现象</h3>
    11  <h3>3.3 标签要严格封闭</h3>
    12  <h2>四、h和p标签</h2>
    13  <h3>4.1 h系列</h3>

h是容器级的标签。理论上里面可以放置p、ul，只是法律上的允许，在语义上，不要这么写。  
**4.2 p标签**  
段落，是英语paragraph“段落”缩写。  
HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。  
顾名思义，容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。

p标签是一个文本级标签。从学习p的第一天开始，就要死死记住：p里面只能放文字、图片、表单元素。其他的一律不能放。

Chrome浏览器 是世界上HTML5支持最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是F12。  
Chrome的英语原意“硅”，是谷歌公司的产品，所以也叫作谷歌浏览器。

审查元素功能：  
![这里写图片描述][SouthEast 6]

试着把h放到p到里：

1   <p>
    2       我是一个小段落
    3       <h1>我是一个主标题</h1>
    4   </p>

浏览器不允许你这么做，我们使用Chrome的F12审查，你会发现，浏览器自己把p封闭掉了，不让你去包裹h1。

所以，再次强调，p是一个文本级的标签，p里面只能放文字、图片、表单元素。

正确的：

1   <h3>个人经历</h3>
    2   <p>
    3       Angelababy从小怎么怎么样
    4   </p>

错误的：

1   <p>
    2       <h3>个人经历</h3>
    3       Angelababy从小怎么怎么样
    4   </p>

## 五、图片 ##

**5.1 能用的图片类型**  
页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。  
不能往网页中插入的图片格式是：psd(photoshop)、ai

**5.2 语法**  
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。  
插入方法：

1<img src="baby.jpg" />

img是英语image“图片”的简写  
src 是英语source“资源”的简写，千万不要写成scr。  
src是img标签的属性，baby.jpg是这个属性的值。

这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。  
为什么？原因很简单，如果是对儿，里面就要有内容，表示给这个内容增加语义。比如

1<h1>哈哈哈哈，我是主标题啦！！！</h1>

图片就是一个图片，不需要给什么文字增加语义，所以就是自己一个人活得挺好：

我们上午学习的meta也是自封闭标签：

1<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

**5.3 alt属性**  
alt属性：

1<img src="baby.jpg" alt="巴黎结婚照" />

alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）。  
![这里写图片描述][SouthEast 7]  
**5.4 相对路径**  
HTML中插入图片，所以现在有两个文件，一个html文件，一个是jpg文件。  
我们关心的就是这两个文件的相对位置。即使这个网站项目，被用u盘拷给了别人，只要相对路径不变。图片一定能够正常显示。

当图片在文件夹里面的时候：  
![这里写图片描述][SouthEast 8]

1<img src="images/baby.jpg" alt="巴黎结婚照" />

如果在很深的文件夹中，也不怕，可以一直罗列下去：

`<img src="images/jiehunzhao/baby.jpg" alt="巴黎结婚照"` />

如果情况变得复杂，我们的图片在浅一层的文件夹中：  
![这里写图片描述][SouthEast 9]

1<img src="../3.jpg" alt="" />

如果是上两级：

1<img src="../../shizi.jpg" alt="" />

还可以更为复杂：

1<img src="../../images/jiehunzhao/baby.jpg" alt="" />

上两级的文件夹中的images文件夹中的jiehunzhao的文件夹中的baby.jpg

相对路径不会出现这种情况：  
1aaa/../bbb/1.jpg  
../要么不写，要么就写在开头。

![这里写图片描述][SouthEast 10]

标准答案：

1<img src="../../photo/1.png" />

解释：  
现在document是最大的文件夹，里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。 所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。

## 六、超级链接 ##

**6.1 基本写法**  
一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。  
语法：

1<a href="1.html">结婚照</a>

效果图：  
![这里写图片描述][SouthEast 11]  
a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。  
href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。

**6.2 a标签的另外两个属性**  
title 悬停文本  
![这里写图片描述][SouthEast 12]

1<a href="09_img.html" title="很好看哦">结婚照</a>

target 表示是否在新窗口中打开。  
target实际上是“目标”的意思。

1<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>

blank就是“空白”的意思，就表示新建一个空白窗口。为什么会有一个“\_” ，就是规定，没啥好解释的。  
也就是说，如果不写target=”\_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。  
完整的超级链接：

1<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>

分清楚img和a标签的各自的属性：

1<img src="1.jpg" />
    2<a href="1.html"></a>

**6.3 页面内的锚点**  
页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。  
锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。

1<a name="wdzp">我的作品</a>
    2或者：
    3<a id="wdzp">我的作品</a>

那么网址：  
11.html\#wdzp  
就能够让这个锚点在页面最顶端显示，此时页面有卷动。  
这样子，用户体验会好一点，用户可以直接看到页面的内容。  
![这里写图片描述][SouthEast 13]  
如果有一个超级链接，指向页面中的锚点，那么就是：

1<a href="#wdzp">点击我就查看我的作品</a>

![这里写图片描述][SouthEast 14]

**6.4 a是一个文本级的标签**  
比如一个段落中的所有文字都能够被点击，那么应该：  
p包裹a：

1<p>
    2   <a href="">段落段落段落段落段落段落</a>
    3</p>

而不是a包裹p：

1<a href="">
    2   <p>
    3       段落段落段落段落段落段落
    4   </p>
    5</a>

a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。  
能够制作能被点击的图片

[SouthEast]: /images/20220601/6be0f52020af48bb8c9126736f0cb711.png
[SouthEast 1]: /images/20220601/9319da94eeb440e2a168347dc88d63bc.png
[SouthEast 2]: /images/20220601/46756c70981a438f97176d9eee316fe2.png
[SouthEast 3]: /images/20220601/2377127e5cb54fa1a3c1cfc64ed2ab3c.png
[SouthEast 4]: /images/20220601/d97f7ccaa12746dbaf84db0748ab963d.png
[SouthEast 5]: /images/20220601/46d2997fa6c24f5f8ffe798395ab464b.png
[SouthEast 6]: /images/20220601/832cf239a4144aac801237a8065c53ef.png
[SouthEast 7]: /images/20220601/e30d279876a8446baa982570b1616e14.png
[SouthEast 8]: /images/20220601/4f07e72290b149719b9bf2f95f794c42.png
[SouthEast 9]: /images/20220601/563b4c3157a44578bb618dbd2d1b579c.png
[SouthEast 10]: /images/20220601/e043fa8cba3c4919b9b40712928cad75.png
[SouthEast 11]: /images/20220601/cf53f81562f84c8082ee506452da11f6.png
[SouthEast 12]: /images/20220601/fe155928e2ae450db937c6dee11748d8.png
[SouthEast 13]: /images/20220601/7fdad956d1aa451caa4f7f1765ec0038.png
[SouthEast 14]: /images/20220601/3bf99be40b224073b2503711e7049a4e.png