前端一：走进HTML

一：HTML（HyperText Markup Language）介绍

超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
1）定义：
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，超文本标记语言  它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
 
2）基本组成：
 1 <!DOCTYPE html> <!--文档类型；后面参数意义是浏览器按什么标准来解释网页。-->
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8"><!-- html编码类型-->
 5     <title>Title</title> <!-- 网页标题显示-->
 6 </head>
 7 <body> <!-- 此部分是浏览器呈现的内容-->
 8 
 9 </body>
10 </html> <!-- 结束符-->

 介绍：

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

上例子是用html规范来解析html文档。

标签：

分自闭合标签和非自闭合标签。

如下部分可以分2部分：

head部分：

这部分可以定义：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述。

此部分存在的标签：

<base>,<link>,<meta>,<script>以及<tiltle>.

<title>标签。
各个标签的作用：
1、<title>标签中：
head部分中必须有<title>标签。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>运维一体化</title>
 6 </head>
 7 <body>
 8 
 9 </body>
10 </html>
 
作用：在网页上端显示标题。
效果：
2）<meta>标签：
作用：
<meta>元素提供有关页面的元信息（meta  information），比如定义关键字（keywords、）、刷新、跳转、等。
属性：
a)关键字（keywords）主要表示当前网页包含内容：
根据所有引擎的抓取原理，keywords的作用就是让搜索引擎知道自己网站的主要内容，从而让引擎能够快速判断出网站的类型和网站的主要内容，这样非常有利于关键词的排名。将自己的网站关键词放到keywords的方式可以叫做自报家门。
keywords：example：
 1 <!DOCTYPE html><!--在html规则中meta标签不需要闭合-->
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>运维一体化</title>
 6     <meta name="keywords" content="oldboy" >
 7 </head>
 8 <body>
 9 
10 </body>
11 </html>

 注意：在<meta>标签中并没有闭合。

1：在html规则中：<meta>标签不需要闭合。

2:在xhtml规则中：<meta><meta/>需要标签闭合。

b):自动刷新网页请求。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>运维一体化</title>
 6     <meta name="keywords" content="oldboy" >
 7     <meta http-equiv="Refresh" content="2">
 8 </head>
 9 <body>
10 
11 </body>
12 </html>

 

c):跳转：注意是在content里的包含url。如下代码的含义是访问页面2秒之后跳转到www.jd.com
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>运维一体化</title>
 6     <meta name="keywords" content="oldboy" >
 7     <!--<meta http-equiv="Refresh" content="2">-->
 8     <meta http-equiv="refresh" content="2; url=http://www.jd.com">
 9 </head>
10 <body>
11 
12 </body>
13 </html>
d)X-UA-Compatible(指定文档处理规则)：由于早期微软的xp等系统的统治地位导致微软（IE6）自己定义一套标准来解析网页，IE7的时候就舍弃一部分规则，到IE8的时候完全摒弃之前的自己标准，而使用现在我们使用的标准(w3c)解析,为了使IE8正确解析IE6和IE7的
代码需要在<meta>标签中添加X-UA-Compatible属性。
当 Internet Explorer 8 遇到包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"><!--IE7的兼容-->
 5     <meta http-equiv="x-ua-compatible" content="IE=IE=edge"><!--让IE用最新版本的内核处理网页-->
 6     <meta charset="UTF-8">
 7     <title>运维一体化</title>
 8     <meta name="keywords" content="oldboy" >
 9     <!--<meta http-equiv="Refresh" content="2">-->
10     <meta http-equiv="refresh" content="2; url=http://www.jd.com">
11 </head>
12 <body>
13 
14 </body>
15 </html>

 

位置：永远位于<head>标签内部。
 
<link>标签：
可以给网页标题栏附件添加图片：
code
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8"/>
 5     <title>运维一体化</title>
 6     <link rel="short icon" href="favicon.ico"/>##图片位置为当前位置。
 7 </head>
 8 <body>
 9 
10 </body>
11 </html>

 效果：

二：body部分：
常用标签：分为块级标签和行内标签。
行内标签：a,span,select 等。根据内容占用多少。
块级标签：div、hl、p等。单独占据一行。
 
