html

程序员文章站 2022-04-24 15:35:16

...

概述

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！如下图：

r html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
　　　......
</head>
<body>
.......
</body>
</html>

下面我们一一来看一下每一个的含义：

<!DOCTYPE html>：

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档，建议填写，否则可能会出现位置错误

有和无的区别

BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么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-8”>

1. 刷新和跳转

<meta http-equiv="refresh"content="3">

<meta http-equiv="refresh"content="3;Url=http://autohome.com.cn"/>

关键词和表述，

1. 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 模式）显示该网页。

Title

网页头部信息: <title>baidu<title>

link

style

scripe

标签名称不区分大小写

自闭和标签：<meta />, <br />, <input />

自动闭合标签：

行内标签：<p>, <h>, <div>

块标签：<span> ,<input>

`body`

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

div：行内白板

span：块状白板

p 和 br

p表示段落，默认段落之间是有间隔的！

br 是换行

H 标签（默认加大加粗）

H1

H2

H3

H4

H5

H6

form表单

action的作用为指定发送位置

    <form action='url 指定发送位置' method="get" or 'post'>
        <input type=" text" name = 'matt' value = 'matt' />
        <input type="password" name = 'matt1' value = 'matt1' />
        <input type="button" value="button1" />
        <input type="submit" value="button2" />
    </form>

submite提交数据

get 和post的区别

get 提交的数据在附加在url尾部，（添加在请求头中，请求体为空）

post提交的数据在请求体中

input

单选框：（name相同则互斥）

input type = 'radio' name = 'matt' value = '1' checked = 'checked'默认值

input type = 'radio' name = 'matt' value = '2'

input type = 'radio' name = 'matt' value = '3'

提交的数据为：matt =1

复选框：

input type ='checkbox' name = 'matt' value ='1'

input type ='checkbox' name = 'matt' value ='2'

input type ='checkbox' name = 'matt' value ='3'

提交的数据为：matt = 1 & matt = 2 & matt = 3

后台接受的数据为：

matt_list = self .get_arguments('matt')

[1,2,3]

下拉菜单

</select>

文本自动换行

上传文件

input type ='file' name = 'matt'

需要在form中设置： enctype='multipart/form-data' method='POST'

重置

input type ='reset'

<form enctype="multipart/form-data" method="post">
    <select name="city" multiple="multiple">
        <option value="1">北京</option>
        <option value="2" selected="selected">上海</option>
        <option value="3">广州</option>
    </select>
    <select>
        <optgroup label="山东">
            <option>潍坊</option>
            <option>东营</option>
        </optgroup>
        <optgroup label="河北">
            <option>石家庄</option>
            <option>秦皇岛</option>
        </optgroup>
    </select>
    <p>城市:</p>
    北京：<input type="radio" name ='matt' value="1" checked="checked" />
    上海：<input type="radio" name ='matt' value="2" />
    广州：<input type="radio" name ='matt' value="3" />
    深圳：<input type="radio" name ='matt' value="4" />
    <p>爱好</p>
    篮球：<input type="checkbox" name="favo" value="1">
    足球：<input type="checkbox" name="favo" value="2">
    乒乓球：<input type="checkbox" name="favo" value="3">
    橄榄球：<input type="checkbox" name="favo" value="4">
    <p>上传文件</p>
    <input type="file" name="fname"/>
    <p>重置</p>
    <input type="reset">
    <textarea>asd</textarea>
</form>

<a>标签

不能提交到后台

< a href="http://www.baidu.com.cn"> </a>

1、target属性，_black表示在新的页面打开

2、锚

    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <div id=i1 style="height:600px">第一章</div>
    <div id=i2 style="height:600px">第二章</div>
    <div id=i3 style="height:600px">第三章</div>

img标签

    <a href="www.baidu.com.cn">
        <img src="1.jpg" title="鼠标停留时显示文本" style="height:200px;width:200px" alt="无图时显示">
    </a>

列表

    <ul>
        <li>a</li>
        <li>a</li>
    </ul>
    <ol>
        <li>a</li>
        <li>a</li>
    </ol>
    <dl>
        <dt>aa</dt>
            <dd>bb</dd>
            <dd>bb</dd>
    </dl>

html

table标签

tr为行

td为列（th）

合并单元格：rowspan, colspan

<table border="1">
    <thead>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="2">1</td>
        <td>1</td>

    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>

        <td>1</td>
        <td>1</td>
    </tr>
    </tbody>
</table>

html

label标签

<label for="i1">用户</label>
<input id='i1'type="text" name="matt">

label和input联合使用

应用场景：用户点击用户名时就能跳转到输入框

feildset标签

<fieldset>
    <legend>登录</legend>
    <label for="user">用户名</label>
    <input id='user' type="text" />
    <br/>
    <label for="pwd">密码</label>
    <input id='pwd' type="text" />
</fieldset>

html

上一篇： HTML基础--基础标签

下一篇： HTML

html

概述

有和无的区别

有，用什么？

Meta(metadata information)

Title

link

style

scripe

`body`

p 和 br

H 标签（默认加大加粗）

H1

H2

H3

H4

H5

H6

JavaScript根据json生成html表格的示例代码

php实例分享之html转为rtf格式

HTML简单概述

HTML的学习笔记

html 之 position用法

Html学习一

vue中v-text / v-html使用实例代码详解

javascript+HTML5 canvas绘制时钟功能示例

JavaScript+HTML5 canvas实现放大镜效果完整示例

asp.net动态生成HTML表单的方法