14day html、cssv页面

HTML概述

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

以下是HTML文档树：

新创建一个html代码的格式：

<!DOCTYPE html> #文档类型
<html lang="en"> #html语言
<head> #文件头标签
    <meta charset="UTF-8"> #页面字符编码格式
    <title></title> #标题头标签
    <style> #样式标签

    </style>
</head>
<body> #html主体标签


</body>
</html>

meta 标签主要功能：提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1、页面编码：

meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；

meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；

meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；

meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；

meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；

meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；

2、页面的刷新和跳转：

< meta http-equiv=“Refresh” Content=“30″> 代表网页30秒刷新一次

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.baidu.com“ /> 代表网页五秒刷新一次，然后自动跳转百度网站主页

3、关键词：

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" > 代表此网页大概的内容是什么

4、描述：

cnblog 主要是醒目提示的作用

5、X-UA-Compatible

微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示该网页。如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 注意：标示用最新的版本来打开浏览html,只对IE有用！！

HTML中使用的标签

Title

网页头部信息

Link

css

< link rel="stylesheet" type="text/css" href="css/common.css" > #注意：<link>标签是标示在HTML中导入CSS

icon

< link rel="shortcut icon" href="image/favicon.ico"> #注意：<link>标签在html title中添加一个小的图标

systle样式标签

例如：
< style type="text/css" >
.bb{

}
< /style>

Script代码

引入文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

写js代码

< script type="text/javascript" > ... </script >

常用标签分类

标签一般分为两种：块级标签和行内标签

行内标签如：a、span\select等

块级标签如：div、h1、p等

网页中特殊符号

在html网页中显示“<”或者“>”等符号，需要使用特殊符号来&lt或者&gt来表示

常用标签解释

<p></p>标签标示段落，默认之间是有间隔的！

<br>标签标示换行

<a></a>标签标示锚用来定位页面链接 #只有<a></a>才有自动跳转的功能。其他标签没有此功能。

例如：

target属性，_black标示在新的页面打开

<a></a>锚示例：

    <a href="#i1">第一章</a> #href 寻找 ID为i1的标签，将其页面标签放到页面顶部。并且ID属性值不能重复。每一个ID属性值是唯一的
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>


    <div id="i1" style="height: 500px;">第一章</div>
    <div id="i2" style="height: 500px;">第二章</div>
    <div id="i3" style="height: 500px;">第三章</div>

<h1></h1> 标签标示标题，如果有层标签，标题会从上到下呈现由大到小的展示。

    <h1>a</h1> 
    <h2>a</h2>
    <h3>a</h3>
    <h4>a</h4>
    <h5>a</h5>
    <h6>a</h6>
h标签为标题标签，默认情况下表内数字越小字体越大，也可以通过CSS样式自定义标签内的大小。

<select></select>标签标示多选标签

 <select>
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>成都</option>
 </select>

checkbox 复选框

<p>爱好(复选框)：
   <br/>男1<input type="checkbox">
   <br/>男2<input type="checkbox">
   <br/>男3<input type="checkbox">
   <br/>男4<input type="checkbox">
</p>

redio单选框

<p>性别(单选框)：
   <br/>男<input type="radio"name="ee"/>
   <br/>女<input type="radio"name="ee"/>
</p>

posted @ 2016-08-08 15:50 梁怀军阅读(300) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

梁怀军

14day html、cssv页面

HTML概述

常用标签分类

网页中特殊符号

常用标签解释

公告