笔记

前端三大语言的作用:
HTML: 用来开发前端 页面的结构
CSS: 美化页面
JavaScript: 实现页面交互

第1章：网页显示

1. 页面基本结构

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>First HTML Program</title>
  5.     <meta charset="utf-8" />
  6.   </head>
  7.   <body>
  8.     Hello HTML
  9.   </body>
  10. </html>

  • <DOCTYPE HTML> 

    1. 文档类型,是html5标准网页声明,全称为Document Type HyperText Mark-up Language，
    2. 意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5，
    3. <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
    4. 此声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

  • <html> </html> 

    1. <html> 标签告知浏览器这是一个 HTML 文档。
    2. <html> 标签是 HTML 文档中最外层的元素。
    3. <html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

  • <head></head> 

    1. <head> 元素是所有头部元素的容器。
    2. <head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。
    3.  以下列出的元素能被用在 <head> 元素内部：
    4. <title> （在头部中，这个元素是必需的）
    5. <style>
    6. <base>
    7. <link>
    8. <meta>
    9. <script>
    10. <noscript>

  • <body></body> 

    1. <body> 标签定义文档的主体。
    2. <body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

  • <meta charset="utf-8" /> 

    1. 元数据（Metadata）是数据的数据信息。
    2. <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
    3. META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
    4. 元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

  • <title>First HTML Program</title> 

    1. <title> 标签定义文档的标题，在所有 HTML 文档中是必需的。
    2. <title>元素：
    3. 定义浏览器工具栏中的标题
    4. 提供页面被添加到收藏夹时的标题
    5. 显示在搜索引擎结果中的页面标题

2. 标签名与标签属性

  • 标签名
    用来描述该标签中的内容在页面中的角色.
    标签分从书写格式上分为单标签和双标签两种
    • 双标签
      <标签名>xxxxx</标签名>
    • 单标签
      <标签名>

标签按显示样式分为行标签和块标签两种

  • 行标签
    每个标签在页面中显示时,不会独占一行.
  • 块标签
    每个标签在页面中显示时,会独占一行

两种标签可以通过显示属性进行切换

  • 标签属性
    用来对标签的细节进行补充

3. 添加文字

  • 标题标签
    共有6个,显示为6级不同的标题 

    1. <h1>这是标题 1</h1>
    2.  <h2>这是标题 2</h2>
    3.  <h3>这是标题 3</h3>
    4.  <h4>这是标题 4</h4>
    5.  <h5>这是标题 5</h5>
    6.  <h6>这是标题 6</h6>

  • 段落标签
    用来修饰一段文字,段落之间有明显的段间距 

    1. <p>
    2. 这次会晤的主题是“金砖国家在非洲：在第四次工业革命中共谋包容增长和共同繁荣”，很有现实意义。从18世纪第一次工业革命的机械化，到19世纪第二次工业革命的电气化，再到20世纪第三次工业革命的信息化，一次次颠覆性的科技革新，带来社会生产力的大解放和生活水平的大跃升，从根本上改变了人类历史的发展轨迹。
    3. </p>
    4. <p>
    5. 如今，我们正在经历一场更大范围、更深层次的科技革命和产业变革。大数据、人工智能等前沿技术不断取得突破，新技术、新业态、新产业层出不穷。各国利益和命运紧密相连，深度交融。同时，世界经济新旧动能转换尚未完成，南北失衡等深层次、结构性问题还未消除。地缘政治冲突此起彼伏，保护主义和单边主义愈演愈烈，直接影响到新兴市场国家和发展中国家发展外部环境。
    6. </p>

  • 字体标签(了解)
    font 标签规定文本的字体、字体尺寸、字体颜色。已废弃,在HTML5中不支持

    • color 属性 , 用来规定文本的颜色
    • size 属性, 用来规定文本的字体大小
    • face 属性, 用来规定文本的字体

4. 添加CSS样式

4.1 CSS介绍
  1. 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言
  3. CSS 的作用是用来对页面进行样式的设置,美化页面
  • 选择标签
    ```html 选择器{

} // 所有符合选择器的标签都会被选中

  2. -  设置格式  
  3. ```html
  4. 属性名: 属性值;
  5. ....

4.2 CSS使用方式

  • 行内样式 

    1. <p style="width:500px;height:300px;background-color:red;">
    2.    这是一个DIV标签
    3. </p>

  • 内部样式 

    1. <head>
    2.    <style>
    3.    p{
    4.      width:500px;
    5.      height:500px;
    6.    }
    7.    </style>
    8. </head>

  • 外部样式
    Theme.css 是一个样式表文件, 所有的样式可以写在该文件中
    通过 link 标签引入后,对当前页面进行修饰(实际工作中使用非常多) 

    1. <head> 
    2. <link rel="stylesheet" type="text/css" href="theme.css" /> 
    3. </head>

4.3 CSS选择器

css 通过选择器,来选取符合的标签进行样式的设置

