HTML和CSS常用元素

网页设计

网站制作到前端开发

Web 1.0时代指的的网站制作，那时候的页面主要是静态页面，仅供用户浏览，而无法提供用户进行交互（无法与服务器进行数据交互）。

而到了Web 2.0时代，已经从网页制作到了前端开发，以前的网页“三剑客”（Fw、Dw、Fl）已经满足不了我们的需求，所以我们要学习新的技术。

分别是：HTML、CSS、JavaScript也是新“三剑客”。

1. HTML:超文本标记语言，是一门描述型语言。
2. CSS：层叠样式表，是控制网页外观的一门技术。
3. JavaScript：是嵌入HTML的一种脚本语言。

HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript用于控制网页的行为。

比如：制作网页就好比盖房子，HTML用于搭建房子的框架，CSS用于装饰房子的外观，JavaScript用于家居的交互（比如开灯关灯）。

​ 此外，很多人认为“网站就是很多网页的集合”，其实这个理解是不太恰当的。准确地说，网站是前端与后端的结合。

HTML

HTML是一门标记语言，我们学习HTML就是在学习它的各种标签，用标签来表明各种东西。

HTMl注释

语法：

一般标签和自闭合标签

一般标签：有开始和结束符号，中间可以插入文字和其他的标签

自闭合标签：只有开始符号，没有结束符号。开始标签里面不能插入任何东西。（所谓自闭合，本来要配一个结束符号，但却自己闭合了）

HTML标签结构

​ HTML是由最基本的四个部分组成（一个页面的最基本的四个部分）

1. / ——声明文档，表示这是一个HTML文档。

2. ——告诉浏览器，页面从html开始到/html结束
3. > ——这是网页的头部，用于定义一些特殊的内容
4. ——这是网页的身体，大部分代码都是在这里面编写

head标签

一般来说只能有6个标签放在head里面

title标签

meta标签

link标签

style标签

script标签

base标签

title标签：

唯一作用定义网页的标题

****必须在最前面

meta标签：

一般用于定义页面的特殊信息，这些信息不是提供给用户看的，而是提供给搜索引擎的看的。简单来说，meta标签是告诉搜索引擎这个网页是做什么的。

meta有两个重要属性：name和http-equiv

name:描述页面是做什么的，其属性值有：

​ keywords（页面关键字）

​ description（页面描述）

​ author（页面作者）

​ copyright（页面版权信息）

语法结构为：

http-equiv:有两个功能

​ 定义网页所使用的编码

​ 语法：

不过在HTML5标准中，上面这句代码可以简写成下面这样。

​ 定义网页自动刷新跳转

​ 语法：

style标签：

style标签用于定义元素css样式，学到css在补充。

script标签：

在HTML中，script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。学到JavaScript在补充。

link标签

在HTML中，link标签用于引入外部样式文件（CSS文件）。学到css在补充。

base标签

这个标签没有意义，我们只需知道有这么个标签就行。

body标签结构

页面的构成元素:

1. 文本
2. 图片
3. 超链接
4. 音频和视频

div标签

语法：

用来划分区域，让代码更有逻辑性

HTML文本

1. 标题标签

   语法：

   h1到h6分别是1到6级标题，h1一般只能有一个。

2. 段落标签

   语法：

   里面存放的基本段落

3. 换行标签

   语法：
   

   段落标签也会提供自动换行

   比如：

   落叶聚还散，寒鸦栖复惊

   相思相见知何日，此时此夜难为情

4. 文本标签

   粗体标签：strong（建议用这个）、b

   斜体标签：i、em（建议用这个）、cite

   上标标签：sup

   下标标签：sub

   中划线标签：s

   下划线标签：u

   大字号标签：big

   小字号标签：small

   重点前4个，其他会用css代替

5. 水平线标签

   语法：

   ---

6. 特殊符号

   特殊符号都是以&开始;结尾的

   空格：语法：  (三个&nbsp 约等于1个汉字)

   其他特殊符号：
   
   

块元素和行内元素

块元素：在浏览器显示状态下独占一行，排斥其他元素与其一行。块元素内部可以容纳其他块元素和行内元素。

常见的块元素

行内元素：行内元素可以与其他的行内元素位于一行；

行内元素内部可以容纳其他行内元素，但不可以容纳块元素。

常见的行内元素

HTML列表

类别分为三种：有序列表、无序列表、定义列表

1. 有序列表：各个列表是有顺序的。

   （数字）语法：

   ​

2. 列表项

3. ​

4. 列表项

5. ​

6. 列表项

7. ​

必须一起使用，不能单独使用。语法里面只能有

• ,不能有别的。

  （其他符号）语法：

  （其他）语法：