Web系统设计【二】

发表于 更新于 分类于   |   字数统计: 4.8k(字)   |   阅读时长≈ 19(分)

一、前端技术三大基础

HTML：决定网页的结构

CSS：决定网页的样式

JavaScript：增加与用户的交互

二、HTML

1、HTML结构

(1)doctype 声明

它告诉浏览器以下文件用html哪个版本解析

例如：<!DOCTYPE html>代表HTML5版本声明

(2)元素

一对标签和中间的内容称为一个元素

(3)head元素

它元素包含描述文档本身的 metadata 信息，以及相关的资源，比如 JS 脚本和 CSS样式。

除了title元素之外,head 还可以包含:

  • base 定义了页面上的链接或资源的 baseURL, 打开链接内容所对应的基地址。
  • link 指向某种类型的资源, 通常是CSS样式表, 提供了如何展示网页上各种元素的说明。
  • meta 提供了额外的信息; 例如, 字符编码, 页面的内容摘要, 指示搜索引擎是否应该索引内容, 等等。
  • object 代表一个通用的、多功能的媒体对象容器
  • script 用于嵌入脚本, 或者引入外部脚本.
  • style 用于嵌入样式(页面内).

这些元素都是可选的, 可以是任意顺序。注意, 这里的元素不会展示在页面内, 但他们可以影响页面上展示的内容, 这些内容都在 body 元素内定义。

(4)body 元素

就是网页的主题显示内容

2、标签

html 标签对应的英文

(1)标题、段落、段内换行、段内分组、预留格式、水平线

  • 标题(headline)：<h1~h6></h1~h6>

    • h1~h6具有默认的标题大小，但是我们也可以通过CSS样式进行改变

  • 段落(paragraph)：<p></p>

    • 段落的文字自动分行会随着浏览器改变大小而改变
    • 段落后自带一个空行
    • 段落中多个空格和换行都会被省略为一个空格

  • 段内换行(break):<br/>

  • 预留格式(preformatted)：<pre></pre>

    • 预留格式内容显示会原封不动显示出来，不会省略换行和空格

  • 段内组合(span)<span><span/>

    • 组合内的内容可通过CSS进行设计

  • 水平线(rorizontal rule):<hr></hr>

(2)超链接、图片

  • 超链接(anchor)：<a></a>

    • 重要属性hrefHypertext Reference
      • 连接到本站其它网页<a href="网页文件"></a>
      • 连接到其它站点<a href="http:XXX"></a>
      • 虚拟超链接<a href="#"></a>常用于尚未准备好链接到哪儿，等待后需添加
      • 内部可嵌套图片标记，代表图片作为超链接
      • 使用id属性和#id设置文章的跳转锚点

  • target属性，选择新建窗口跳转，还是本页面跳转等

  • 图片(image):<img src="" alt=""/>

    • src表示图片路径，alt表示图片未加载显示的文字
    • 绝对路径插入图片，就是从盘符开始的图片文件地址
    • 相对路径插入图片：从网页所在目录为默认地址..表示向前一个文件夹以此查找文件,若开始即为/则从网站根目录开始

    • 当然也可以通过URI来定位图片

    • 在CSS中设置img样式，使用img标签，需要特指就配合后代选择器等其他选择器使用例如:

      注意是img 不是image！！

跳转书写：

../代表该文件所在目录的上一级文件夹，可多次使用

以/开始，代表根目录文件夹开始

以文件名开始，代表本目录下文件或者文件夹