单独的<div>和<span>标签是没有任何作用的。需要配合使用css渲染来使用。
 
a)当标签内需要输出特殊符号的时候，需要特定的字符来指定。
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html#在html中特定的符号需要特定字符来表示。
code：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">
 5     <meta http-equiv="x-ua-compatible" content="IE=IE=edge">
 6     <meta charset="UTF-8">
 7     <title>运维一体化</title>
 8     <meta name="keywords" content="oldboy" >
 9     <!--<meta http-equiv="Refresh" content="2">-->
10     <!--<meta http-equiv="refresh" content="2; url=http://www.jd.com">-->
11 </head>
12 <body>
13 <div> &amp;</div>
14 </body>
15 </html>
效果：
b)<p> 段落标签、<br>换行标签。
code：
1 <body>
2 <p>第一段</p>
3 <p>第二段</p>
4 </body>
5 </html>

 效果：

段与段之间有行距。

code：

1 <body>
2 <p>thi is my first<br/> web.</p>
3 </body>

 

效果：

c)a标签：1）在网页形成可以点击的连接。2）锚：可以形成目录结构点击跳转到对应的标签内容。
 
1：
code：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8 <a href="http://www.jd.com">京东</a>   <!--注意是http地址-->
 9 </body>
10 </html>

 该种方式配置完之后，出现连接会在原先的窗口打开连接，不会出现新的窗口打开。需要_bank属性，使其打开新的窗口。

 
 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8 <a href="http://www.jd.com" target="_blank">京东</a>
 9 </body>
10 </html>

 

2）:锚

语法：<a href="#idname"><a/><!--a标签通过href后面# 标签的idname来找到对应的div标签相同idname的标签，进行跳转。和<div>标签在跳转的时候没起的任何作用，实际上是a标签起的作用-->

       <div id="xxx"><div/>

对于每个标签的id值不允许重复、在同一个网页是唯一的。id属性可以不写。

code：

1 <body>
2 <a href="#k">the first chapter</a>
3 <a href="#n">the second chapter</a>
4 <a href="#m">the third chapter</a>
5 <div style="height: 7500px" id="k">the content of filst</div>
6 <div style="height: 7500px" id="n">the content of second</div>
7 <div style="height: 7100px" id="m">the content of third</div>
8 </body>

根据href中id的名字找到对应的div进行跳转。

效果：

d)<h>标签：标题

<h1>到<h6>默认从大到小。

code:

1 <body>
2 <h1>你好</h1>
3 <h2>你好</h2>
4 <h3>你好</h3>
5 <h4>你好</h4>
6 <h5>你好</h5>
7 <h6>你好</h6>
8 </body>

 

 效果：

但是可以用css来改变字体的大小。

code：

1 <body>
2 <h1>你好</h1>
3 <h2>你好</h2>
4 <h3>你好</h3>
5 <h4>你好</h4>
6 <h5>你好</h5>
7 <h6 style="font-size: 45px">你好</h6>
8 </body>

 

 效果：
 
 e)<div>块级标签：
为什么要用<div>标签呢？这是因为可以通过<div>标签进行样式的自定义。
比如有如下需求：
1 <body>
2 百度
3 阿里
4 腾讯
5 </body>

 百度字样的变为红色、阿里字样的变为绿色、腾讯变为红色。

这样我可以用<div>标签的stytel属性来定义我们字体的颜色。

code：

1 <body>
2 <div style="color: chartreuse">百度
3 <div style="color: crimson">阿里</div>
4 <div>腾讯</div>
5     </div>
6 </body>

 

效果：
注意：在<div>标签中套子<div>标签的时候，如果子标签中没有定义样式，将会继承父<div>标签的样子。如果子<div>标签定义了样式，将不会使用父<div>标签的样式，而是使用自己定义的样式。
同样适用与<span>标签。
code：
1 <body>
2 <span style="color:red;">百度
3 <span style="color:greenyellow;">阿里</span>
4 <span >谷歌</span>
5     </span>
6 </body>

效果：

各个标签的对比：

<h><p><br>:id,

<a>:id  href target

<div><span>:id style

