Web——html和CSS基础（二）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Web——html和CSS基础（二）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：更多内容见web专栏

1、html

1、网页元数据

1、简单介绍

2、 meta的作用

3、详解meta中的name

4、详解meta中的http-equiv

2、表格

3、列表

4、引用

5、计算机代码

6、预编排文字

2、CSS

1. 样式分组：

2. CSS文本属性

3. Body样式

4. 层叠样式表

5. 继承模式

6. W3C CSS验证器

7. CSS背景

1、html

1、网页元数据<meta>

1、简单介绍

1）meta元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词

2）meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

eg：

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta name="description" content="Authors' web site for Building Java Programs." /> 
<meta name="keywords" content="java, textbook" />

2、 meta的作用

帮助主页被各大搜索引擎登录
定义页面的使用语言
自动刷新并指向新的页面
动画效果
网页定级评价
控制网页窗口

3、详解meta中的name

1. keywords

作用：keywords用来告诉搜索引擎你网页的关键字是什么

2. description

作用：描述网页的内容

3. robots

作用：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引

content的参数有all,none,index,noindex,follow,nofollow。默认是all

举例：<meta name="robots" content="none">

4. author（作者）

作用：说明网页的作者

4、详解meta中的http-equiv

1. expires期限

可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输

eg：

<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT">

注：时间必须使用GMT格式

2. Pragma(cache模式）

禁止浏览器从本地计算机的缓存中访问页面内容

eg:

<meta http-equiv="Pragma" content="no-cache">

这使得访问者无法脱机浏览

3. refresh

自动刷新并转到新页面

<meta http-equiv="Refresh" content="2;URL">;

注意：其中的2 是指停留 2秒钟后自动刷新到URL网址。(URL可以为空）

4. Set-Cookie

如果网页过期，那么存盘的cookie将被删除。

<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">

时间格式还是要求为GMT

5. Window-target（显示窗口的设定）

强制页面在当前窗口以独立页面显示

<meta http-equiv="Window-target" content="_top">

作用：用来防止别人在框架里调用自己的页面

6. content-Type（显示字符集的设定）

<meta http-equiv="content-Type" content="text/html; charset=gb2312">

7. content-Language（显示语言）

<meta http-equiv="Content-Language" content="zh-cn" />

2、表格

eg:

<table>
  <caption>Smart Guys</caption>
  <tr><th>name</th><th>gender</th></tr>
  <tr><td>Bill</td><td>male</td></tr>
  <tr><td>Susan</td><td>female</td></tr>  
</table>

效果：

Web——html和CSS基础（二）,web,css,前端

3、列表

dl表示一个块的内容，dt表示一个项目，dd表示含义

<dl> 
    <dt>newbie</dt><dd>one who does not have mad skills</dd>
    <dt>own</dt><dd>to soundly defeat 
       (e.g. I owned that newbie!)</dd> 
    <dt>frag</dt> <dd>a kill in a shooting game</dd> 
</dl>

效果：

Web——html和CSS基础（二）,web,css,前端

4、引用

1）长引用：<blockquote> </blockquote> 效果是斜体的

2）行内引用：<q> </q> 效果是加上了""

不推荐直接用"",原因如下：

XHTML不应该包含文字的引用符号; 他们应该写成 "

使用 <q>允许我们将CSS样式应用于quotations中

特殊字符对应表：

Web——html和CSS基础（二）,web,css,前端

5、计算机代码

code: 一段简短的计算机代码(通常会通过固定宽度的字体呈现出来）

6、预编排文字<pre>

1）显示时会保留空格和回车

2）以默认的等宽度字体显示

2、CSS

1. 样式分组：

一个样式可以选择多个元素，用逗号分隔

p,h1,h2{
    color:green;
}

2. CSS文本属性

text-align	文本的水平对齐方式
text-decoration	文本的修饰、例如下划线
line-height word-spacing, letter-spacing	文本的间隔
text-indent	每一段落的首字符缩进

1）对于text-align:

可以是left、right、center、justify（两端对齐、并使各行长度相等）

2）对于text-decoration:

Web——html和CSS基础（二）,web,css,前端

可以组合其效果

3. Body样式

要把一个样式应用到页面的整个body，我们可以编写一个body选择器（如下）

eg:

body{font-size:16px;}

优点：避免手动为每一个元素添加样式

4. 层叠样式表

它被称为层叠样式表是因为元素的属性以以下的顺序层叠在一起:

浏览器的默认样式

外部样式表文件 (在<link>标签里面)

内部样式表 (在网页头的<style>标签里面)

行内样式 (HTML 元素的样式属性)

5. 继承模式

1、当多种样式应用到某一个元素时, 它们是可以被继承的

2、一个更紧密匹配的规则可以覆盖一个更通用的继承而来的规则

3、不是所有的属性都是可以被继承的

冲突的样式：

（CSS文件中）对同一个属性做了多次样式设定，在后的样式会取得更高的优先级

6. W3C CSS验证器

点击该链接，上传CSS文件完成检验：jigsaw.w3.org/css-validator/

7. CSS背景

1）相关属性

background-color	背景色
background-image	背景图
background-position	相对于元素的背景位置
background-repeat	背景是否被重复
background-attachment	背景是否随页面滚动

2）背景图大小与页面大小

background-repeat(默认）	全填充
background-repeat:repeat-x	只在x方向上填充
background-repeat:repeat-y	只在y方向上填充
background-repeat:no-repeat	不重复填充