Web前端基础知识

1. WEB网页的标准

• 结构：
  • XML 可扩展标记语言
  • XHTML 可扩展超文本标记语
• 表现：
  • CSS 层叠样式表
• 行为：
  • DOM 文档对象模型
  • ECMA Script 标准脚本语言

2. 文档对象模型

页面作为对象----文档对象模型（Document Object Model . DOM），现如今完全属于页面。

DOM实现动态显示与交互，使用xmlhttprequest对象进行异步数据读取，使用JavaScript对数据进行绑定处理

3. HTML与CSS基础

3.1 浏览器渲染过程

3.2 HTML标签

行内元素：不独占一行，无法设置宽高，是根据内容大小来扩充，只可以定义左右外边距

行内块元素：不独占一行，可以设置宽高

块元素：独占一行，可以设置宽高

• 行内元素

<img>,<input>,<span>,<em>,<del>,<a>,<strong>

• 块元素

<div>,<header>,<footer>,<section>,<h1>~<h6>,<p>,<ul>,<ol>,<li>

• 空元素

<br>,<hr>

/* 元素转换属性 display */

display: inline;   /* 转换为行内元素,不独占一行 */

display: inline-block;    /* 转换为行内块元素，不独占一行，可设置宽高 */

display: block;    /* 转换为块元素,可以设置宽高 */

display: none;   /* 隐藏元素，不显示，不占位置 */

<hr /> <!--定义一条水平线--> 
<br /> <!--换行-->

• 网站标题，概括网站信息，告诉搜索引擎或用户这个网站是干什么的 (网站搜索排名靠前SEO)

<titile>设置网页标题（浏览器上方标签栏）</titile>

• 凸显文字主题内容，告诉爬虫或用户这个网站的主要内容是什么，大部分网站的logo是用h1包裹的

<h1>定义标题 h1~h6逐级递减（根据字号和重要性）</h1>

• 文本标签

<p align="设置对齐方式">文本</p>

/* 默认左对齐 */
align: left; 
/* 居中对齐 */
align: center;
/* 右对齐 */
align: right;



/* 正常 */
font-weight: normal;
/* 加粗 */
font-weight: bold;
/*只适用于块元素*/
text-align
/*首行缩进2单位*/
text-indent: 2em;

• 实体标签，只用于文字加粗，为了符合CSS3规范，尽量少用，后期可能会被移除

<b>文字</b>

• 逻辑标签，用于加粗文字并加强字符语气，表示其中内容比较重要，用于强调作用

<strong>加粗并加重语气</strong>

• 实体标签，用于文字倾斜，多用于字体图标

<i>文字</i>

• 逻辑标签，用于文字倾斜并强调内容，多用于术语(医药类、生物类)

<em>文字</em>

• 行内标记

<span>特殊显示文本</span> 

• 超链接

<a href="跳转目标" target="[_self(原窗口打开), _blank(新窗口打开)]">超链接</a>

锚点链接--->即跳转目标变为#id名,再定义一个元素id与其相同,点击此超链接即会跳转到指定地方
/* 鼠标悬浮属性设置悬浮变换背景 */
.className:hover{
	background: url('url');
}

• 特殊字符

/* 空格 */
 
/* 小于号 < */
&lt;
/* 大于号 > */
&gt;

• 图片，在SEO层面，爬虫无法抓取图片，所以为了增加SEO效果，alt 属性要写这张图片描述什么内容或者关键词

<img src="图片地址" title="鼠标移入后悬停显示的信息" alt="图片无法加载时替换的文本" />

/* css属性 */
width  图像宽度
height 图像高度，一般宽或者高只设置一个，另一个会等比例变化
border 图像边框宽度
vspace 垂直边距
hspace 水平边距
background: url('url');背景图像地址
background-attachment: scroll; 图像随页面滚动
background-color: transparent; 背景透明
background-repeat: repeat; 默认背景图像平铺,水平竖直方向
background-repeat: no-repeat; 不平铺
background-repeat: repeat-x; 沿水平方向
background-repeat: repeat-y; 沿竖直方向 
background-repeat: fixed; 固定背景图像

background-position 控制背景图像位置

某个块元素的背景往往在css样式中进行定义background: url('url') no-repeat;

• 图片类型 png ,jpg, gif, webp

png ---> 无损压缩，体积大，容易影响加载速度，适合做网页小图标
jpg ---> 压缩算法，有失真，体积稍小，适合做中大图片
gif ---> 动态图
webp ---> 同时支持有损无损压缩，相同质量图片体积更小，兼容性稍微较差

• 列表

<ul>无序列表
    <li>列表项</li>
    ...
</ul> 

<ol>有序列表
    <li>列表项</li>
    ...
</ol>

<dl>解释列表
    <dt>解释标题</dt>
    <dd>解释文本</dd>
</dl>

• 表单