常用选择器有: id选择器, class选择器, 标签选择器, 群组选择器, 派生选择器, :hover

  • id 选择器 

    1. <head>
    2.    <style>
    3.    #p1{
    4.      width:500px;
    5.      height:500px;
    6.    }
    7.    </style>
    8. </head>
    9. <body>
    10. <p id="p1">AAAA</p>
    11. </body>

  • Class 类选择器 

    1. <head>
    2.    <style>
    3.    .p1{
    4.      width:500px;
    5.      height:500px;
    6.    }
    7.    </style>
    8. </head>
    9. <body>
    10. <p class="p1">AAAA</p>
    11. </body>

  • 标签选择器 

    1. <head>
    2.    <style>
    3.    p{
    4.      width:500px;
    5.      height:500px;
    6.    }
    7.    </style>
    8. </head>
    9. <body>
    10. <p>AAAA</p>
    11. </body>

  • 组选择器 

    1. <head>
    2.    <style>
    3.    p, div{
    4.      width:500px;
    5.      height:500px;
    6.    }
    7.    </style>
    8. </head>
    9. <body>
    10. <p>AAAA</p>
    11. <div> BBB </div>
    12. </body>

  • 派生选择器(层级选择器) 

    1. <head>
    2.    <style>
    3.    div p{
    4.      width:500px;
    5.      height:500px;
    6.    }
    7.    </style>
    8. </head>
    9. <body>
    10. <div>
    11.  <p>AABBCC</p>
    12. </div>
    13. <p>AAAA</p>
    14. </body>

  • :hover 伪类选择器 

    1. <head>
    2.    <style>
    3.    p:hover{
    4.      width:500px;
    5.      height:500px;
    6.    }
    7.    </style>
    8. </head>
    9. <body>
    10. <p>AAAA</p>
    11. </body>

4.4 选择器优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

不同级别

1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2、作为style属性写在元素内的样式
3、id选择器
4、类选择器
5、标签选择器
6、通配符选择器
7、浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别中后写的会覆盖先写的样式。

4.5 常用样式属性

常用文本样式

样式 值 作用
font-size 数字 设置字体大小
font-weight normal | bold | bolder | lighter 设置文字是否加粗
font-style normal | italic | oblique 设置文字是否为斜体
font-family 字体名称 设置文字显示的字体名称
text-align left | center | right | justify 水平对齐方式
vertical-align top | middle | bottom | sub | super | baseline 垂直对齐方式
text-indent 长度 设置文本缩进
line-height normal | 长度 设置行高
text-decoration none | blink | underline | line-through | overline 设置文本装饰

5. div标签

div 标签一般配合CSS 样式,用来对页面进行布局

5.1 盒子模型

1、将网页上每个HTML元素视为长方形的盒子，是网页设计上的一大创新。

CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。

2、盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。

3、 一个盒子的实际高度（宽度）是由content+padding+border组成。

可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。

5.2 常用样式
单位 值 作用
width 长度 | 百分比 设置标签宽度
height 长度 | 百分比 设置标签高度
max-width 长度 | 百分比 设置标签最大宽度
max-height 长度 | 百分比 设置标签最大高度
min-width 长度 | 百分比 设置标签最小宽度
min-height 长度 | 百分比 设置标签最小高度
border 边框粗细 边框样式 边框颜色 设置边框显示效果
border-width 长度 设置边框粗细
border-style none | hidden | solid | dashed | dotten | double… 设置边框样式
border-color 颜色 设置边框颜色
border-top 边框粗细 边框样式 边框颜色 设置标签顶部边框
border-left 边框粗细 边框样式 边框颜色 设置标签左边边框
border-right 边框粗细 边框样式 边框颜色 设置标签右边边框
border-bottom 边框粗细 边框样式 边框颜色 设置标签底部边框
margin 上边距 右边距 下边距 左边距 设置标签四边的外延边距
margin-left 长度 | 百分比 设置标签左边的外延边距
margin-right 长度 | 百分比 设置标签右边的外延边距
margin-top 长度 | 百分比 设置标签顶部的外延边距
margin-bottom 长度 | 百分比 设置标签底部的外延边距
padding 上边距 右边距 下边距 左边距 设置标签四边的内部边距
padding-left 长度 | 百分比 设置标签左边的内部边距
padding-right 长度 | 百分比 设置标签右边的内部边距
padding-top 长度 | 百分比 设置标签顶部的内部边距
padding-bottom 长度 | 百分比 设置标签底部的内部边距

6、添加图片

6.1 图片标签
  1. <img src="" />

6.2 背景图片

  1. <style>
  2.   div{
  3.     background:url("");
  4.   }
  5. </style>

7、标签定位显示

用不同的定位方式，控制标签具体的显示位置。

  1.     position：static | relative | fixed | absolute；
  3.     static 定位是默认值，即没有定位，遵循正常的文档流对象。
  6.     （1）absolute绝对定位
  8.     （2）relative相对定位
  10.     （3）fixed绝对定位

