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告诉浏览器使用什么样的htmlxhtml规范来解析文档。

有和无的区别

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' 更多猛点这里