(3)区域、列表、表格

  • 区域(division):<div></div>

  • 列表

    • 无序列表(Unordered List):<ul></ul>+<li></li>
    • 有序列表(Ordered List):<ol></ol>+<li></li>
    • 可在列表中使用的表格标签：dl dt dd
    • list-style-type：选择标记符号的类型none|disc|circle|square|decimal|decimal-leading-zero|lower-alpha|upper-alpha|lower-latin|upper-latin|lower-roman|upper-roman|lower-greek
    • list-style-position：inside | outside属性允许将圆点拉回内容区域
    • list-style-image：<url> | none属性将自己的图像作为圆点

  • 自定义列表(Definition List)、自定义条目(Definition Term):<dl></dl>+<dt><dt>

  • 表格(table):<table></table>

    • 表格标题(table headline):<th></th>

    • 表格行(table row):<tr></tr>

    • 表格数据(table data):<td></td>

    • 单元格中内容的外观和对齐方式，使用格式化文本和背景等属性

    • 处理表格和单元格本身样式，使用padding、margin和border等属性

    • cellpadding 属性:表格单元边界与单元内容之间的间距, 设置为0则无边距

    • empty-cells：show | hide 设置空单元格，决定没有可见内容的单元格的边框和背景是否隐藏掉。

    • border-collapse：定表格的边框是分开的还是合并的

      • 合并（collapsed ）
      • 分隔（separated）：当相邻单元格边框样式不同时
        • 如果任意一个单元格的border-style属性被设置为hidden值，那么边框将不会显示
        • 边框的宽度：宽边优于窄边
        • 如果所有其他属性值都相等，就要归结为样式的问题了，边框样式按优先级从大到小排列：double, solid, dashed, dotted, ridge, outset, groove和inset

    • border-spacing：指定相邻单元格边框之间的距离，只适用于border-collapse是separate时

      • 有两个长度值，其中水平值在前，并应用于列间，垂直值在后，并应用于行间；如果只提供一个值，那么该值用于水平和垂直两个方向

(4)表单和表单元素

表单是一个区域，采集用户信息。他可以包括文本框、按钮、单选、复选、下拉框、文本域等表单元素。通过input、select、textarea三大表单元素构成

表单中有一个重要的属性action，它将收集的数据交由哪个页面处理，当然这是后端的页面。

  • 表单(form):<form></form>

    • <input/>元素通过设置该元素的type属性，可以将表单表示为文本框、密码框、单选框等等该元素中含有一个name属性，在传送到后端处理的时候，可通过name区分到底是哪个表单元素传过来的内容

      • 文本框text：<input type="text" name="A"/>
        • placeholder属性设置未输入时文本
      • 密码框password<input type="password" name="B"/>
      • 提交按钮submit<input type="submit" name="C" value="提交"/> 这里value=”提交”将会设置按钮的文字，同理重置按钮也一样,这里也需要注意，提交按钮是指提交所有该表单内的数据给后端;提交方式get和post，数据多时一般使用post，get方式数据会显示在URL中，post不会，它是封装的
      • 重置按钮reset<input type="reset" name="D" value="重置"/>
      • 单选框radio<input type="radio" name="E" value="1"/> 而这里value=””的内容是提交到后端的数据,同理，复选框也是这样

    • 复选框checkbox<input type="checkbox" name="F" value="2"/>

      注意：单选框中，若要将几个单选框设置为一组，只能选一个，则要把name属性设置为相同

      对于需要设置默认选择的选择项可以添加checked="checked"属性

  • 下拉列表框<select></select>+<option></option>实现

    • option的selected选项可设置为select="selected"表示默认被选中项
      • 表单的传输中若不设置value则默认传输中间的内容，否则按照value的值传输

    • 文本域<textarea rols="行数" cols="列数">默认文本</textarea>，中间的文字会被作为默认显示处理

  • 按钮<button>按钮名称</button>

    • 设置按钮，可以使用点击即可传递值的功能
    • 还可以通过 onclick属性等实现点击互动

三、CSS样式

CSS（Cascading Style Sheets，层叠样式单）是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准,最新版为CSS3（IE9以上支持)

我们可以用CSS来控制网页显示的格式。字体大小、位置、颜色、文字对齐方式、图片长宽、鼠标的形状等网页显示的格式，它们也是网页的重要内容。

1、 CSS的语法

  • 选择器
  • 属性
  • 值

2、CSS的添加方法

（1）行内添加

就是使用style属性,将css直接写在html标签中例如：

1
<p style="color:red">这行段落将显示为红色。</p>

(2)嵌入式样式

使用<style></style>标签嵌入到html文件的头部