<form action="url" method="[get,post]" name="表单名">  
	<input type="[text,password,button,radio,checkbox,reset,file,submit" name="输入类型名" value="显示值" />
	<textarea>定义多行文本框</textarea>
	<select>
	定义下拉列表，需要有下拉选项
        <optgroup>可分多个组
            <option>下拉选项</option>
            ...
            <option>选项</option>
        </optgroup>
	</select>
</form>

3.3 CSS属性

• CSS属性赋值

CSS样式，放于head中

外链式
<link rel="stylesheet" type="text/css" href="./url/style.css" /> 

内嵌式
<style type="text/css">
    div{
        ...
    }
</style>

行内式
<div style="..."></div>

一值： 四边

二值： 上下/左右

三值： 上/左右/下

四值： 上/右/下/左

• CSS盒子模型 1. 标准盒子模型 2. IE盒子模型

这里只要记住标准盒子模型分为四块：margin，border，padding，content，IE盒子模型分为两块margin，content(border，padding)

两者可通过css进行转换

/* 转成IE盒子模型 */
box-sizing: content-box;

/* 转成标准盒子模型 */
box-sizing: border-box;

/* 当前盒子的高度 */
height
/* 当前内容所在行的高度，如果文字换行整个盒子都增大，盒子高度也就是行数*行高 */
line-height

• CSS选择器

通配符选择器 [*]   匹配页面中所有元素

id选择器 [#id]    用名来指定样式

类选择器 [.className] 定义一类名的样式，类名第一个字符不能用数字并且严格区分大小写 

标签选择器[div][body][p]  将页面内同一种标签统一样式

标签指定选择器[div.className]  标签名.类名

后代选择器[ul li]   外标记 内标记，中间用空格分隔

并集选择器 多个名组成一起定义样式

相邻选择器[.className + div] 表示在当前类的下一个div的样式，可替换为标签或其它灵活运用

• 选择器优先级—权重相加得来，要注意后代选择器权重相加后可能大于类选择器(覆盖样式时使用)

!important 具有最大优先级
  .header {
    background-color: blue!important;
  }

!important > 内联样式 >  id > class > 标签选择器 > *

CSS属性的值与单位之间不允许出现空格

• CSS的继承性

不可被继承的属性
边框 border
边距 padding margin
背景 background
定位 position
宽高 width height 

• 盒子水平垂直居中方式

/* 块级元素 */
margin: 0 auto;

/* 行内元素 */
text-align: center;

/* 背景元素 */
background-position: center top;

/* 盒子的父元素 */
  .parent {
    display: flex;
    /* 主轴对齐方式 */
    justify-content: center;
    /* 侧轴对齐方式 */
    align-items: center;
  }
  .children {
  /* 要水平垂直居中的盒子 */
  }

/* 盒子的父元素 */
  .parent {
    position: relative;
  }
  .children {
  /* 要水平垂直居中的盒子 */
    position: absolute;
    transform: translate(-50%,-50%);
  }

• 边框样式

/* 无样式 */
border-style: none;
/* 单实线 */
border-style: solid;
/* 双实线 */
border-style: double;
/* 虚线 */
border-style: dashed;
/* 点线 */
border-style: dotted;

• 元素浮动

float: left;
float: right;
/* 不浮动 */
float: none;

• 清除元素浮动，避免浮动对元素的影响

1. 触发BFC
2./* after方式 */
  .box:after {
    content: '';
    display: block;
    clear: both;
  }
3. /* 对父元素应用，需要在外部多创建一个盒子，现如今不常用 */
  clear: left;
  clear: right;
  clear: both;

• 元素定位

/* 默认方式，没有定位 */
position: static;
/* 相对于视口固定定位 */
position: fixed;
/* 相对于自身定位，不脱离文档流，移动了之后还会在原位置占位 */
position: relative;
/* 相对于第一个有 relative 的父元素定位，脱离文档流，移动了之后不会在原位置占位，其它元素会挤上去 */
position: absolute;

• BFC 规范 (块级格式化上下文-Block Formatting Context)

页面上隔离的独立容器，容器中的子元素不会影响外面的其它元素，例如常见的高度塌陷

/* 触发BFC的条件 */
overflow 非 visible
float 非 none
position 为 absolute、fixed
display 为 inline-block、table-cell

• 透明效果

/* 取值0~1，0表示完全透明，1表示不透明，有继承性，包含的内容会变透明 */
opacity: 0.5;
/* R表示红色，G表示绿色，B表示蓝色，A取值0~1 或 0~100%，无继承性 */
background: rgba(0,0,0,0.5);

• CSS sprite(雪碧图、精灵图)

/* 将多个小图标合并成为一张大图片 */
本质让那张大图移动位置，底层要适应出单个图标相应大小
优点:减少http请求，缺点:换图标时要全部改这个大图

• CSS reset 重置样式引用库

reset.css [https://meyerweb.com/eric/tools/css/reset/]
normalize.css  [https://necolas.github.io/normalize.css/]