重要标签：
<input>标签:用于提交数据!!!!
类型：文本、密码、单选框，文件。
1：文本和密码类型：
code:
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8 <p>username: <input type="text"/></p>
 9 <p>password:<input type="password"></p>
10 </body>
11 </html>

 

效果：
2）raido 单选框：
1 <body>
2 <p>username: <input type="text"/></p>
3 <p>password:<input type="password"/></p>
4 <p> 性别：<br/>男 <input name="a" type="radio"/> </p> <!--name相同达到互斥-->
5 <p>女 <input name="a" type="radio"/></p>
6 </body>

 

效果：
 
3)checkbox多选框（复选框）：
code：
1 <p>basketball <input type="checkbox"></p>
2 <p>swimming   <input type="checkbox"></p>
3 <p>pingbang   <input type="checkbox"></p>
4 <p>football   <input type="checkbox"></p>
5 </body>

 

效果：
4)file:上传文件：
code：
1  <p><br/><input type="file" /><p/>

 

选择文件进行上传。
效果：
 
5)<select >标签：
下拉标签：
code：
1 <p>city:
2     <select>
3         <option>上海</option>
4         <option>北京</option>
5         <option>大连</option>
6     </select>

 效果：

6)多级下拉菜单：

code：

 1     <select>
 2         <option>上海</option>
 3         <option>北京</option>
 4         <option>大连</option>
 5     </select>
 6     <select>
 7         <option>上海</option>
 8         <option>北京</option>
 9         <option>大连</option>
10     </select>
11     <select>
12         <option>上海</option>
13         <option>北京</option>
14         <option>大连</option>
15     </select>

 

效果：

这个只是模拟个多级菜单，我们要求的是动态选择一个地区其他地区自动生成。

7)对菜单的内容进行分组：分组的名字不可以进行选择。

code：

 1     <select>
 2         <optgroup label="UK"></optgroup>
 3         <option>上海</option>
 4         <option>北京</option>
 5         <option>大连</option>
 6     </select>
 7 
 8     <select>
 9         <optgroup label="USA"></optgroup>
10         <option>上海</option>
11         <option>北京</option>
12         <option>大连</option>
13     </select>
14 
15     <select>
16         <optgroup label="China"></optgroup>
17         <option>上海</option>
18         <option>北京</option>
19         <option>大连</option>
20     </select>

 

效果：
8）将菜单的内容展示出来：
code：
1     <select multiple size="2"><!--菜单展示，size表示显示几个内容-->
2         <option>上海</option>
3         <option>北京</option>
4         <option>大连</option>
5         <option>大连</option>
6         <option>大连</option>
7     </select>

 

上下拉
 
9）<textarea> 备注标签：
code：
1 <p style="font-size: 14px">备注：<textarea ></textarea> <p/>

 效果：

10)<input>标签的submit（提交当前表单）、button（按钮）、reset（重置当前表单）。需要和<form>表单一起使用。

code：

1     <p><input type="submit" value="提交">
2     <input type="button" value="按钮">
3     <input type="reset" value="重置"><p/>

效果：

没有形式表单的时候没有效果，当形成表单的时候就会有效果.

code:

 1 <form>
 2 <p>username: <input type="text"/></p>
 3 <p>password:<input type="password"/></p>
 4 <p> 性别：<br/>男 <input name="a" type="radio"/> </p>
 5 <p>女 <input name="a" type="radio"/></p>
 6 <p>favorite:</p>
 7 <p>basketball <input type="checkbox">
 8 swimming   <input type="checkbox">
 9 pingbang   <input type="checkbox">
10 football   <input type="checkbox"></p>
11 <p>city:
12 
13     <select>
14         <optgroup label="UK"></optgroup>
15         <option>上海</option>
16         <option>北京</option>
17         <option>大连</option>
18     </select>
19 
20     <select>
21         <optgroup label="USA"></optgroup>
22         <option>上海</option>
23         <option>北京</option>
24         <option>大连</option>
25     </select>
26 
27     <select multiple size="2">
28         <option>上海</option>
29         <option>北京</option>
30         <option>大连</option>
31         <option>大连</option>
32         <option>大连</option>
33     </select>
34     <p><br/><input type="file" /><p/>
35     <p style="font-size: 14px">备注：<textarea ></textarea> <p/>
36     <p><input type="submit" value="提交">
37     <input type="button" value="按钮">
38     <input type="reset" value="重置"><p/>
39     </form>

 

