Html基础详解

　　HTML是（Hyper Text Mark-up Language）超文本标记语言，是因特网上应用最为广泛的一种网络传输协议，所有的www文件都必须要遵守这个标准。这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户可以“看懂的”格式，呈现给用户！

HTML文档格式如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

</body>

</html>

以下用一个图来表示：

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析文档。

有和无的区别

1、BackCompat：标准兼容模式未开启（或叫诡异模式[Quirks mode]、混杂模式）

2、CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat，这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，compatMode默认就是BackCompat，这也就是恶魔的开始--浏览器就是按照自己的方式解析渲染页面的，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档，dtd文件则包含了标记、attributes、properties、约束规则。

Meta（metadata information）

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

1、页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-”>

2、刷新和跳转

< meta http-equiv=“Refresh” Content=“″>#每隔30秒钟刷新一次

< meta http-equiv=”Refresh“ Content=”; Url=http://www.autohome.com.cn“ />#5秒钟跳转

3、关键词

< meta name="keywords" content="老男人，老吴" >#有利于搜索引擎的爬虫查找

4、描述

 <meta name="description" content="欢迎您访问xxxxx" /> #这里一般作为整个完整的简单描述

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" />

Title

网页头部信息

<title>吴老二</title>

浏览效果，这个地方一般都是网站名称或公司名称。

Link

1、css

< link rel="stylesheet" type="text/css" href="css/common.css" >

注：调用本页内的css文件。

2、icon

< link rel="shortcut icon" href="image/favicon.ico">

这个是调用ico图标，例如本博客的就是如下图

Style

在页面中写样式

例如：

    <style type="text/css" >

    .bb{

        width:20px;

        height:20px;

        background-color: red;

   }

    </style>

展示结果：

Script

1、引进文件

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

引入http://www.googletagservices.com/tag/js/gpt.js文件，可以在div里调用。

2、写js代码

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

常用标签

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

<a>....</a>内页跳转

<a href="http://www.baidu.com;">百度</a>

如果加上ol就会自动增加1

<ol>

    <li><a>各种符号1 </a></li>

    <li><a>各种符号1 </a></li>

    <li><a>各种符号1 </a></li>

    <li><a>各种符号1 </a></li>

    <li><a>各种符号1 </a></li>

    <li><a>各种符号1 </a></li>

</ol>

注：就会在元素前自动加1

<span>

<span> 标签被用来组合文档中的行内元素。

提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。

注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

例如：

<p><span>some text.</span>some other text.</p>

<select>......</select> 元素可创建单选或多选菜单。

<h3>只能选择一个从上到下</h3>

<select>

    <option value="">河南</option>

    <option value="">上海</option>

    <option value="">广州</option>

    <option value="">云南</option>

    <option value="">河北</option>

    <option value="">湖北</option>

</select>

</br>

<h3>上下翻滚，一次只能选择一个</h3>

<select size="">

    <option>河南</option>

    <option>上海</option>

    <option>广州</option>

    <option>云南</option>

    <option>河北</option>

    <option>湖北</option>

</select>

</br>

<h3>上下翻滚，可以选择多个</h3>

<select multiple="multiple";size="">

    <option>河南</option>

    <option>上海</option>

    <option>广州</option>

    <option>云南</option>

    <option>河北</option>

    <option>湖北</option>

</select>

Select

<div>

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

<div style="width:80px;height:80px;background-color: red;">

</div>

<h1>

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

如果您希望了解更多有关 HTML 标签选择和使用的信息，请阅读《Web 品质》

<h3>H标签</h3>

<h>欢迎你来学习HTML</h>

<h1>欢迎你来学习HTML</h1>

<h2>欢迎你来学习HTML</h2>

<h3>欢迎你来学习HTML</h3>

<h4>欢迎你来学习HTML</h4>

<h5>欢迎你来学习HTML</h5>

<h6>欢迎你来学习HTML</h6>

<p>

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。如果需要换行可以用</br>

<p>提交文件时： enctype='multipart/form-data' method='POST'.是设置表单的MIME 编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；</br>只有使用了multipart /form-data，才能完整的传递文件数据，进行操作</p>

例子：

Checkbox

<input type='checkbox'/>

<input type='checkbox' checked/>#默认勾选

<input type='checkbox' checked='checked'/>#默认勾选

redio

有两种情况：一种是选择之后不能取消。

男<input type="radio" value="man"/>

女<input type="radio" value="male"/>

保密<input type="radio" value="no"/>

第二种：可以取消，因为name相同。

男<input type="radio" name="gender" value="man"/>