作业

1、简单描述HTML4与HTML5的区别？
1.DOCTYPE声明的简化 <!DOCTYPE html>
2.指定字符编码
3.新增内联SVG和Canvas
4.新增支持音视频

5.元素标记的省略、具有boolean值的属性、省略引号6.不再使用frame框架，只支持iframe框架7.强调标签语义化，HTML5为了语义化增加修改了很多标签和属性

2、请说明常用的支持中文的字符集编码都有哪些，以及他们的特点是什么？
GB2312简体中文编码，一个汉字占用2个字节，在大陆是主要的编码方式。当文章/网页中包含繁体中文、日文、韩文等时，这些内容可能无法被正确编码。
BIG5繁体中文编码，主要在台湾地区使用。
GBK支持简体及繁体中文，但对他国非拉丁字母语言还是有问题。
UTF-8:Unicode编码的一种，Unicode用一些基本的保留字符制定了三套编码方式，它们分别为UTF-8，UTF-16，UTF-32.在UTF-8中，字符是以8位序列来编码的，用一个或几个字节来表示一个字符。这种方式的最大好处是UTF-8保留了ASCII字符的编码作为它的一部分。UTF-8俗称“万国码”，可以同屏显示多语种，一个汉字占用3字节。为了做到国际化，网页尽可能采用UTF-8编码。
GB2312字符集
作用：国家简体中文字符集，兼容ASCII
位数：使用2个字节表示，能表示7445个符号，包括6763个汉字，几乎覆盖所有高频率汉字。
范围：高字节从A1-A7，低字节从A1到FE。将高字节和低字节分别加上0xA0即可得到编码。
GBK字符集
作用：它是GB2312的扩展，加入对繁体字的支持，兼容GB2312.
位数：使用2个字节表示，可表示21886个字符。
范围：高字节从81到FE，低字节从40到FE.
GB18030字符集
作用：它解决了中文、日文、朝鲜语等的编码，兼容GBK。
位数：它采用变字节表示（1ASCII, 2,4字节）。可表示27484个文字。
范围：1字节从00到7F；2字节高字节从81到FE，低字节从40到7E和80到FE；4字节第一三字节从81到FE，第二四字节从30到39.

3、请写出HTML常用文本标签？（至少写出8个）








4、简单描述CSS2与CSS3的区别？
css2有的属性css3都有，但是css3有的属性css2不一定有。比如定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片等很多，这个是CSS2上没有的效果，现在新版本的浏览器基本都支持CSS3，比如IE9、FF4+、chrome11+，但是要用CSS3开发网站的话，要考虑的是还在用低版本浏览器的用户。

5、标签添加CSS方式（CSS放置位置）是哪几种？
外部样式

内部样式
style标签位于head标签内部

行内样式


6、请写出CSS常用选择器？（至少写出8个）
id选择器
class选择器
标签选择器
群组选择器
派生选择器
:hover
7、请写出CSS选择器优先级的排列顺序？
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
8、请写出CSS常用文本样式？（至少写出8个）
| font-size | 数字 | 设置字体大小
| font-weight | normal | bold | bolder | lighter | 设置文字是否加粗
| font-style | normal | italic | oblique | 设置文字是否为斜体
| font-family | 字体名称 | 设置文字显示的字体名称
| text-align | left | center | right | justify | 水平对齐方式
| vertical-align | top | middle | bottom | sub | super| baseline | 垂直对齐方式
| text-indent | 长度 | 设置文本缩进
| line-height | normal | 长度 | 设置行高
| text-decoration | none | blink | underline | line-through| overline | 设置文本装饰
9、简单描述盒子模型概念？
将网页上每个HTML元素视为长方形的盒子，是网页设计上的一大创新。
CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。
2、盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。
3、 一个盒子的实际高度（宽度）是由content+padding+border组成。
可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。
10、请写出盒子模型相关样式？（至少写出5个）
width 宽
height 高
border 边框
margin 外边距
padding 内边距

11、请写出如下功能的样式代码：
设置div标签左上角为圆角显示样式，圆角值为10像素
border-top-left-radius = 10px;
12、请写出设置标签背景颜色、背景图片等相关样式？
background=”背景颜色 url(“图片路径”) 平铺 位置”
13、请写出如下功能的样式代码：
将鼠标指针设置“小手”的显示样式
cursor: pointer;
14、请写出如下功能的样式代码：
控制div标签，在整个页面中，实现水平居中显示
align-items:center;
justify-content:center;
15、请说明CSS中标签定位都有哪些方式，以及他们的特点是什么？
absolute绝对定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。

relative相对定位
相对定位元素的定位是相对其正常位置。

fixed绝对定位
元素的位置相对于浏览器窗口是固定位置。
16、请写出如下功能的样式代码：
控制某一标签，向左向上偏移50%的距离
position = -50 -50;