一、Web前端技术概论

1 HTML

1.1 HTML概述

HTML(Hypertext Marked Language)，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作万维网（WWW）的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。

1.2 超文本概述

所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。
通过HTML可以表现出丰富多彩的设计风格、实现页面之间的跳转、展现多媒体的效果。
HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存HTML文档的应用程序。

1.3 HTML文档格式

<!DOCTYPE html>：表明文档的类型，在head标签之前
html：文档使用html标签开始和结束
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。如<base>, <link>, <meta>, <script>, <style>, 以及 <title>标签。
body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

1.4 HTML5

表单项（HTML5新增表单）	说明
<input type="color">	颜色选择器
<input type="date">	日期选择器
<input type="datetime">	日期时间选择器
<input type="month">	月份选择器

样例

2 CSS

CSS的英文全称是Cascading Style Sheet，中文翻译为层叠样式表，简称样式表。它是一种用来定义网页外观格式的技术，在网页中引入CSS，可以方便有效地对页面进行样式设计，更加精确的控制网页的字体、颜色、背景等网页元素的效果，更重要的是DIV+CSS技术已经是目前主流的网页布局技术。
CSS3是CSS技术的一个升级版本，CSS3语言将CSS划分为更小的模块，在CSS3中有字体、颜色、布局、背景、定位、边框、多列、动画、用户界面等等多个模块。

2.1 CSS基本语法

CSS的基本语法有三部分：

样式选择器
属性
属性值

body{
    background-color: #D2D0D3;
    margin:0;
    padding:0;
}

.container{
    background-color: #FFFDCE;
    width: 90%;
    height: 100%;
    margin: 10px;
}

2.2 样式选择器类型

2.2.1 标签选择器

标签选择器可以同时控制所有此类标签的风格，达到了站点风格高效统一的目的。例如，需要将所有段落文字的字号改为14像素，只需要在CSS文件中定义代码：

p{font-size:14px;}

如果在网页中引用上述样式表，则页面中所有段落文字都将受到这种样式的控制，字号都显示为14像素。

2.2.2 类选择器

类选择器的基本语法如下：标签名.类名{属性1:属性值1;属性2:属性2;…}
类名由设计者定义，标签名在使用过程中可以改为*表示全部，也可以省略。
- 例如：
```
p.s1{color:green;}
```
- 表示样式s1仅适用于段落元素，其使用方法如下：
```
<p class="s1">段落文字</p>
```
此引用表示该段落的文字表现为绿色，而未引用样式s1的段落不会受影响。
- 例如：
```
.s2{color:red;} 
```
- 表示样式s2适用于任何元素，其使用方法如下：
```
<p class="s2">段落文字</p> <h1 class="s2">一级标题</h1>
```
示例中引用了样式s2的段落文字和一级标题文字都表现为红色。

2.2.3 ID选择器

ID选择器和类选择器非常相似，不同的是定义时不使用“.”而使用“#”，引用时不使用“class”属性而使用“id”属性。一般情况页面元素的id是唯一的，因此id选择器一般只针对某个特定的元素作用一次，不推荐重复使用。ID选择器的基本语法如下：

标签名#id名{属性1:属性值1;属性2:属性2;…}

id名由设计者定义，标签名在使用过程中可以改为*表示全部，也可以省略。
```
#s3{color:red;font-size:24px;} 
```
- 表示样式s3适用于任何元素，其使用方法如下：
```
<h2 id="s3">二级标题</h2>
```
  示例中引用了样式s3的二级标题表现为24像素大小的红色字体。

2.3 在HTML文档中使用CSS的方法

在HTML文档中使用CSS的方法

行内样式 style=“border:1px”
内嵌样式
链接外部样式
导入外部样式

2.3.1 行内样式

行内样式是直接在HTML元素中加入了style属性，然后把CSS代码直接写入其中即可。该方法的优点是使用方法简单，缺点是不能真正实现内容和样式的分离，使用效率低下。其基本语法如下。

<标签 style="样式属性:样式属性值;样式属性:样式属性值;……">

<body style="background-color:#909090;">

2.3.2 内嵌样式

内嵌样式是一种比较常用的样式，将CSS样式直接定义在网页的<head>部分，其基本语法如下：

<style type="text/css">
    <!--
     选择器1｛样式属性:样式属性值;…｝
     选择器2｛样式属性:样式属性值;…｝
     ……
     选择器n｛样式属性:样式属性值;…｝
    -->
</style>

这里<style>标签表示声明样式表内容，type用来指定元素中的文本属性。 “”是注释标签，作用是当某个浏览器不支持CSS时可以将其视为注释，不过目前主流浏览器都对CSS有很好的支持，因此，注释标签也可省略。

<!DOCTYPE html> 
<html> 
<head> 
<title>内嵌样式例子</title> 
<style type="text/css"> 
body{ 
background-color:#fef273;   
/*设置背景色*/ 
font-size:18px; 
}
</style> 
</head> 
<body> 
<h1 style="background-color:#48480c;color:white;font-size:28px;text-align:center;">青玉案 元夕</h1> 
<p>东风夜放花千树，更吹落，星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。
<br/>
蛾儿雪柳黄金缕，笑语盈盈暗香去。众里寻她千百度，蓦然回首，那人却在灯火阑珊处。
</p> 
</body>
</html>

2.3.3 链接外部样式

