html学习笔记一
学习了一天，总结巩固下自己收获。
html是超文本标记语言，而不是编程语言。
1：html结构
包含html标签，head标签，title标签，body标签。
1 <html> 2 <head> 3 <title>This is my first page!</title> 4 </head> 5 <body> 6 content. 7 </body> 8 </html>
2:html语法
第一点：标签是有左尖括号<和右尖括号>组成，<标签>
第二点：开始标签<标签> 和 结束标签</标签>
第三点：标签正确嵌套。
第四点：标签元素和属性为了遵循w3c标准，用小写。
3：标签
1）head标签（包含title标签，style标签，script标签，link标签，meta标签，base标签）
title标签：语义是文档标题
意义：
用于浏览器工具栏标题显示
页面添加到收藏夹标题显示
搜索引擎搜索页面标题显示
1 <!doctype html> 2 <html> 3 <head> 4 <title>标题标签</title> 5 </head> 6 <body> 7 <h1>Hello world!</h1> 8 </body> 9 </html>
style标签：语义内嵌样式表
1 <!doctype html> 2 <html> 3 <head> 4 <title>内嵌样式表</title> 5 <style type="text/css"> 6 h1{color:red;} 7 </style> 8 </head> 9 <body> 10 <h1>Hello world!</h1> 11 </body> 12 </html>
script标签：语义是插入js代码
1 <!doctype html> 2 <html> 3 <head> 4 <title>内嵌样式表</title> 5 <style type="text/css"> 6 h1{color:red;} 7 </style> 8 <script type="text/javascript"> 9 document.getElementById("hid").innerHTML="JAVASCRIPT"; 10 </script> 11 </head> 12 <body> 13 <h1 id=“hid”>Hello world!</h1> 14 </body> 15 </html>
link标签：语义是插入外部样式表
1 <!doctype html> 2 <html> 3 <head> 4 <title>外部样式表</title> 5 <link rel="stylesheet" href="style.css" type="text/css"> 6 </head> 7 <body> 8 <h1>Hello world!</h1> 9 </body> 10 </html>
meta标签：包含一些元信息，例如关键字，描述，作者，文档编码等
1 <!doctype html> 2 <html> 3 <head> 4 <title>meta</title> 5 <meta name="keyword" content="html,css"/> 6 <meta name="description" content="欢迎回到html基础"/> 7 </head> 8 <body> 9 <h1>Hello world!</h1> 10 </body> 11 </html>
2）body标签（承载页面内容）
div标签（语义用于分离独立的逻辑块）
1 <!doctype html> 2 <html> 3 <head> 4 <title>div</title> 5 </head> 6 <body> 7 <div>top</div> 8 <div>content</div> 9 <div>footer</div> 10 </body> 11 </html>
标题标签（h1~h6）
h1字体最大，h6最小。语义是用于文本的标题。
1 <!doctype html> 2 <html> 3 <head> 4 <title>标题标签</title> 5 </head> 6 <body> 7 <h1>h1</h1> 8 <h2>h2</h2> 9 <h3>h3</h3> 10 <h4>h4</h4> 11 <h5>h5</h5> 12 <h6>h6</h6> 13 </body> 14 </html>
段落标签（p）
用于描述文档的段落，段落标签前后换行显示。
1 <!doctype html> 2 <html> 3 <head> 4 <title>段落标签</title> 5 </head> 6 <body> 7 <p>我是段落</p> 8 </body> 9 </html>
超链接标签（a）：用于从一个页面向另一个页面跳转
1 <!doctype html> 2 <html> 3 <head> 4 <title>超链接标签</title> 5 </head> 6 <body> 7 <a href="http://www.baidu.com" title="我是超链接"> 8 </body> 9 </html>
图像标签（img）：用于图像的显示。
1 <!doctype html> 2 <html> 3 <head> 4 <title>img标签</title> 5 </head> 6 <body> 7 <img src="logo.jpg" alt="my image" title="my image"/> 8 </body> 9 </html>
列表标签：有序列表（ol）和无序列表（ul）
1 <html> 2 <head> 3 <title>列表</title> 4 </head> 5 <body> 6 <ol>有序列表 7 <li>html</li> 8 <li>css</li> 9 <li>js</li> 10 </ol> 11 <ul>无序列表 12 <li>html</li> 13 <li>css</li> 14 <li>js</li> 15 </ul> 16 </body> 17 </html>
表格标签
1 <!doctype html> 2 <html> 3 <head> 4 <title>table标签</title> 5 </head> 6 <body> 7 <table> 8 <caption>表格标题</caption> 9 <tbody> 10 <tr><th>表格头</th></tr> 11 <tr><td>单元格</td></tr> 12 </tbody> 13 </table> 14 </body> 15 </html>
表单标签
1 1 <!doctype html> 2 2 <html> 3 3 <head> 4 4 <title>form标签</title> 5 5 </head> 6 6 <body> 7 7 <form method="post" action="form.php"> 8 账号<input type="text" name="name"/> 9 密码<input type="password" name="pass"/> 10 女<input type="radio" name="sex" value="girl"/> 11 男<input type="radio" name="sex" value="boy"/> 12 跑步<input type="checkbox" name="sport" value="running"/> 13 游戏<input type="checkbox" name="sport" value="swimming"/> 14 <input type="submit" name="btnSubmit" value="提交"/> 15 </form> 16 14 </body> 17 15 </html>
总结：html基础是了解标签的正确使用，所编写的代码要符合语义化，w3c标准。
