把上学期总结的知识移过来,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>类型相关定义。