女<input type="radio" name="gender" value="male"/>

保密<input type="radio" checked="checked" name="gender" value="no"/>

password

两种：一种输入的内容显示。

<h3>password,text显示输入内容，password不显示</h3>

用户：<input type="text"/>

第二中：输入的内容加密。

密码：<input type="password"/>

button

<button> 标签定义一个按钮。

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

file上传文件

<input type="file" value="file" />

textarea方框

<textarea>自己定义的内容</textarea>#默认大小

<textarea style='width:500px;height: 200px;'></textarea>#定义大小

选择红色部分可以进行拉伸。

label

<label for="name2">姓名：<input id="name2" type="test"/></label>

<label for="marriy2"> 婚否：<input id="marriy2" type="checkbox"/></label>

table

<h3>table表格</h3>

<table border="">

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

</table>

</br>

<h3>table合并空格</h3>

<table border="">

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <th colspan=""></th>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <th colspan=""></th>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

</table>

<h3>左右、上下合并</h3>

<table border="">

    <thead>

    <tbody>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <th colspan=""></th>

            <td></td>

        </tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td rowspan=""></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

        </tr>

    </tbody>

    </thead>

</table>

table

fieldset

<div>

    <fieldset>

        <legend>登录</legend>

        <p>用户名：</p>

        <p>密码：</p>

</fieldset>

</div>

form表单

<form method="post" action="http://www.baidu.com">

    <input type="submit" value="submit"/>

</form>

注：点击按钮跳转。文件:enctype='multipart/form-data' method='POST' 更多猛点这里

Html基础详解的更多相关文章

Dom探索之基础详解
认识DOM DOM级别注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型注:1 ...
Android中Canvas绘图基础详解（附源码下载） (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
javaScript基础详解（1）
javaScript基础详解首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 J ...
Python学习一：序列基础详解
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7858473.html 邮箱:moyi@moyib ...
Python学习二：词典基础详解
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...
深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
三剑客基础详解(grep、sed、awk)
目录三剑客基础详解三剑客之grep详解 1.通配符 2.基础正则 3.grep 讲解 4.拓展正则 5.POSIX字符类三剑客之sed讲解 1.sed的执行流程 2.语法格式三剑客之Awk 1 ...
java继承基础详解
java继承基础详解继承是一种由已存在的类型创建一个或多个子类的机制,即在现有类的基础上构建子类. 在java中使用关键字extends表示继承关系. 基本语法结构: 访问控制符 class 子类名 ...
java封装基础详解
java封装基础详解 java的封装性即是信息隐藏,把对象的属性和行为结合成一个相同的独立单体,并尽可能地隐藏对象的内部细节. 封装的特性是对属性来讲的. 封装的目标就是要实现软件部件的"高 ...
Java :内部类基础详解
可以将一个类的定义放在另一个类的定义内部,这就是内部类. 第一次见面内部类我们从外面看是非常容易理解的,无非就是在一个类的内部在定义一个类. public class OuterClass { pr ...

随机推荐

Office Web Apps 错误
owa安装完后,在sharepoint网站上打开word,excel,报错,Sorry, something went wrong, 通过correlation id找到错误信息(如何在sharepo ...
servlet第3讲(中集)----同一用户的不同页面共享数据
5.session 5.1session概述 5.2.session应用举例
shell命令一行代码搞定【转】
查看文件内容-while: cat 1.txt|while read line;do echo $line;done while read line; do echo $line; done < ...
js-call、apply
这里主要就是做一些前人的总结,有时候会有自己的看法,首先把定义说一下 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义 ...
vi编辑器常见命令的使用
Linux下的文本编辑器有很多种,vi 是最常用的,也是各版本Linux的标配.注意,vi 仅仅是一个文本编辑器,可以给字符着色,可以自动补全,但是不像 Windows 下的 word 有排版功能. ...
修改apache配置文件去除thinkphp url中的index.php
例如你的原路径是 http://localhost/test/index.php/index/add那么现在的地址是 http://localhost/test/index/add如何去掉index. ...
Java获取来访者IP
在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实I ...
android之相机开发
http://blog.csdn.net/jason0539/article/details/10125017 android之相机开发分类: android 基础知识2013-08-20 22: ...
Lucene入门教程
Lucene教程 1 lucene简介 1.1 什么是lucene Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么 ...
cocos2d3.8.1 使用prebuild提升发布android速度
1.生成cocos prebuild库 cocos gen-libs -m debug或 cocos gen-libs -m release 2.使用命令创建test项目 cocos new test ...

Html基础详解

Html基础详解的更多相关文章

随机推荐

热门专题