星之码-网页常用列表及meta标签使用

759 05-11

网页常用列表

1、无序列表 <ul>和<li>

解释：使用一组●(实心圆)、○(空心圆)、■(实心方形)等没有序号的符号表示每个列表项
格式：

<ul>
    <li>列表项</li>
    <li>列表项</li>
</ul>

属性：名称：type，取值：dise(实心圆、默认)、circle(空心圆)、square(实心方块)

2、有序列表 <ol>和<li>

解释：按照数字或字母等顺序来排列列表项
格式：

<ol>
    <li>列表项</li>
    <li>列表项</li>
</ol>

属性1：名称type
取值：

1：数字顺序 1,2,3,4…默认项
a：小写字母 a,b,c,d…
A：大写字母 A,B,C,D…
i：小写罗马数字 i,ii,iii…
I: 大写罗马数字 I,II,III…

属性2：start属性，用于调整数字开始值

3、定义列表 dl dt dd

解释：用于解释名词，不包含项目符号
格式：

<dl>
    <dt>列表标题</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
</dl>

说明：dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。dt不能放入dd内，dd不能放入dt内，不能单独使用。

meta标签使用

一、定义

1、meta标签是用来描述一盒HTML网页文档的属性，例如作者、时间、网页描述、关键词、页面刷新等
2、meta标签位于文档的头部，不包含任何内容
3、meta标签的属性定义了与文档相关联的名称/值对，是一个辅助标签
4、示例：

<head>
    <meta ="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />
</head>

5、组成
meta标签共有两个属性，它们分别是属性和name属性，不同的属性又有不同的参数值

二、name属性

1、Keywords（关键字）
说明：向搜索引擎说明你网页的关键词
用法：<meta name ="keywords" content="紫沐兜,经验分享">
2、description（网站内容描述）
说明：向搜索引擎说明你网站的主要内容
用法：<meta name ="description" content="紫沐兜,经验分享">
3、author（作者）
说明：告诉搜索引擎你网站的作者，网页版权信息
用法：<meta name="author" contect="你的姓名">
4、Robots（机器人向导）
说明：用来告诉搜索引擎机器人抓取哪些页面
Robots属性说明如下：

all：文件将被检索，且页面上的链接可以被查询
none：文件将不被检索，且页面上的链接不可以被查询
index：文件将被检索
follow：页面上的链接可以被查询
noindex：文件将不被检索，但页面上的链接可以被查询
nofollow：文件将不被检索，页面上的链接可以被查询

用法：<meta name="robots" content="none">

5、generator
说明：用以说明网站是什么软件制作的
用法：<meta name="generator" content="eclipse" />

三、属性

1、Expires（期限）
说明：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输
用法：<meta ="expires" content="Fri,12 Jan 2001 18:18:18 GMT">
注意：必须使用GMT的时间格式
2、Pragma(cache模式）
说明：禁止浏览器从本地计算机的缓存中访问页面内容
用法：<meta ="Pragma" content="no-cache">
注意：这样设定，访问者将无法脱机浏览
3、Refresh（刷新）
说明：自动刷新并指向新页面
用法：<meta ="Refresh" content="2;URL"> (注意后面的引号,分别在秒数的前面和网址的后面)
注意：其中的2是指停留2秒钟后自动刷新到URL网址
4、Set-Cookie(cookie设定）
说明：如果网页过期，那么存盘的cookie将被删除
用法：<meta ="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">
注意：必须使用GMT的时间格式
5、Window-target（显示窗口的设定）
说明：强制页面在当前窗口以独立页面显示
用法：<meta ="Window-target" content="_top">
注意：用来防止别人在框架里调用自己的页面
6、content-Language（显示语言的设定）
说明：用以说明主页制作所使用的文字以及语言
用法：<meta ="Content-Language" content="zh-cn" />
解析：上面zh代表语言代码，cn代表国家版本，即primary-code为语言代码,subcode为国家代码这两部分组成
常见的语言代码：

zh (Chinese)中国
fr (French)法国
de (German)德国
it (Italian)意大利
nl (Dutch)荷兰
el (Greek)希腊
es (Spanish)西班牙
pt (Portuguese)葡萄牙
ar (Arabic)阿拉伯
ru (Russian)俄罗斯
ja (Japanese)日本

7、content-Type（显示字符集的设定）
说明：设定页面使用的字符集
用法：<meta ="Content-Type" content="text/html; charset=UTF-8">
常用字符编码：

GB2312：简体中文
BIG5：繁体中文
iso-2022-jp：日文
ks_c_5601：韩文
ISO-8859-1：英文
UTF-8：世界通用语言编码（最常用的）

四、示例总结

<head>
    <!-- 关键词 -->
    <meta name ="keywords" content="紫沐兜,经验分享">
    <!-- 描述 -->
    <meta name ="description" content="紫沐兜,经验分享">
    <!-- 描作者-->
    <meta name="author" contect="你的姓名">
    <!-- 制作工具-->
    <meta name="generator" content="eclipse" />
    <!-- 机器人向导-->
    <meta name="robots" content="none">
    <!-- 有效时间-->
    <meta ="expires" content="Fri,12 Jan 2001 18:18:18 GMT">
    <!-- 禁用缓存 -->
    <meta ="Pragma" content="no-cache">
    <!-- 2秒刷新-->
    <meta ="Refresh" content="2;URL">
    <!-- cookie设定 -->
    <meta ="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">
    <!-- 显示顶层窗口-->
    <meta ="Window-target" content="_top">
    <!-- UTF-8编码 -->
    <meta ="Content-Type" content="text/html; charset=UTF-8">
    <!-- 中文-->
    <meta ="Content-Language" content="zh-cn" />
</head>

————————————————

智一面|前端面试必备练习题

标签： HTML5 Vue.js