注意：内嵌样式只作用于本页面

1
2
3
4
5
6
7
<head>
　　<style type="text/css">
　　.class{
　　　　color:red;
　　}　
　　</style>
</head>

(3)外部式表

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

  • rel：relationship定义链接的文件和HTML文档之间的关系。

  • type:规定被链接文档的 MIME 类型,该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。

    • 媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、文件或字节流的性质和格式。

    • 分号前面表示文件的大类，后面属于这个大类的何种类型。text/css表示文本文件，以css方式读取处理.

    • 浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理URL，因此Web服务器在响应头中添加正确的MIME类型非常重要。如果配置不正确，浏览器可能会曲解文件内容，网站将无法正常工作，并且下载的文件也会被错误处理。

    • 详细MIME类型

  • 一般情况下rel=”stylesheet” type=”text/css” 是固定写法不可修改

②使用import在style标签中导入css文件。
1
2
3
4
5
<style type="text/css">
	@import url(demo.css);
	或者
	@import "demo.css";
</style>

多重样式可以重叠，可以覆盖，原则是“就近原则”

  • 可以在.css文档中通过@import引用其他的.css文档
  • 可导入多个样式表，后面的规则优先于前面的，也就是覆盖，或者说就近

3、基本CSS选择器

(1)标签选择器

它会作用在所有的该标签上

1
2
3
p{ 
    background-color:yellow;
}

(2)【常用】类选择器

类选择器是指定类的所有元素的样式

定义为.+名称+{属性：值}

使用时，在标签中加入class="选中类"

(3)ID选择器

id选择器指定具有ID的元素的样式。和类选择器的区别就是ID选择器只能使用一次

定义为#+名称+{属性：值}

使用时，在标签中加入id="选中id"

4、复杂选择器

(1)后代选择器(层次选择器)

语法：标签+空格+标签+主题属性和值，可嵌套多重，只有满足这种嵌套关系的标签元素才会使用该样式

1
2
3
4
5
6
7
8
<style type="text/css">
	p span{ 
	 	color:red;
	}
</style>

<p><span>天使投资</span>是投资方式的一种</p>
<div><span>天使投资</span>是投资方式的一种</div>

(2)子选择器

语法：标签+>+标签+主题属性和值 与后代选择器相比，子选择器只能选择作为某元素直接子元素的元素缩小了范围

例如：

1
2
3
4
5
	<style type="text/css">
		h1 > strong { color : red ; } 
	</style>
<h1>This is <strong>very</strong> <strong>very</strong>  important. <h1> 
 <h1>This is <em> really <strong> very </strong> </em> important.</h1>

只有第一行会有效。

(3)相邻兄弟选择器

语法：标签+++标签+主题属性和值 选择紧接在另一元素后的元素，且二者有相同父元素,用一个+只能选择两个相邻兄弟中的第二个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
		li + li { font-weight : bold ; }
	</style>
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>

根据特性，列表的第一行不会实现样式

(4)交集选择器

交集选择器是由两个选择器直接连接构成，其中第1个必须是标记选择器，第2个必须是类别选择器或者ID选择器，两个选择器要连续书写，中间不加空格结果是二者各自元素范围的交集。如：标签1标签2标签3{属性：值；} 最终找到同时满足标签1，标签2，标签3的标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css"> 
 *{margin:0;}
 div{ border-style:solid;
           border-width:8px;
           border-color:blue;
           margin:20px; }  
  div.al{border-color:green;
         background:#ccc;
  }
.al{  border-style:dashed; }
    
     <div>普通效果</div>
 <div class="al">交集选择器效果</div>
 <p class="al">类选择器效果</p>

(5)并集选择器

语法：标签+逗号+标签+主题属性和值可设置多个，这两种或者多种标签，都使用后面的相同样式

1
2
3
4
5
6
7
8
9
<style type="text/css">
	h1,p {
		text-align:center;
	}
	</style>
<body>
	<h1>欢迎访问论坛</h1> 
	<p>欢迎访问论坛</p> 
</body>

(6)属性选择器

