HTML基础

HTML

HTML解释：

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

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

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

网页的组成：

一个网页一般由两部分组成即：

HTML（Hypertext Markup Language）
和CSS（Cascade Style Sheets）。

HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。

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

HTML文档

实例如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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，陈旧的网站显示必然受到影响。

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

解决方案：

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

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

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

产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式：既依据旧式的CSS规则渲染网页。
相反，如果开发者明确知道包含DOCTYPE，他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式：即依据标准的CSS规则渲染网页。
任何新的或未知的DOCTYPE将触发严格模式。
一些页面依据怪异模式而写，但是却包含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/aresxin/" /> #指定1秒之后跳转页面至另一个网页

3、关键字

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

<meta name="keywords" content="xxx">

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

网页头部信息，如下图所示：

网页头部信息写在title标签内

3、Link

网页头部的图标

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

效果图如下：

4、Style

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

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

5、Script

1、在当前文件中写JS

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

body部分

基础知识

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

块级别标签&内联标签：

实现代码：

<h1 style="background-color: red">12345</h1>
<a style="background-color: aqua;color:red">3546</a>

2、特殊符号

连接请看：http://www.cnblogs.com/aresxin/p/7056853.html

常用标签：

1、标签和 标签

标签：段落标签，每一对p标签为一段,代码如下

<p>蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变</p>
<p>蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变</p>
<p>蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变</p>
<p>蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变</p>
<p>蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变</p>
<p>蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变蜕变</p>
<p>蜕变蜕变蜕变蜕变<br>蜕变蜕变蜕变蜕变蜕变蜕变</p>

显示效果如下，可以看到br的换行作用：

2、<a></a>标签

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

<a>标签之：跳转

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

<a>蜕变</a><br>
<a href="http://www.baidu.com">蜕变当前页面打开</a><br>
<a target="_blank" href="http://www.baidu.com">蜕变新标签打开</a><br>

显示效果如下（_blank作用是在新页面打开连接）：

有时候会用到书签的功能

<a href="#跳转的位置">书签</a>
<a href="#a2">书签跳转</a>    //点击书签跳转按钮直接跳转到a2书签
<!--在标签里，ID是这个标签的唯一的值，我们在做锚的时候指定他的ID即可-->
<!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
<div id="a1" style="height: 100px">1</div>
<div id="a2" style="height: 100px">2</div>

效果如下：

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>

显示效果如下图：

第2中select标签

<select size="2">   //默认显示2个,单选
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected="selected">成都</option>
</select>

显示效果：

第3种select标签

<select size="2" multiple="multiple">   //默认显示2个,多选
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected="selected">成都</option>
</select>

显示效果：

第4种select标签

<select>
    <!--对option的分类,不可选-->
    <optgroup label="山东省">
        <option>济南</option>
        <option>青岛</option>
    </optgroup>
    <optgroup label="四川省">
        <option>成都</option>
        <option>绵阳</option>
    </optgroup>
</select>

显示效果

5、input系列标签

input:checkbox标签-复选框

<input type="checkbox" /> //复选框 <br>
<input type="checkbox" /> //复选框 <br>
<input type="checkbox" checked="checked" /> //复选框,默认选中<br>

效果如下图：

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="提交"/>

效果图如下：

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

<input type="file"/>

效果图如下:

6、多行文本框

<!--多行输入-->
<textarea>123</textarea>

效果如下图：

7、form表单

<!--form表单,使用action提交-->
<form action="xxx" method="get">
    <!--这里action是告诉html提交到那里-->
    <!--method是通过什么方法去action指定的地址-->
    <p>用户名:<input type="text" name="user"/></p>
    <!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
    <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
    <p>密码:<input type="password" name="pwd"/></p>
    <!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
    <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
    <p>
        部门:<select name="depart">
            <option value="1">CEO</option>
            <option value="2">SA</option>
        </select>
        <!--这里在选择之后，会把选择的value值赋予给name，当用户点击提交后就会提交到后台-->
    </p>
    <p>
        性别:<input type="radio" name="gender" value="1"/>男
            <input type="radio" name="gender" value="2"/>女<br>
    </p>
    <input type="submit" value="提交"/>
</form>

显示效果如下：

8、label标签

<!--label标签,1,点击标签前文字,没有效果2,点击标签前文字,光标自动选中标签-->
<label>
    姓名:<input type="text" id="name1"/>
    婚否:<input type="checkbox" id="marry1"/>
</label>
<br>
<label for="marry2">
    <!--当点击婚否文字时,会自动把婚否后的复选框选中-->
    姓名:<input type="text" id="name2"/>
    婚否:<input type="checkbox" id="marry2"/>
</label>

9、列表 ul/ol/dl

<!--列表-->
<ul>
    <li>蜕变</li>
    <li>蜕变</li>
    <li>蜕变</li>
</ul>
<ol>
    <li>蜕变</li>
    <li>蜕变</li>
    <li>蜕变</li>
</ol>
<dl>
    <dt>山东省</dt>
        <dd>济南市</dd>
        <dd>青岛市</dd>
    <dt>四川省</dt>
        <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 colspan="3">1</td>
        <!--这里colspan，就告诉html解析的时候横向占3个格-->
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <!--这里colspan，就告诉html解析的竖向时候占3个格-->
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</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标签-->
<fieldset>
    <legend>登录</legend>
    <p>用户名:</p>
    <p>密码:</p>
</fieldset>

显示效果如下（自动加边框）：

参考博客：http://www.cnblogs.com/luotianshuai/p/5159449.html

posted @ 2017-06-20 23:21 我是一条最咸的咸鱼阅读(275) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Mr.Ares

很多人的付出都是浅尝辄止！

HTML基础

HTML

HTML文档

head部分

body部分

公告