把上学期总结的知识移过来，web可以说是自学的了，差不多就开学前不忙的一个半月总结的。后来大部分的都在笔记本上，因为不想背电脑…虽然web以后大概率是不接触了，还是把它们放在这里，总不能让它们当留守儿童叭…
前端：网页上为用户呈现的部分
后端：与数据库进行交互，完成数据存取
主页：即进入网站看到的第一个网页，主页的文件名通常是index
网页元素：
站标（Logo）：网页的标识们通常放在左上角
导航栏：超链接集合
广告横幅（banner）
表单：用来采集或传递客户的信息
总之，网站就是文件夹，网页就是里面的文件
浏览器：解析网页源代码，渲染网页
前端技术构成:
结构(HTML) : 从语义的角度,决定页面结构
样 式 (CSS) : 从审美的角度,决定网页样式
行为(JavaScript) : 从交互的角度,提升用户体验,决定网页行为
前端的标准 : 由W3C这个组织规定
Vcode快速生成方法 :
h1+p==> <h1></h1> 和<p></p> p*3 ==> <p></p><p></p><p></p>快速打开文件 !+tap键 ctrl+A 文本全选
结果如图
ctrl+[ 向左缩进 ctrl+]
向右缩进 ctrl+/
注释 div>a+p —>快速扩展 也可以添加（）进行分组
div#xxxx或div.xxx 回车 ——> 生成 < div id=“xxx”></ div > < div>或 class=“xxx”></ div>
第一章 HTML概述
1.1网页制作概述
HTML（超文本标记语言），通过嵌入代码或标记来表明文本格式的国际标准。用它编写的文件扩展名是.html，网页文件内容通常为静态。
语法格式： <标记名>数据 </标记名>
标 签: 比如< titile> 标签内部可以附带多个属性,属性无先后顺序
ps: < img /> 它的结束部分就是由一个斜杠来进行结束
< i mg src="" alt=""> alt是图片显示不出来时,替换的文本
元 素： <开始标记>内容 </结束标记>HTML文档可以分为两个部分：文件头（提供文档标题）、文件体（Web页的实质内容）
URL是统一资源定位符或Web地址，可用来标识web上的任何资源，典型的URL是由一个协议、一个网站名和资源的一个绝对地址组成。
FTP：文件传输协议
HTML5的声明方式：
代码内部注释：< !–…--> 不能用在style内 也可以用/*… * /进行注释
html基本格式
/*符合HTML5标准*/ /*lang属性:搜索引擎 en英文 zh中文*/ /*元数据 charset属性 字符集编码方式 字符集:字符的集合丶英文字符集,汉字字符集*/
<!DOCTYPE html> /*符合HTML5标准*/
<html lang="en"> /*lang属性:搜索引擎 en英文 zh中文*/
<head>
<meta charset="utf-8"> /*<meta>元数据 charset属性 字符集编码方式 字符集:字符的集合丶英文字符集,汉字字符集*/
<title>...<title>
</head> /*头部:浏览器\搜索引擎所需信息*/
<body>
...
</body>
</html>
PS:// HTML5的新增结构标签 书本P3（章节、页眉页脚、导航链接等）此阶段不常用
1.2 HTML4常用元素与属性
标题类元素：
h1一级标题
h2二级标题
h3三级标题
h4四级标题
h5五级标题
h6六级标题
正文文字 注意:浏览器将多个连续空格和空行最终都看作一个空格,若要加一行用< br />,若要添加多个空格 则用& nbsp;
基本的HTML标签元素div 通用块元素，可以定义文档中分区或节，可以把文档分割为独立的、不同的部分，主要用于布局
< p> 定义段落
< pre> </ pre> 保留原始排版方式
< hr /> 水平线标记元素
< br /> 产生换行功能
b 加粗
i 定义斜体文本
del 定义被删除文本
< span> </ span> 组合行内元素,把内容放在span内部
插入图片元素< img>网页中常见的图像格式 :
JPG :有损压缩,支持色彩丰富的图片
GIF :简单动画,背景透明PNG :无损压缩丶透明丶交错丶动画
img元素单独存在< img src=“路径+文件名” alt="" />
问题：区分相对地址和绝对地址 详细可见https://blog.csdn.net/StackFlow/article/details/78882860
绝对路径：
绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，(URL和物理路径)例如：C:\xyz\test.txt 代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个URL绝对路径。
相对路径：
相对与某个基准目录的路径。包含Web的相对路径（HTML中的相对目录），在项目中，"/“代表Web站点的根目录，”./"代表当前目录, "…/"代表上级目录例如：C：\test\AC\下面有a.html和c.html, C：\test\B\下面有b.html，则在a.htm中访问b.html 绝对路径为C：\test\B\b.html，相对路径为…/B/b.html;访问c.html绝对路径为C：\test\AC\c.html，相对路径为./c.html或者c.html。
src 图像源文件
alt如果图片无法显示，浏览器将显示替代文件
width宽度
height高度
border表框
超链接< a>元素
可以定义当前页面的跳转位置，一般网页中都用文字或图片作为超链接。
一个超链接由3部分组成:
1、超链接标记符号< a>< /a>；
2、属性href及其值，定义了超链接所指的地方，属性targrt制定超链接在什么样的窗口打开；
3、在超链接中显示在网页上作为连接的文字。 eg.< a id="" href=“URL” target="">文字或者图片</ a> 需要注意：id是唯一的
属性具体描述id超链接的唯一标识name给超链接命名href链接目标的urltarget指定连接的目标窗口，取值有_self _blank _top等title给链接提示文字rel规定当前文档与目标文档之间的关系
1.内容跳转：
< a name=“标签”>书签内容 </ a>
< a href="#"标签>单击此处将使浏览器跳到标签</ a>
2.电子邮件链接mailto
< a href=“mailto:电子邮件地址”>显示链接的对象</ a>
超链接跳转的三种情况:
- 链接到本站点其他网页
- 链接到其他站点
- 虚拟超链接
例题 :
网址应为https://www.sina.com.cn
常用列表元素
ul 定义一个无序列表
ol 定义一个有序列表
dl自定义列表
li列表标记项目
< dt>标题 、< dd>每一项自定义列表的子标记
1 、有序列表类型取值：
1 数字1、2、3…
a 小写字母a,b,c…
A 大写字母A、B、C…
i 小写罗马字母i、ii、iii、IV
I 大写罗马字母I、II、III、IV
2 、无序列表的type取值：
disc 圆黑点
circle 空心圆
square 黑方块
3 、自定义列表 自定义列表
< dl>表示列表定义开始
< dt>表示定义列表的标题
< dd>表示列表中每一项的定义
< dt>与< dd>是上下级关系。
常用表格元素 表格由</t able>标签对定义的，表格内容由< tr></ tr>和< td></ td>标签对定义的。其中< tr>< /tr>定义表格中的一行，< td>< /td>通常出现在< tr>< /tr>之间，用于定义一个单元格
table 定义表格
caption 定义表格标题
th 定义表格表头
tr 定义表格的行
td 定义表格单元
P16 table的常用属性
第二章 CSS样式表
css注释： /* */
2.1 CSS基础（解决网页排版）
CSS（Cascading Style Sheets）层叠样式表，简称样式表，是用于控制网页样式并允许将样式与网页内容分离的一种标记语言。
CSS提供了3种在HTML页面中插入样式表的常用方法：
三者的优先级：
外部样式 < 内部样式 < 内嵌样式链入外部样式
把样式表保存为一个样式表文件，然后在页面中用< link>标签连接这个样式表文件，< link>标签必须放到页面的< head>区内。
< head>
...
< link rel="stylesheet" type="text/css" href="mystyle.css">
...
</head>
文件后缀名为css
此代码表示浏览器从 mystyle.css文件中以文档格式读出定义的样式表。
rel="stylesheet" 是指在页面中使用这个外部的样式表；
type="text/css" 是指文件的类型是样式表文本；
href="mystyle.css" 是文件所在的位置，一般用相对路径来引入外部CSS文件` 一
一个外部样式表文件可以应用于多个页面，当改变这个样式表文件时，所有引用该样式表的HTML页面都将受到影响。在制作大量相同样式网页的网站时，使用此方法减少重复工作量，利于以后的修改、编辑，浏览这些网页时减少重复代码的下载。
内部样式
把样式表放到页面的< head>区里，这些定义的样式就应用到页面中。样式表是用< style>标记插入的。
<head>
...
<style type="text/css">
样式内容
</style>
...
</head>
内嵌样式
混合在HTML标记里使用的，用这种方法可以简单的对某个元素单独定义样式。直接在HTML标记里加入style参数，参数的内容就是CSS的属性和值。
< p style="color:red;margin-left:20px">这是一个段落</ p>
//段落颜色为红色，左边距为20像素。
注意：style元素可应用于任意body内的元素（包括body），但除了BASEFONT、PARAM、SCRIPT
2.2 CSS选择器
样式表定义主要由两个主要部分构成：选择器，以及一条或多条声明。
选择器（selector），时CSS中很重要的概念。所有HTML语言中的标记央视都是通过选择器来进行控制的。选择器通常是改变样式的HTML元素。
每一条声明由一个属性和一个值组成。
属性是希望设置的样式属性。每个属性都有一个值，属性和值之间用冒号分开。如果定义多个声明，每个声明用分号隔开。
根据所获取页面中元素的不同，把CSS3选择器分成5类，基本选择器、层次选择器、伪类选择器、伪元素和属性选择器。伪类选择器又分为6种，动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器和否定选择器。
基本选择器
优先级：元素选择器<类选择器<ID选择器
1、类选择器()
.class{
}
class="hhh"
选择class="hhh"的所有节点
2、ID选择器
#id{
}
id="zkw"
选择id="zkw"的所有节点
区别ID选择器和类别选择器：ID选择器具有唯一性
3、通配选择器 //选择页面中所有HTML元素
*{
}
4、元素选择器
h1，h2{
}
5、群组选择器 //同时对几个选择器进行相同的操作，用 , 隔开 h1,div,p{ }
注意：1、id属性只能在文档中出现一次； 2、id选择器不能结合使用，因为id属性不允许有以空格分隔的词汇表。eg：< p id=“one two”>
层次选择器（画树状图理解）
后代选择器>通用兄弟选择器>子选择器<相邻兄弟选择器
1、后代选择器 （E F） //选择E元素的所有后代F元素
div div{
}
2、 子选择器（E>F） //选择E元素下所有的子元素F ...
3、相邻兄弟选择器（E+F） //选择紧邻在E元素后的F元素 ...
4、通用兄弟选择器（E~F） //选择E元素后边的所有兄弟元素
动态伪类选择器
例子
E：pseudo-class {property : value }
E为HTML中的元素； pseudo-class是CSS的伪类选择器名称；property是CSS属性；value是CSS属性值
动态伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。
遵循”爱恨原则“ ”LoVe/HAte“，即Link-visited-hover-active
E:link 链接伪类选择器 //选择匹配的E元素，而且匹配元素被定义了超链接并未被访问。常用于链接锚点
E:visited 链接伪类选择器 //选择匹配的E元素，而且匹配元素被定义了超链接已经被访问。常用于链接锚点
E:active 用户行为伪类选择器 //选择匹配的E元素，而且匹配元素被激活。常用于链接锚点
E:hover 用户行为伪类选择器 //选择匹配的E元素，且用户鼠标停留在E元素上
E:focus 用户行为伪类选择器 //选择匹配的E元素，且匹配元素获得焦点
注意：
a：hover必须被置于a：link和a：visited之后，才是有效的
a：active必须被置于a：hover之后才是有效的
属性选择器
2.5 文本
单位
px： 像素
em：
1em 等于当前的字体尺寸
2em 等于当前字体尺寸的两倍
自动适应用户所用的字体
%百分比： 相对于父代的比例
颜色
- 直接指定
- 采用rgb函数 rab（200，100，0） 或 255百分比：rgb（80%，40%，0%）
- 采用16进制
#cc6600 [0，1，2，3，4，5，6，7，8，9，A，B，C，D，E，F]
对齐方式
center 居中
right 、left
justify 两端对齐
overflow属性（内容溢出盒子框时，overflow属性取值）
hidden 超出部分不可见
scroll 显示滚动条
auto 若有超出部分，显示滚动条
- margin: 0 auto;
元素水平居中布局无效
失效原因：
- 要给居中的元素一个宽度，否则无效。
- 该元素一定不能浮动或绝对定位，否则无效。
- 在HTML中使用< center> < /center>标签，需考虑好整体构架，否者全部元素都会居中的。
- 有时需要给父级元素添加text-align: center;
- 有时可能涉及到 <!DOCTYPE>类型相关定义。
