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

前端之HTML

时间:2017-02-13 23:56:49      阅读:461      评论:0      收藏:0      [点我收藏+]

标签:iis   toolbar   upm   标准   ie6   dsd   g++   sqs   emd   

HTML解释:

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

浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!

超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。

基本组成:

<!DOCTYPE html>     #标准规范
<html lang="en">
<head>                  #html头
    <meta charset="UTF-8">      #字符编码
    <title>Title</title>        #页面头部显示内容
</head>
<body>
        <p>主体内容</p>         #页面内容主体
</body>
</html>


<head>和</head>之间的内容,是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息
<body>和</body>之间的内容,是浏览器呈现出来的,用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>

  

HTML文档

1、DOCTYPE 

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

HTML语言需要一个标准,当我们在第一行指定了<!DOCTYPE html>的时候,当浏览器去访问我们的代码的时候就就按照HTML代码里指定的标准去读取和渲染给我们展现的页面。

 

为什么要使用<!DOCTYPE html>这个去告诉浏览器呢????????:

DOCTYPE模式:

我们先了解一下DOCTYPE的模式

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

问题产生:

当Netscape4(译注:网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题(bugs),但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。

为了保证自己的网站在不同的浏览器中都能正确展现,网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。

然而随着标准一致性变得越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现,完整去遵循标准,会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS,陈旧的网站显示必然受到影响。

因此立即遵循标准会产生问题,然而忽略标准则又会维持浏览器大战时(译注:微软和网景之间的一段竞争)所产生的混乱。

解决方案:

  1. 允许网站开发者能够选择他们所熟知的模式。
  2. 依然使用旧式规则显示陈旧的网站。

换句话说,所有的浏览器需要提供两种模式:怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式,Mozilla, Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。

选择使用哪种模式需要一个触发器,而 “DOCTYP切换” 则用于此目的。依照标准:任何一个(X)HTML文档必须拥有一个DOCTYPE(译注:DTD(文档类型定义)是一组机器可读的规则,它们指示 (X)HTML文档中允许有什么,不允许有什么,DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人 这个文档的类型风格

  1. 产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此‘没有DOCTYPE‘意味着触发怪异模式:既依据旧式的CSS规则渲染网页。
  2. 相反,如果开发者明确知道包含DOCTYPE,他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式:即依据标准的CSS规则渲染网页。
  3. 任何新的或未知的DOCTYPE将触发严格模式。
  4. 一些页面依据怪异模式而写,但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式,参照下面的浏览器比较图表 。

 技术分享

 head部分

1、Meta(metadata information)

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

 1、页面编码

<meta charset="UTF-8">  #指定编码类型为UTF-8

  

2、刷新和跳转

<meta http-equiv="refresh" content="5">  #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页

  

3、关键字

关键字的作用:一般是让爬虫之类的收录程序,当他们在爬你的网站的时候,如果你有关键字,那么他们会优先把关键字收录到他们的记录中,比如百度:如果他们收录之后,他们搜索你的关键字的时候,就能找到咱们的网站。

<meta name="keywords" content="博客,Mr、心弦,帅哥,罗天帅">

  

4、描述

例如cnblog里的就是一个描述:

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

5、X-UA-Compatible

X-UA-Compatible  这个是IE8特有的,知道即可,因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异,当IE8的时候微软想把各个版本的统一,那么这个参数就出现了,他为了向下兼容,如下的代码如果使用IE8的时候他会以IE7的模式运行。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

  

2、title

网页头部信息,如下图所示:

技术分享

3、Link

网页头部的图标

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

  

效果图如下:

技术分享

导入CSS类似python中导入模块类似

<link rel="stylesheet" href="css/css_model.css">

4、Style

1、在当前文件中写Css样式

2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

< style type="text/css" > 
    .bb{ 
    background-color: red; 
} 
</style> 

  

5、Script

1、在当前文件中写JS

2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

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

写js代码
< script type="text/javascript" > ... </script >

  

body部分

基础知识

1、body里面分为两类标签:块级标签和内联标签,块级标签占用的是整行,内联标签占用的他所使用的实际大小如下图:

块级别标签&内联标签:

技术分享

 

2、特殊符号特殊处理

举例来说<h1>是标题标签,如果我想输出<h1>这个字符串,而不是想获取<h1>的样式怎么办呢?

技术分享

正常情况下如果直接在html文件里输入<h1>当有浏览器在读取的时候就会讲<h1>解释,页面将无法显示,所以特殊的标签需要特殊处理

所以特殊符号有自己的定义更多请看连接:更多

常用标签:

 1、<p></p>标签和<br/>标签

<p></p>标签:段落标签,每一对p标签为一段,代码如下

    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>

显示效果如下:

技术分享

<br/>标签:换行标签;有一个<br/>为一个换行,看下面的代码

    <p>帅哥帅帅哥帅帅哥帅<br/>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
    <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>

显示效果如下,我加了一个<br/>标签之后段落就被换行了:

技术分享

2、<a></a>标签

<a></a>标签用来跳转和锚

<a>标签之:跳转

默认如果在<a><a/>标签中不设置那么他仅仅在浏览器中显示文本,如下面代码

    <a>帅哥博客</a>

显示效果:(这里仅仅显示的文字没有任何功能)

技术分享

 指定跳转后,代码如下

<a href="https://home.cnblogs.com/u/fengdao/">帅哥博客</a>

效果如下:

技术分享

点击后将跳转到指定的连接地址~,在自身的页面打开的!

如果让他用一个新的标签中打开连接地址代码如下:

<a target="_blank" href="https://home.cnblogs.com/u/fengdao/">帅哥博客</a>

 

target 属性

使用 Target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

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

 

显示如下:

百度

 

<a>标签之:锚

锚的作用是类似于读书时候的书签,当你你点击这个“锚”=“书签”,的时候就跳转到指定的位置

技术分享
    <a href="#a2">
        书签
    </a>
    <!--在标签里,ID是这个标签的唯一的值,我们在做锚的时候指定他的ID即可-->
    <!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
    <div id="a1" style="height:700px;">
        mark_1
    </div>

    <div id="a2" style="height:700px;">
        mark_2
    </div>
技术分享

上面的代码中,如果点击了书签之后,那么就会跳转到id=a2的书签的位置!

3、H标签

即标题标签,代码如下

    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>

显示效果如下:

技术分享

4、Select标签

第一种select标签

<select>
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3" selected="selected">广州</option>
    <!--这里默认是广州因为selected="selected" 这里设置了默认的!-->
</select>

显示效果如下图:

技术分享

第二种select标签

<select size="2">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
</select>

显示效果如下图:

 技术分享

第三种select标签,可以进行多选

<select multiple="multiple" size="2">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
</select>

第4中select标签,可以进行分组

技术分享
<select>
    <optgroup label="河北省">
        <option>石家庄</option>
        <option>邯郸</option>
    </optgroup>
    <optgroup label="山西省">
        <option>太原</option>
        <option>平遥</option>
    </optgroup>
</select>
技术分享

效果图如下:

 技术分享

5、input系列标签

input:checkbox标签-复选框

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
<!--这里加一个标识checked="checked,为默认选择"-->

效果如下图:

技术分享

input:radio标签-单选框

技术分享
<!--第一中情况不互斥    -->
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<hr/>
<!--对于input标签来说只要,radio的name值相同,那么他们就会互斥-->
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
技术分享

效果图如下:

技术分享

input:text & password 输入框

<!--标准的输入框-->
<input type="text"/>
<!--密码的输入框(输入的内容是保密的)-->
<input type="password"/>

效果图如下:

技术分享

input:button & submit 提交按钮

<input type="button" value="提交"/>
<input type="submit" value="提交"/>

效果图如下:

技术分享

file标签-用来提交文件时使用

<input type="file"/>

效果图如下:

技术分享

6、多行文本框

<textarea style="height: 100px;width: 100px;"></textarea>

效果图如下:

技术分享

7、form表单

技术分享
<form>
    <p>用户名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <input type="submit" value="提交"/>
    <input type="button" value="按钮"/>
    <!--这里按提交才有反映,submit是用来提交当前的表单的,当然可以有多个表单-->
    <!--但是,这个submit需要写入表单内,那么提交的时候是提交的当前表单-->
</form>
技术分享

效果图如下:

技术分享

技术分享
<form action="www.baidu.com" method="get">
    <!--这里action是告诉html提交到那里-->
    <!--method是通过什么方法去action指定的地址-->
    <p>
        用户名:<input type="text" name="username"/>
        <!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
        <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
    </p>
    <p>
        密码:<input type="password" name="password"/>
                <!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
        <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
    </p>
    <p>
        部门:<select name="department">
                    <option value="1">CTO</option>
                    <option value="2">DBA</option>
        <!--这里在选择之后,会把选择的value值赋予给name,当用户点击提交后就会提交到后台-->
    </select>
    </p>
    <input type="submit" value="提交"/>

</form>
技术分享

action表示提交动作,把数据提交到指定的路径,methon指定提交类型,默认为get

post与get的区别:

method默认为get类型,数据会包含在html的头部进行提交,表现形式是点击提交后会在外部url路径上查看提交到的数据表单内容,效果如下

1
http://localhost:8888/index?user=lianzhilei&email=James%40123.com&pwd=123123

method如果指定为post类型的话,数据会包含在html的body内进行提交,从外部看不出来里面的信息

两者 没有谁安全之说,因为抓包都能抓到

 

8、label标签

有一种情况,看下图,在不使用label标签的时候,我们只能点进框体里去,否则就不能输入或选择,这样用户体验不是很好:

代码如下:

<div>
    <h1>Label标签</h1>
    姓名:<input type="text"/>
    婚否:<input type="checkbox"/>
</div>

技术分享

 使用label标签,代码如下:

技术分享
<div>
    <label for="name_1">
        姓名:
        <input id="name_1" type="text"/>
    </label>

    <label for="name_2">
        婚否:<input id="name_2" type="checkbox"/>
    </label>
</div>
技术分享

显示效果,这里我选择文字的时候也会进入到相应的框体,他类似一个跳转:

技术分享

 9、列表 ul/ol/dl

 ul列表在前面自动加“点”,代码如下:

<ul>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ul>

效果如下:

技术分享

ol列表在前面自动加“数字”,代码如下:

<ol>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ol>

效果如下:

技术分享

dl列表自动分组,代码如下:

技术分享
<dl>
    <dt>河北省</dt>
    <!--dt是标签,dd是标签里的内容-->
        <dd>石家庄</dd>
        <dd>衡水市</dd>
    <dt>山东省</dt>
    <!--dt是标签,dd是标签里的内容-->
        <dd>济南市</dd>
        <dd>烟台市</dd>
</dl>
技术分享

效果如下图:

技术分享

10、表格

技术分享
<table border="1">
    <!--border这里是加上边框-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <!--一个tr是1行,一个td是一列,一行里可能有很多列。-->
    <!--如果想加多个行就加多个tr即可-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
技术分享

效果如下:

技术分享合并单元格

技术分享
<table border="1">
    <!--border这里是加上边框-->
    <tr>
        <td colspan="3">1</td>
        <!--这里colspan,就告诉html解析的时候占3个格-->
    </tr>
    <!--一个tr是1行,一个td是一列,一行里可能有很多列。-->
    <!--如果想加多个行就加多个tr即可-->
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
        <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
技术分享

效果如下图:

技术分享

以上的表格标签其实还不是很标准,正常标准的标签如下:

技术分享
<table border="1">
    <thead>
    <!--表头-->
        <tr>
            <th>表1</th>
            <th>表2</th>
            <th>表3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>
技术分享

效果如下图:

技术分享

11、fieldset标签

 代码如下:

<fieldset>
    <legend>协议</legend>
请仔细阅读协议内容:
</fieldset>

效果如下:

技术分享

前端之HTML

标签:iis   toolbar   upm   标准   ie6   dsd   g++   sqs   emd   

原文地址:http://www.cnblogs.com/fengdao/p/6395766.html

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