整体效果：
11）邮箱地址：该功能不建议使用，因为该功能是浏览器本身实现的，一点都是自己实现这个功能：
code：
1 <p>email:<input type="email"></p>

 

提交的时候，会提示邮箱地址无效。
 三：提交数据
 通过页面的输入和点击来传输我们的数据以表单形式给后台提交数据。后台提交数据格式{key:value}形式进行提交。
表单的提交分2类：
1：页面输入的提交：通过定义name属性来进行标识：{name:用户输入值}
2：页面通过选择框和点击下拉框。用value属性进行标识{name:value}
code：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8 <form action="http:///xxxx" enctype="multipart/form-data" method="get">
 9     <p>username: <input type="text" name="user"/></p>
10     <p>password: <input type="password" name="pwd"></p>
11     <p>性别：</p>
12     <p>男 <input type="radio" name="a" value="1"></p>
13     <p>女 <input type="radio" name="a" value="0"></p>
14     <p>fav:</p>
15     <p>篮球 <input name="fav" type="checkbox" value="1"></p>
16     <p>足球 <input name="fav" type="checkbox" value="3"></p>
17     <p>台球 <input name="fav" type="checkbox" value="2"></p>
18     <p><input type="file" name="file"/></p>
19     <p>city:</p>
20     <select name="city">
21         <option value="1">上海</option><!-- 后台有对应的value对应避免提交过长字符串。可以节省空间和时间-->
22         <option value="2">大连</option>
23         <option value="3">北京</option>
24     </select>
25     <p>备注： <textarea name="beizhu"></textarea></p>
26     <p> <input type="submit" value="提交"></p>
27 </form>
28 </body>
29 </html>

 

效果：
不常用标签：
<ul>标签
code：
1 <body>
2 <ul>
3     <li>a</li>
4     <li>b</li>
5     <li>c</li>
6 </ul>
7 </body>

 效果：

<ol>标签

code：

1 <ol>
2     <li>a</li>
3     <li>b</li>
4     <li>c</li>
5 </ol>

 

效果：
<dl>标签：
code：
1 <dl>
2     <dt>A</dt><!--标题-->
3     <dd>a</dd><!--内容-->
4     <dd>a</dd>
5     <dt>A</dt>
6     <dd>a</dd>
7 </dl>

 效果：

<table>表格标签：
 1 <table border="1"><!--border表示画表格 thead和tbody可以省略。-->
 2     <thead><!--标题-->
 3     <tr><!--表示一行-->
 4         <th>first</th><!--th表示加粗-->
 5         <th>second</th>
 6         <th>third</th>
 7     </tr>
 8     </thead>
 9 
10     <tbody><!--表示内容-->
11     <tr>
12         <td>a</td>
13         <td>d</td>
14         <td>b</td>
15     </tr>
16 
17     </tbody>
18 </table>

 效果：

合并单元格:

 1 <table border="1"><!--border表示画表格 thead和tbody可以省略。-->
 2     <thead><!--标题-->
 3     <tr><!--表示一行-->
 4         <th colspan="2">first</th><!--colspan表示该标题占据2个标题2个位置-->
 5         <th>third</th><!--去掉一个标题栏-->
 6     </tr>
 7     </thead>
 8 
 9     <tbody><!--表示内容-->
10     <tr>
11         <td rowspan="2">a</td><!--表示行占据2个行-->
12         <td>d</td>
13         <td>b</td>
14     </tr>    <tr>
15         <td>d</td><!--去掉下面的行-->
16         <td>b</td>
17     </tr>
18     </tbody>
19 </table>

 

效果:
<iframe>标签：
code：
1 <body>
2 京东<br/><iframe width="80%" height="2000px" src="http://www.jd.com"></iframe>
3 </body>

 效果：

 

posted @ 2016-08-08 18:24  evil_liu  阅读(394)  评论(0)    收藏  举报