前端一:走进HTML
一:HTML(HyperText Markup Language)介绍
“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
1)定义:
超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,超文本标记语言 它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
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 <!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>
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>
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>
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>
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>
效果:
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> &</div> 14 </body> 15 </html>
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>
效果:
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>
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>
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
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>
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>
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>
1 <p><br/><input type="file" /><p/>
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>
1 <select multiple size="2"><!--菜单展示,size表示显示几个内容--> 2 <option>上海</option> 3 <option>北京</option> 4 <option>大连</option> 5 <option>大连</option> 6 <option>大连</option> 7 </select>
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>
1 <p>email:<input type="email"></p>
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>
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>
1 <dl> 2 <dt>A</dt><!--标题--> 3 <dd>a</dd><!--内容--> 4 <dd>a</dd> 5 <dt>A</dt> 6 <dd>a</dd> 7 </dl>
效果:
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>
1 <body> 2 京东<br/><iframe width="80%" height="2000px" src="http://www.jd.com"></iframe> 3 </body>
效果: