Html基础详解

时间：2023-03-22 12:41:44

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

Html基础详解

HTML文档格式如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

</body>

</html>

以下用一个图来表示：

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、约束规则。

Html基础详解

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>

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

Html基础详解

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图标，例如本博客的就是如下图

Html基础详解

Style

在页面中写样式

例如：

    <style type="text/css" >

    .bb{

        width:20px;

        height:20px;

        background-color: red;

   }

    </style>

展示结果：

Html基础详解

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>

例子：

Html基础详解

Checkbox

<input type='checkbox'/>

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

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

Html基础详解

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

Html基础详解

textarea方框

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

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

Html基础详解

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

label

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

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

Html基础详解

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

Html基础详解

fieldset

<div>

    <fieldset>

        <legend>登录</legend>

        <p>用户名：</p>

        <p>密码：</p>

</fieldset>

</div>

Html基础详解

form表单

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

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

</form>

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

相关文章