html基础和结构
1. html是什么？
［超文本标记语言］HTML(hypertext markup language),是一种用来设计网页的标记语言，用该语言编写的文件，以.html或者.htm为后缀。它是由w3c定义的一套标记，用于设计网页，并由浏览器解析执行，生成相应的界面。
2. html文件的基本结构
Html的基本结构分为两大部分：头（head）和体（body）。
2.1 <head></head>和<body></body>
1） html头标记，写描述页面的数据
2） html体标记，与页面显示的内容有关系
<!--根标记叫html-->
<html>
<!--head描述页面的数据-->
<head>
</head>
<!--body存放与页面显示的内容有关系-->
<body>
</body>
</html>
2.2 <head>中的标记
2.2.1 <title>标题</title>
<title>表示标题
例：
1 <html> 2 <!--head描述页面的数据 --> 3 <head> 4 <title>标题<title> 5 </head> 6 <!--body存放与页面显示的内容有关系--> 7 <body> 8 </body> 9 </html>
2.2.2 <meta>
1） 主要用于设置消息头
2） 注意不要这样写（有的浏览器不见容）
<meta></meta> (不推荐)
<meta/> (不推荐)
3) 消息头：
浏览器访问服务器时，服务器会发送的一些键值对
<meta http-equiv="content-type" content="text/html;charset=utf-8">
表示浏览器读到的是一个html格式文件，字符编码是utf-8
常用写法1
1 <html> 2 <!--head描述页面的数据--> 3 <head> 4 <!--http-equiv属性：设置消息头 5 content 属性：设置消息头的值--> 6 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 7 </head> 8 <!--body存放与页面显示的内容有关系--> 9 <body> 10 </body> 11 </html>
常用写法2
1 <html> 2 <!--head描述页面的数据--> 3 <head> 4 <!--refresh:刷新，content:刷新的频率，每隔一段时间(如3秒)重新加载页面--> 5 <meta http-equiv="refresh" content="3"> 6 </head> 7 <!--body存放与页面显示的内容有关系--> 8 <body> 9 </body> 10 </html>
例子：3秒后跳转到www.baidu.com
<html> <!--head描述页面的数据--> <head> <meta http-equiv="refresh" content="3;url='http://www.baidu.com'"> </head> <!--body存放与页面显示的内容有关系--> <body> </body> </html>
2.2.3 <script> 引入脚本
1 <html> 2 <!--描述页面的数据--> 3 <head> 4 <!--引入脚本--> 5 <script src="c1.js"></script> 6 7 <!--直接写脚本--> 8 <script> 9 //脚本代码 10 body{font-size:12px;} 11 </script> 12 </head> 13 <body></body> 14 </html>
2.3 <body>中的标签
1 <html> 2 <head></head> 3 <body> 4 <!--1.连接--> 5 <a href=""></a> 6 <!--2.表格--> 7 <table> 8 <!--3.表单--> 9 <form> 10 <!--4.列表--> 11 <ul>,<ol> 12 <!--5.窗口划分--> 13 <iframe>,<frameset> 14 </body> 15 </html>
2.4块标记和行标记
a.块标记,（另起一行），常见的有：
div,h1,h2,h3..h6,img,form,ul,li,table
b,行内标记(不用另起一行)
<a>,<span>,<strong>,<input>
例子：
1 <html> 2 <head></head> 3 <body> 4 <div>hello1</div> 5 <div>hello2</div> 6 <span>hello3</span> 7 <span>hello4</span> 8 </body> 9 </html>
hello1和hello2会在2行显示
hello3和hello4会显示在一行