学习了一天,总结巩固下自己收获。
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标准。