码迷,mamicode.com
首页 > Web开发 > 详细

html

时间:2017-02-19 21:58:38      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:密码   back   文本   eset   format   一点   rip   mil   email   

 

概述

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

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

 

HTML文档

                               技术分享

Doctype

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

有和无的区别

  1. BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)

  2. CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

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

有,用什么?

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

更多

技术分享

技术分享
技术分享
技术分享
技术分享
技术分享
技术分享
技术分享
技术分享
技术分享
技术分享

Meta(metadata information)

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

    1. 页面编码(告诉浏览器是什么编码)

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

    1. 刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

    1. 关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

    1. 描述

例如:cnblogs

    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 模式)显示该网页。更多<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Title

网页头部信息

Link

    1. css

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

    1. icon

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

Style

在页面中写样式例如:
< style type="text/css" >
.bb{
      background-color: red;
   }
< /style>

Script

    1. 引进文件

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

    1. 写js代码

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

 head

<!DOCTYPE html> <!--描述:表示利用html这个规则 (推荐使用这个,兼容性最强)-->


<html lang="en"> <!--标签的属性 (翻译页面或者语音识别时使用)-->

<!DOCTYPE html>     <!--描述:表示利用html这个规则 (推荐使用这个,兼容性最强)-->

<html lang="en"> <!--标签的属性 (翻译页面或者语音识别时使用)-->

================================================================================================

<head> <!--用户看不到 -->
<meta charset="UTF-8"> <!--头部定义,网页编码-->
<title>Title</title> <!--Title:网页头部标签为Title-->
<meta http-equiv="Refresh" Content="30"> <!--页面30秒刷新一次-->
<meta http-equiv="Refresh" Content="99999999999; Url=http://www.baidu.com" /> <!--99999999999秒后,跳转到百度-->
<meta name="keywords" content="老男孩" > <!--网页的关键字-->
<meta name="description" content="教育培训机构" > <!--网页的描述-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--IE=edge;使用最新的版本-->
<link rel="shortcut icon" href="image/favicon.ico"> <!--网页头部标签的图标-->
<link rel="stylesheet" type="text/css" href="css/common.css" > <!--引入css-->
<style></style>
<script></script>
</head>

 

===================================================================================================

body  用户可以看到

标签分为:行内标签:a  img  label  span  select  input

     块级标签:div  fieldset  h1  hr  p  ol  ul

       可变标签:button  iframe  del

               自定义属性

       自定义标签

 

常用标签介绍(主要负责展示,无法向后台提交数据):

 

一。各种符号(<--点我)

 

二。p和br标签,

  p:段落(默认段落之间是有间隔的)

  br:换行


  <p>asdasdasdadasdasdasd</p>
  <p>asdasdasdaa<br/>dasdasdasd</p>

  

 三。a标签、

  1:跳转网站      

   <a href="http://www.baidu.com">百度</a>       <!--点击(百度),当前页面进行跳转;herf是a标签特有的-->
   <a href="http://www.baidu.com" target="_blank">百度</a>       <!--点击(百度),另外开启一个页面,进行跳转-->

  

 2:设置锚点
   <a href="#i1">第一章</a>       <!--点击第一章,跳转到绿色(#i1,i1随意名字)-->
   <a href="#i2">第二章</a>       <!--点击第二章,跳转到红色-->
   <a href="#i3">第三章</a>       <!--点击第三章,跳转到粉色-->
   <div id="i1" style="background-color:green;height:600px;"></div>
   <div id="i2" style="background-color:red;height:700px;"></div>
   <div id="i3" style="background-color:pink;height:100px;"></div>

  

 四。h标签(大小,粗细不同

  <h1>asdasdasd<h1>
  <h6>asdasdasd<h6>

五。select 标签 
     技术分享
  <select>        <!--下拉框(单选)-->
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
  </select>
  <select multiple size="5">     <!--下拉框(多选);默认可以选择五个-->
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
  </select>
  <select multiple size="5">
      <optgroup label="河北">       <!--对河北进行分组-->
          <option>石家庄</option>
          <option>保定</option>
          <option>廊坊</option>
      </optgroup>
  </select>

  

六。input标签
     技术分享
<input type="test">         <!--生成一个输入框-->
    <div>用户名:<input type="text"></div>
    <div><label for="xxx">用户名:</label><input type="text" id="xxx"></div>        <!--当点击用户名时,获取需要输入位置的焦点(id不能重复)-->
    <div>密码:<input type="password"></div>       <!--输入的字符串为密文形式展示-->
    <div>邮箱:<input type="email"></div>          <!--会对输入的字符串进行验证,检查是否为邮箱格式(不支持所有浏览器)-->
    <div>性别:    <!--单选-->
        <div>男 <input type="radio" name="yyy" /></div>    <!--name="yyy"(必须相同):男女只能选择一个-->
        <div>女 <input type="radio" name="yyy" /></div>
    </div>
    <div>爱好:    <!--多选-->
        吃<input type="checkbox" />      <!--可以多选-->
        喝<input type="checkbox" />
        玩<input type="checkbox" />
    </div>
    <div>上传:    <!--选择上传本地文本-->
        <input type="file">
    </div>
  <input type="button" value="按钮">        <!--固定按钮,无功能-->
  <input type="submit" value="提交">
  <input type="reset" value="重置">

七。textarea标签

    <div>简介:    <!--可以输入多行文本-->
        <textarea></textarea>
    </div>

  

八。label标签

<div><label for="xxx">用户名:</label><input type="text" id="xxx"></div>        <!--当点击用户名时,获取需要输入位置的焦点(id不能重复)-->

  

九。table标签

    技术分享

    <table border="1">       <!--加边框-->
        <thead>                 <!--表头-->
        <tr>                    <!--第一行-->
            <td>序号</td>       <!--第一列;td 可以换为th,字体加粗,只在表头使用-->
            <td>用户名</td>
            <td>密码</td>
        </tr>
        </thead>
        <tbody>             <!--内容-->
        <tr>
            <td>1</td>
            <td>asd</td>
            <td>123</td>
        </tr>
        <tr>        <!--合并单元格-->
            <td rowspan="2">1</td>          <!--列合并(删除被覆盖的表格)-->
            <td colspan="2">asd</td>        <!--行合并(删除被覆盖的表格)-->
        </tr>
         <tr>
            <td>asd</td>
            <td>123</td>
        </tr>
        </tbody>
    </table>

  

十。ul  ol  dl  标签

     技术分享

    <ul>
        <li>aaa</li>
        <li>sss</li>
        <li>ccc</li>
    </ul>
    <ol>
        <li>zzz</li>
        <li>xxx</li>
        <li>ccc</li>
    </ol>
    <dl>
        <dt>第一章</dt>
        <dd>第一节</dd>
        <dd>第二节</dd>
    </dl>

  

 十一。fieldset标签

    技术分享

    <fieldset>
        <legend>登陆</legend>
        <p>用户名</p>
        <p>密码</p>
    </fieldset>

 

十二。from标签

    技术分享 

<form action="http://www.baidu.com">      <!--包裹数据,进行提交,提交给百度-->
<input type="button" value="按钮"> <!--固定按钮,无功能-->
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

  

十三。div标签

<div>哦买噶</div>

  

 

 

 

   

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

html

标签:密码   back   文本   eset   format   一点   rip   mil   email   

原文地址:http://www.cnblogs.com/yizhixiaowenzi/p/6416161.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!