.s1{
        background-color:#705968;    /*设置背景色*/
        color:#FFFFFF;           /*设置前景色*/
        text-align:center;       /*居中*/
}

<!DOCTYPE html>
<html>
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
<title>链接外部样式表示例</title>
</head>
<body>
<h1 class="s1">链接外部CSS</h1>
</body>
</html>

2.3.4 导入外部样式

导入外部样式表与链接外部样式的功能基本相同，都是使用外部样式表文件，只是在语法和运行方式上稍有区别。
基本语法： @import url("样式表路径");
在以下示例中，我们将例2-14中的CSS文件css.css导入到2-15.html文件中。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(css.css);
</style>
<title>导入样式示例</title>
</head>
<body>
<h1 class="s1">导入外部CSS</h1>
</body>
</html>

2.4 link和import的区别

差别1：老祖宗的差别，link属于XHTML标签，而@import完全是css提供的一种方式。
link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。
差别2：加载顺序的差别：当一个页面被夹在的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。
差别4：使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。
差别5（不推荐）：@import可以在css中再次引入其他样式表，比如创建一个主样式表，在主样式表中再引入其他的样式表

2.5 常用CSS属性

简单介绍几个常用的CSS属性，如字体、颜色、背景、边框等效果。

CSS字体和段落
CSS颜色和背景
CSS盒子属性

2.5.1 CSS字体和段落

基本语法	说明
font-family :字体1, 字体2, …… ;	设置字体，可同时设定一个或者多个。
font-size: 绝对尺寸 \| 相对尺寸 \| 长度 \| 百分比 ;	设置字体大小，最常用的是用长度值指定文字大小，长度单位有px（像素）、pt（点）和em（字体高）等。
font-weight: normal \| bold \| bolder \| lighter \| 数值;	设置字体粗细，normal、bold、bolder和lighter分别代表正常、粗体、加粗和细体，数值是100-900的整百数字。
line-height: normal \| 长度值 \| 百分比 \| 数值 ;	设置行高，比如字体大小为12px时，值“18px”、“150%”和“1.5”都表示1.5倍行高。
text-indent: 长度值 \| 百分比;	设置文本缩进，如text-indent:2em表示缩进2个字体高。
text-align: left \| right \| center \| justify;	水平对齐方式，常用的有左、中、右和两端对齐
text-decoration:值; 或 text-decoration-line:值;	文本修饰线，常用值有none（没有修饰线）、underline（下划线）、overline（上划线）和line-through（删除线）。

<!DOCTYPE html>
<html>
<head>
<title>换行标签和段落标签</title>
<style type="text/css">
.headline{
        font-size:28px;        /*字体大小*/
        text-align:center;     /*居中对齐*/
        font-weight:900;       /*字体加粗*/
        font-family:黑体,隶书;  /*设置字体*/
}
.text{
        font-size:16px;
        line-height:1.5;
        text-indent:2em;
}
</style>
</head>
<body>
<p class="headline">老木匠的房子</p>
<hr />
<p class="text">有个老木匠准备退休，回家与妻子儿女享受天伦之乐。<br/>老板舍不得他的好工人走，……。<br/>“这是你的房子，”他说，“我送给你的礼物。”</p>
<p class="text">他震惊得目瞪口呆，……</p>
</body>
</html>

2.5.2 CSS颜色与背景

基本语法	说明
color:颜色值;	设置前景色，常用的颜色表示方式有： l颜色英文名称，如green表示绿色。 l十六进制记法，形式为#RRGGBB或者#RGB，如#00FF00表示绿色、如果每两位颜色值相同，可以简写为#RGB形式，如#0F0也表示绿色。 lRGB函数，形式为RGB(R,G,B)，R、G、B可以为0-255的正整数或0%-100%的百分数。例如RGB(0,255,0)和RGB(0%,100%,0%)都表示绿色。
background-color: 颜色值; background-image: url(图像路径);	设置背景色。设置背景图像。
background-repeat: repeat \| no-repeat \| repeat-x \| repeat-y;	设置背景图像的重复方式，值分别表示重复、不重复、在水平方向重复和在垂直方向重复。
background-attachment : scroll \| fixed;	设置背景图像是否随背景滚动，scroll为默认值，fixed表示背景图像固定，背景图像不会跟随内容滚动。
background-position : 关键字 \| 百分比 \| 长度;	背景图像位置，值常用关键字表示，关键字在水平方向上有left、center和right，垂直方向主要有top、center和bottom，水平方向和垂直方向可以相互搭配使用。

<!DOCTYPE html>
<html>
<head>
<title>换行标签和段落标签</title>
<style type="text/css">
body{
    color:#434305;    
    background:#dfd9b3 url(images/house.png) no-repeat right bottom fixed;
}
.headline{
        font-size:28px;        /*字体大小*/
        text-align:center;     /*居中对齐*/
        font-weight:900;       /*字体加粗*/
        font-family:黑体,隶书;  /*设置字体*/
}
.text{
        font-size:16px;
        line-height:1.5;
        text-indent:2em;
}
</style>
</head>
<body>
<p class="headline">老木匠的房子</p>
<hr />
<p class="text">有个老木匠准备退休，回家与妻子儿女享受天伦之乐。<br/>老板舍不得他的好工人走，……。<br/>“这是你的房子，”他说，“我送给你的礼物。”</p>
<p class="text">他震惊得目瞪口呆，……</p>
</body>
</html>

posted @ 2020-12-22 16:18 锖兔真菰阅读(148) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部