属性选择器可以根据元素的属性及属性值来选择元素 ,属性选择器把所需属性列在方括号([ ])中

例如：

1
2
3
4
a[title] {color: red;} /*包含标题的所有元素变为红色 */   
a[href] {color: red;} /*只对有href属性的a元素应用样式*/ 
a[href][title] {color: red;} /*将同时有href和title属性的a设置为红色*/                       a[href=“http://www.w3school.com.cn/about_us.asp”] {color: red;}/*根据具体属性值来选择该元素*/                
a[href=“http://www.w3school.com.cn/”][title=“W3School”] {color: red;}  /*多个属性-值选择器链接在一起选择该元素*/

(7)伪类选择器

在CSS中，可以给每一种状态的链接应用样式，只需通过使用叫做伪类选择器的选择器进行设置。

伪类用冒号:表示

例如：对超链接的各种状态进行设置。

(8)伪元素选择器

伪类不是唯一的伪选择器，为了满足排版的需要，可以将虚拟元素插入到文档中.伪元素也用冒号: 表示

1、首行伪元素:first-line该选择器在特定元素的首行应用样式规则，能应用的属性只有：color font background word-spacing letter-spacing text-decoration vertical-align text-transform line-height

1
2
3
4
5
6
7
8
9
p:first-line 
{
color: #ff0000;
font-variant: small-caps
}

<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>

2、首字母伪元素:first-letter该选择器在特定元素的首字母应用样式规则，能应用的属性只有：color font text-decoration text-transform vertical-align background margin padding border float word-spacing letter-spacing

1
2
3
4
5
6
7
8
p:first-letter 
{
color: #ff0000;
font-size:xx-large
}
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>

3、before伪元素:before用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。

1
2
3
4
5
6
7
8
<style type="text/css">
h1:before {content:url(images/heart.png)}
</style>

<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。

4、after伪元素:afterafter伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。

(9)其他

  • ~：p~ul选择前面有<p>元素的每个<ul>元素，即选择p之后出现的所有ul，两种元素必须拥有相同的父元素，但ul不必紧随p。

  • :nth-child() 选择器，选择规定属于其父元素的第n个子元素

    • Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词。

      p:nth-child(odd)、p:nth-child(even)

    • p:nth-child(an+b)：a表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

      • p:nth-child(3n+0)指定了下标是 3 的倍数的所有 p 元素

  • :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

    n 可以是数字、关键词或公式。

5、选择器的多种声明用法

(1)全局声明

语法：*+主题属性和值,对本网页中所有标签都使用该样式

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
	* {
		text-align:center;
	}
	</style>

body>
	<h1>欢迎访问论坛</h1> 
	<p>欢迎访问论坛</p> 
	<h2>欢迎访问论坛</h2> 
</body>

(2)混合使用

6、继承和优先级

(1)继承

  • 当使用 p 元素作为选择器编写一个字体相关的样式规则时，规则将应用于文档中所有的段落和这些段落包含的内联文本
  • 与字体相关的属性不能应用于图像
  • 有些样式表属性能继承，有些不行，比如边框
  • 应用于具体元素的任何属性将覆盖该属性的继承值

(2)优先级

根据样式表的使用判断优先级:

就近原则:内联样式表（由开标签中的 style 属性添加）》文档样式表（由style元素添加）》导入的样式表（使用 @import 功能添加）》链接的外部样式表（用 link 元素添加）

同一个样式表中的两个规则冲突时，可根据选择器的类型决定优先级

越特殊的样式，优先级越高：内联样式 > ID选择器 > 类选择器 > 后代选择器 > 元素选择器

若选择器优先级也相同，则最终按照就近原则判断。即样式表和选择器优先级相同且冲突则列表中最后出现的规则起作用

例如:

1
2
3
4
5
<style type="text/css">
        p {color:red;}
        p {color:blue;}
        p {color:green;} 
</style>

最终生效的是p {color:green;}

-----------------------本文结束 感谢阅读-----------------------
坚持原创技术分享，您的支持将鼓励我继续创作！恰饭^.^~