HTML入门--基础标签篇(1)
前言：个人的学习习惯，学过的知识如果没有总结总觉得没有掌握，刚好周末回顾总结下基础知识。
第一部分：HTML初始
1.什么是HTML？
HTML指的是超文本标记语言(Hyper Text Markup Language)，是由一套标记标签组成的标记语言，用于描述、构造网页。
2.HTML元素？
HTML元素指从开始标签到结束标签的所有代码，开始标签称为开放标签，结束标签称为闭合标签。
元素语法：
1>以开始标签起始，以结束标签终止，大多数可以用于属性。
2>空元素在开始标签中进行关闭。
3>HTML元素之间可以进行嵌套，网页就是由嵌套的元素所组成。
4>HTML元素不区分大小写，但是标准中推荐使用小写。
<!-- 开始标签和结束标签都有 --> <p>HTML元素的基本语法，用于开始标签和结束标签的双标签</p> <!-- 用于属性的标签 --> <a href="http://www.baidu.com"></a> <!-- 空元素在开始标签就结束 --> <br/>
第二部分：HTML基础元素
1.标题标签(h*)
HTML中标题是通过<h1> - <h6>标签进行定义的，h1到h6标题依次从大到小。
特点：标题标签在HTML中属于块级元素，会单独的占据一行。
<!-- 标题标签时块元素，会独占一行 --> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
注意：
标题是语义化标签，正确用法只用于标题，不要仅仅为了产生粗体或大号文本而使用。
2.水平线标签(hr)
<hr/>标签在HTML页面中创建水平线，可用于分隔内容。
<!-- hr水平线标签用于分隔内容 --> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
3.段落标签(p)
段落可以把HTML文档分割为若干段落，通过<p>标签定义。
p段落也是块级元素，会独占一行，浏览器会在段落的前后添加空行。
<!-- p段落标签也是块级元素，会独占一行 --> <p>This is a paragraph</p> <p>This is another paragraph</p>
4.换行标签(<br/>)
在段落内部，不产生新段落的情况下进行换行，使用<br/>
<!-- br在段落内对内容进行换行 --> <p>This is<br />a para<br />graph with line breaks</p>
注意：当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或/空行都会被当做一个空格。
5.超链接(a)
HTML使用超链接与网络上的另一个文档相连，点击链接可以从一个页面跳到另一个页面。
超链接可以是一个字、或一组词，也可以是一副图像，点击可以跳转新页面也可以跳转到当前页面的其他部分。
举例：跳转至新页面/跳转当前页面某部分
<!-- 跳转到新页面，百度首页 --> <a href="http://www.baidu.com">百度</a> <br> <!-- a标签有id属性 --> <a id='top'>顶部</a> <br/> 回到顶部 <br/> 回到顶部 <br/> <!-- href属性通过#top,可以定位到同页面id为top的a标签 --> <a href="#top">回到顶部</a>
超链接为图像：
<a href="index2.html"> <img border="0" src="/img/logo.gif" /> </a>
举例：不同页面间锚定位
先创建index2.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <a id="index2">index2页面上的锚点</a> </body> </html>
跨页面的锚点跳转：点击a超链接跳转至index2页面。
<body> <a href="index2.html#index2">跳转至index2.html</a> </body>
a标签实现发短信、打电话、发邮件、定位等功能
<div id="my"> <!-- 实现打电话 --> <a href="tel:xxxxxxxxx">xxxxxxxxxxxx</a> <!-- 实现发邮件功能 --> <a href="mailto:c1586@qq.com?subject=TestObject">c6088@qq.com</a> <!-- 实现发短信功能 --> <a href="sms:10086?body=message_body">给 10086 发短信</a> <!-- 实现定位功能 --> <a href="geopoint:116.281469,39.866035">我的位置</a> </div>
a标签的target属性：
target属性定义被链接的文档在何处显示。
取值：_blank在--新窗口打开，_self--在当前窗口打开，_top--(跳出框架)。
注意：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。
6.图像标签(<img>)
通过使用HTML中的<img>标签在文档中显示图像，<img>是空标签，只包含属性没有闭合标签，使用src属性显示图像。
<div id="testImg"> <!-- src表示图像的存储路径，alt表示昂src图片找不到时的提示信息 --> <img src="./img/cat.jpg" alt="当前图片丢失"> </div>
注意：假如 HTML 文件包含十个图像，为了正确显示这个页面，需要加载 11 个文件，也就意味着需要发送11个请求，增加了服务器的压力，所以要'慎用图片'。
图像映射：<map><area></area></map>
我们经常会给图片绑定超链接，方便用户欣赏大图或者跳转页面。HTML有个图像映射的功能，可以在一张大图的不同区域绑定链接，让用户可以有更新奇的体验。
示例：详细参照--http://www.w3school.com.cn/tags/tag_map.asp
<body> <!-- img中需要使用usemap属性关联映射map元素 --> <img src="./img/bigDog.jpg" usemap="#umap" alt="猫和狗" /> <!-- map元素中需要设置id表示，以便img标签引用 --> <map id="umap" name="umap"> <!-- area表示在img图像中这是不同的区域。 --> <!-- shape表示区域的形状，coords表示区域的坐标位置，href表示该区域的跳转的资源,可以是图片也可以是页面 --> <area shape="rect" coords="220,180,420,400" href="./img/smlDog1.jpg" alt="狗1" target="_blank" /> <area shape="circle" coords="685,340,130" href="./img/smlDog2.jpg" alt="狗2" target="_blank" /> </map> </body>
7.表格及其子元素
表格由table标签定义，行由<tr>定义，单元格由<td>定义。主要用来格式化显示数据。
表格边框、标题、内外边距：border/cellpadding/cellspacing
<body> <!-- border为表格及单元格都添加了边框，通过cellpadding可以设置单元格的内边距，cellspacing设置单元格的外边距 --> <table border="1" cellpadding='10' cellspacing='10'> <!-- th表示表格表头 --> <tr> <th>语文</th> <th>数学</th> </tr> <tr> <td>100</td> <td>96</td> </tr> <tr> <td>87</td> <td>100</td> </tr> </table> </body>
跨行、跨列：rowspan/colspan
<!-- colspan表示合并多列 --> <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <!-- rowspan表示合并多行 --> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
8.html中的列表
HTML支持有序、无序、自定义列表，主要用来显示列表格式的数据。
无序列表：
<!-- 默认样式是大黑点，可以使用type属性设置样式 type取值：square/disc/circle等 --> <ul type='disc'> <li>篮球</li> <li>羽毛球</li> <li>游泳</li> <li>跑步</li> </ul>
有序列表：
<!-- 默认样式是数字，可以使用type设置样式 type: A/a/I/i --> <ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol>
自定义列表：
<h2>一个定义列表：</h2> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
注意：ul/ol直接子元素只能是li标签，li标签中可以嵌套其他元素标签。
9.html中的表单元素
HTML表单主要用于收集不同类型的用户输入，由form及不同类型的input元素组成。
input常用元素：
text、password、radio、checkbox、button、reset、submit
<form action="#"> 用户名：<input type="text"> <br/> 密码：<input type="password"> <br/> <!-- 注意：radio类型必须添加相同的name属性，这样才能实现单选功能 --> 性别： <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 <br/> 爱好： <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="swim">游泳 <input type="checkbox" name="hobby" value="volleyball">排球 <br/> <!-- submit只会提交带有name属性的input元素的值 --> <input type="submit" value="submit"> </form>
注意：上例中单选按钮需要添加相同的name属性，而且其中的value是才是真正提交的值，submit只会提交带有name属性的input值。
form元素及属性：更多新的属性可以参考我的html5部分。
<!-- action：表示数据提交给后台的路径 method：表示数据的提交方式，有get和post两种取值,默认是(get) target：表示提交操作的打开方式 accept-charset：规定字符编码方式 ectype：规定被提交数据编码，默认是(url-encodeed) autocomplete：设置是否开启表单的自动补全 novalidate：设置表单提交时是否进行验证。 --> <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> input elements </form>
fieldset元素：可以使用fieldset元素对form表单元素进行组合格式化
<form action="#"> <fieldset style="width: 30%;"> <legend>用户信息统计表</legend> 用户名：<input type="text"> <br/> 密码：<input type="password"> <br/> <!-- 注意：radio类型必须添加相同的name属性，这样才能实现单选功能 --> 性别： <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 <br/> 爱好： <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="swim">游泳 <input type="checkbox" name="hobby" value="volleyball">排球 <br/> <!-- submit只会提交带有name属性的input元素的值 --> <input type="submit" value="submit"> </fieldset> </form>
效果图：
表单其他元素：select、textarea、button
<form action="#"> <!-- select设置下拉列表框，共用户选择，value才是提交的值 --> <select name="籍贯"> <option value="陕西">定西</option> <option value="陕西">热河</option> <option value="陕西">南京路</option> <option value="陕西">郑州</option> </select> <!-- textarea设置文本框，cols表示列数，rows表示行数 --> <textarea name="introdution" cols="30" rows="10"> this is a introduction about textarea。 </textarea> <!-- button设置页面上的点击按钮，类似input中type=button --> <button>提交</button> </form>
总结：这节主要回顾下HTML中常用的标签。
