Web前端零基础到实战（一）

短命女 2022-05-24 05:26 263阅读 0赞

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

学习目标:

*  了解常用浏览器
 *  掌握WEB标准
 *  理解标签语义化
 *  掌握常用的排版标签
 *  掌握常用的文本格式化图像链接等标签
 *  掌握三种列表标签
 *  掌握表格标签
 *  掌握表格标签

# HTML 第一天目标 #

能够写出基本的页面（里面包含图片、各种标签和链接）

# 开发工具 #

我们主要用的 开发工具有 chrome 、 sublime 、 photoshop

**浏览器（显示）**

浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、
    谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

**编辑工具**  
普通青年 Dreamweaver  
文艺青年 sublime  
高手和傻子 用记事本  
**photo协助工具**

PS 工具是我们使用频率比较高的软件之一， 我们学习PS目的不是为了设计海报做电商和UI的，而是要求：

*  熟练的切图
 *  能和网站美工美眉有共同话题。。。。。

# 常见浏览器内核介绍 #

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
    渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计
    算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，
    所以渲染的效果也不相同。
    JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。
    
    最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引
    擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上
    没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、
    Gecko、Blink、Webkit。

**移动端的不同**  
移动端的浏览器内核主要说的是系统内置浏览器的内核。  
Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。  
iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的。  
**\# Web标准（重点）**

通过以上浏览器的内核不同，我们知道他们工作原理、解析肯定不同，显示就会有差别  
![这里写图片描述][70]  
**Web 标准的好处**  
1、让Web的发展前景更广阔 2、内容能被更广泛的设备访问 3、更容易被搜寻引擎搜索 4、降低网站流量费用 5、使网站更易于维护 6、提高页面浏览速度  
**Web 标准构成**  
Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。  
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。最重要 
    表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
    行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript

理想状态我们的源码： .HTML .css .js  
![这里写图片描述][70 1]  
**总结WEB标准**

*  结构标准：决定你是否有个好天然身体
 *  表现标准：决定你是否打扮的美丽外观
 *  行为标准：决定你是否有吸引人的行为

# HTML 初识 #

一般先学习HTML+CSS， 这里我们先定一个小目标，先学HTML,后学习CSS。

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。

所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。

**书写我们的第一个HTML 页面！**

1 HTML标签：
    
    作用所有HTML中标签的一个根节点。 最大的标签   根标签
    
    2 head标签： 文档的头部
    
    文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
    绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
    
    注意在head标签中我们必须要设置的标签是title
    
    3.title标签： 文档的标题
    
    作用：让页面拥有一个属于自己的标题。
    
    4.body标签：文档的主体  以后我们的页面内容 基本都是放到body里面的
    
    body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

![html][]

## HTML标签分类 ##

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。  
1.双标签

html  
<标签名> 内容

## HTML标签关系 ##

标签的相互关系就分为两种：

1.嵌套关系

![这里写图片描述][70 2]

2.并列关系

![这里写图片描述][70 3]

**倡议： 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。**

# 文档类型 #

<**!DOCTYPE html**>

同学你用啥手机？你咋回答？

这句话就是告诉我们使用哪个html版本？ 我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

**字符集**

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

# HTML标签的语义化 #

白话： 所谓标签语义化，就是指标签的含义。

## 为什么要有语义化标签 ##

1.  方便代码的阅读和维护
2.  同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3.  使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

白话，一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

# HTML常用标签 #

首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。

HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

## 排版标签 ##

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

### 标题标签 (熟记) ###

单词缩写： head 头部. 标题 title 文档标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

<**h1**>、<**h2**>、<**h3**>、<**h4**>、<**h5**>和<**h6**>

### 段落标签( 熟记) ###

单词缩写： paragraph 段落 \[ˈpærəgræf\] 无须记这个单词

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<**p**> 文本内容 <**/p**>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

### 水平线标签(认识) ###

单词缩写： horizontal 横线 \[ˌhɔrəˈzɑntl\] 同上

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

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

就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签，hr后面写上一个空格。

在网页中显示默认样式的水平线。

练习： 新闻页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <h1>40.6摄氏度：上海创出140年气象史上高温新纪录</h1>
    
    2020年07月27日
    <p>10:58:26来源：新华网</p>
    <hr />
    <p>
    新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值。</p>
    
    <p>上海已经连续２天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。</p>
    
    <p>在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站 １４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p>
    
    <p>由于气温实在太高，上海２６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</p>
    </body>
    </html>

### 换行标签(熟记) ###

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

### div span标签(重点) ###

div span 是没有语义的 是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。  
div可以独占一行，span一行可以存在多个。  
span, 跨度，跨距；范围

语法：<**div**> 这是头部 <**/div**> <**span**>今日价格<**/span**>

# 文本格式化标签(熟记) #

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

