系列文章目录

前端开发主要用到HTML、CSS、Javascript。首先是HTML的学习

一、网页

1、网页通常是HTML格式的文件，通过浏览器来阅读。常见以.htm或.html后缀结尾的文件，俗称HTML文件。

2、HTML （Hyper Text Markup Languange）不是编程语言，而是一种标记语言。标记语言是一套标记标签（Markup tag）

3、网页的形成：前端人员开发代码—浏览器显示代码（渲染、解析）—生成web页面

二、常用浏览器及内核

1、浏览器内核（渲染引擎）：负责读取网页内容、整理讯息、计算网页的显示页面

三、Web标准

1、Web标准的形成主要包括结构（structure）、表现（Presentation）和行为（Behavior）

2、Web标签提出的最佳体验方案：结构、表现、行为相分离，结构写到HTML文件里，表现写到CSS文件里，行为写到Javascript文件里。

四、HTML标签

1、HTML标签是由尖括号包围的关键词，通常是成对出现，列如<html>（开始标签）和</html>（结束标签）称为双标签、<br />称为单标签。

2、双标签关系分两类：包含关系和并列关系。

包含关系

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

并列关系

<head></head>
<body></body>

五、HTML基本结构标签

1、每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，称为“根标签”
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<title></title>	文档的标题	让页面拥有一个自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容，基本都是放到body里面的

六、网页开发工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

6.1文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

这句话的意思是：当前页面采用的是HTML5版本来显示网页。

注意：

1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。

2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

6.2lang语言种类

用来定义当前文档显示的语言。

1、en定义语言为英语

2、zh—CN定义语言为中文

6.3字符集

字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪些字符编码。

charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码。

七、HTML常用标签

根据标签的语义，在合适的地方给一个最为合理的标签，可以使页面结构更清晰。

7.1标题标签<h1>-<h6>

HTML提供了6个等级的网页标题，即<h1>-<h6>。

标签语义：作为标题使用，并且依据重要性递减。

特点：

1、加了标题的文字会变的加粗，字号也会依次变大。

2、一个标题独占一行

<body>
    <h1>渣女下酒，越喝越有</h1>
    <h2>想喝酒</h2>123
    <h3>diangenyan</h3>
    <h4>hebeijiu</h4>
    <h5>yingyu 60zhengzhi 75</h5>
    <h6>shuxue120</h6>
</body>

7.2段落和换行标签

1、段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分成若干个段落。

单词paragraph的缩写，意为段落。

标签语义：可以把HTML文档分割为若干段落

特点：

1.文本在一个段落中会根据浏览器窗口的大小自动换行

2.段落和段落之间保有空隙。

2、换行标签

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

break的缩写，标签语义：强制换行。

特点：

1.<br />是单标签

2.与段落标签相比，换行标签实行后上下两行间没有间距

7.3文本格式化标签

在网页中，有时候需要为文字设置粗体、斜体或下划线等效果

标签语义：突出重要性，比普通文字更重要

语义	标签
加粗	<strong></strong>或<b></b>
倾斜	<em></em>或<i></i>
删除线	<del></del>或<s></s>
下划线	<ins></ins>或<u></u>

7.4<div>和<span>标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。

div是division的缩写，表示分割、分区。span意为跨度、跨距。

特点：

1.<div>标签用来布局，但是一行只能放一个<div>.大盒子

2.<div>标签用来布局，一行上可以多个<span>.小盒子

7.5图像标签和路径

1、图像标签<img>

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示的文字
title	文本	提示文本。鼠标放在图上就显示文字
width	像素	图像的宽
height	像素	图像的高
border	像素	图像的边框粗细