HTML+CSS3（二）——HTML 初识

原創 C-A-L-D 2020-02-22 08:26

目录：

HTML+CSS3（一）——认识浏览器

HTML+CSS3（二）——HTML 初识

HTML+CSS3（三）——HTML基本标签

HTML+CSS3（四）——表单pattern正则属性

HTML+CSS3（五）——CSS基础

HTML+CSS3（六）——行内元素和块级元素

HTML+CSS3（七）——display属性（前面文章已讲过，这里转载一篇）

HTML+CSS3（八）——CSS权重

HTML+CSS3（九）——CSS高级技巧

HTML+CSS3（十）——CSS3新特性之过渡

HTML+CSS3（十）——CSS3新特性之2D变形和3D变形

HTML+CSS3（十）——CSS3新特性之动画

HTML+CSS3（十 一）——案例

HTML+CSS3（十二）——CSS常见问题

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

超文本就是指图片，文字，视频，音频......

模板： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        body {
            background-image: url("images/timg.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
</body>
</html>

       头部标签都放在<head></head>之间，包括：

　　<title>：指定整个网页的标题，在浏览器最上方显示。
　　<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
　　　　　　 base会对Html文档中所有URL产生作用，慎用！
　　<meta>： 提供有关页面的基本信息
　　<link>： 定义文档与外部资源的关系。

文档类型<!DOCTYPE>

<!DOCTYPE html> 

注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

网页语言<html lang="en">

<html lang="en">

设置当前网页语言类型为英文。这里的lang="en"可以删除，如果不删除的，用谷歌之类打开，它会认为是英文的，会自动给翻译（如果设置了自动翻译的话）

base 标签<base target="_blank"/>

base 可以设置整体链接的打开状态

base 写到 <head> </head> 之间

把当前页面所有的链接 都默认添加 target="_blank"

字符集<meta charset="UTF-8">

<meta charset="UTF-8" />

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

(记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。)

页面响应式设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content属性值 :

     width:可视区域的宽度，值可为数字或关键词device-width

     height:同width

     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

     maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

     user-scalable:是否可对页面进行缩放，no 禁止缩放

meta标签

<meta http-equiv="参数" content="参数变量值">

META包括了2个重要的属性，http-equlv(把content属性关联到http头部)和name(把content属性关联到名称)。
合乎W3C规范的源代码必须包含这2个基本属性。其中页面标题信息往往是固定的，不同网页变化不大，只要符合W3C规范即可;seo重点在于name属性的正确参数配置。

<meta http-equiv="X-UA-Compatible" content="ie=edge">

网站优化三大标签

 

网页title 标题

title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。

建议：

首页标题：网站名（产品名）- 网站的介绍

例如：

京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！

小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

Description 网站说明

对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。 我们提倡，Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句。

京东网：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

注意点：

  1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。

  2. 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。

  3. 补充在 title 和 keywords 中未能充分表述的说明.

  4. 用英文逗号 关键词1,关键词2

<meta name="description" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX、小米Note 2，红米手机系列红米Note 4、红米4，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。" />

Keywords 关键字

Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。

京东网：

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

小米网：

<meta name="keywords" content="小米,小米6,红米Note4,小米MIX,小米商城" />

 

C-A-L-D
发布了108 篇原创文章 · 获赞 31 · 访问量 9318
私信 关注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML+CSS3（十）——CSS3新特性之过渡

C-A-L-D 2020-02-22 08:26:08