![这里写图片描述][70 4]

b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈

## 图像标签img (重点) ##

单词缩写： image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

![这里写图片描述][70 5]

## 链接标签(重点) ##

单词缩写： anchor 的缩写 \[ˈæŋkə(r)\] 。基本解释 锚, 铁锚 的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有\_self和\_blank两种，其中\_self为默认值，\_blank为在新窗口中打开方式。

注意：

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href=”index.html”> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“\#”(即href=”\#”)，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

### 锚点定位 （难点） ###

通过创建锚点链接，用户能够快速定位到目标内容。  
创建锚点链接分为两步：

~~~html  
1.使用“a href=”\#id名>“链接文本”创建链接文本（被点击的）

2.使用相应的id名标注跳转目标的位置。  
<**h3** id=”two”>第2集<**/h3**>  
~~~

### base 标签 基本的 ###

base 可以设置整体链接的打开状态

base 写到 <**head**> <**/head**> 之间

把所有的连接 都默认添加 target=”\_blank”。

**特殊字符标签 （理解）**  
![这里写图片描述][70 6]

## 注释标签 ##

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：

ctrl + /       或者 ctrl +shift + /

*  多写注释是很好的写代码习惯，团队协作更加顺畅。
 *  注释是写给队友看的，浏览器是不执行的。

# 路径(重点、难点) #

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为： 相对路径和绝对路径

## 相对路径 ##

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

1.  图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=”logo.gif” />。
2.  图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src=”img/img01/logo.gif” />。
3.  图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src=”../logo.gif” />。

## 绝对路径 ##

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。绝对路径很少使用。

“D:\\web\\img\\logo.gif”，或完整的网络地址，例如“[http://www.itcast.cn/images/logo.gif][http_www.itcast.cn_images_logo.gif]”。

# 列表标签 #

什么是列表？

把…制成表,以表显示

容器里面装载着文字或图表的一种形式，叫列表。

列表最大的特点就是 整齐 、整洁、 有序

## 无序列表 ul （重点） ##

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。

![这里写图片描述][70 7]

手下留心：

1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
     2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
     3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

## 有序列表 ol （了解） ##

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

所有特性基本与ul 一致。

但是实际工作中， 较少用  
\#\# 自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

html
    <dl>
      <dt>名词1</dt>
      <dd>名词1解释1</dd>
      <dd>名词1解释2</dd>
      ...
      <dt>名词2</dt>
      <dd>名词2解释1</dd>
      <dd>名词2解释2</dd>
      ...
    </dl>

自定义列表应用比较广泛。

# 表格 table(会使用) #

存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。

![这里写图片描述][70 8]  
ps: 这些地方用表格，你会觉得生活还是那么美好。。。。

## 创建表格 ##

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
      <tr>
        <td>单元格内的文字</td>
        ...
      </tr>
      ...
    </table>

在上面的语法中包含三对HTML标签，分别为 <table>

~~~  
1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。  
~~~

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，可以容纳所有的元素

## 表格属性 ##

![这里写图片描述][70 9]

约定习惯:三参为0 border cellpadding cellspacing 为 0

## 表头标签 ##

表头单元格一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th>

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

## 表格结构（了解） ##

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：
    
    <thead></thead>：用于定义表格的头部。
    
    必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
    
    
    <tbody></tbody>：用于定义表格的主体。
    
    位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

## 表格标题 ##

**表格的标题： caption**

**定义和用法**

caption 元素定义表格标题。

<table>
       <caption>我是表格标题</caption>
    </table>

caption 标签必须紧随 table 标签之后。

只存在 表格里面

您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

[70]: /images/20220524/da4098903b294a2ab59e271db7525520.png
[70 1]: /images/20220524/ecfcc3acc0f44925b89186ea9f4b8bbd.png
[html]: /images/20220524/db6262c5e0d04565935dd5fc4f15a57f.png
[70 2]: /images/20220524/39fee192151c48cc951342dc1f0c37ce.png
[70 3]: /images/20220524/7053048e179344258f0a28ecf6416ff8.png
[70 4]: /images/20220524/32f515c0857944c89e076367f2162b7a.png
[70 5]: /images/20220524/2951271f358a432cb31364c772139c67.png
[70 6]: /images/20220524/158e52e8b38a478da16e903567b33e46.png
[http_www.itcast.cn_images_logo.gif]: http://www.itcast.cn/images/logo.gif
[70 7]: /images/20220524/17bab274b1c14d6c97bbd945f42d824d.png
[70 8]: /images/20220524/1d902d755b9e4512b86d14a38d78fa1c.png
[70 9]: /images/20220524/87caf0ad9ada43e6bcf26184afb027e9.png
[70 10]: /images/20220524/65829d905ac54c508150db6e83622f36.png