HTML基础
Fundamentals of HTML
<head>:html tag的第一大项，里面用来放<meta><title><link><script><style>等向浏览器描述文件用。
<head> <meta charset="UTF-8" /> <title> HTML Meta Information </title> <link rel="stylesheet" type="text/css" href="main.css" /> </head>
<meta>:Described the document to the broswer for search engine，和其他的自动程序描述。data about data, 不显示在网页结果中，控制网页的一些运行特性.
<meta charset="UTF-8" />
<meta http-equiv="refresh" content"=-; url=http://bw.org/" />
//告诉浏览器，先load本网页，3秒后刷新到新网页
<title>:设置网页的标题，一个网页只能有一个标题
<title> HTML Meta Information </title>
<link>:用来表示与其他文档的联系，一般用于连接外部css，如下的css对所有元素进行reset，然后对基本元素统一设置，保证各个浏览器都显示一样。
<link rel="stylesheet" type="text/css" href="main.css" />
View Code
1 /* main.css by Bill Weinman http://bw.org/contact 2 v 1.0 - 2012-05-20 3 */ 4 5 /* reset margins */ 6 html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, 7 blockquote, pre, form, label, legend, table, caption, tbody, tfoot, thead, 8 tr, th, td, article, aside, canvas, details, embed, figure, figcaption, 9 footer, header, hgroup, menu, nav, output, section, summary, audio, video { 10 margin: 0; 11 padding: 0; 12 border: 0; 13 font-size: 100%; 14 font: inherit; 15 vertical-align: baseline; 16 } 17 18 /* setup body */ 19 body, p { 20 line-height: 1; 21 font-family: Georgia, serif; 22 font-size: 16pt; 23 } 24 25 /* reasonable starting margins */ 26 p, h1, h2, h3, h4, h5, h6, ol, ul, li { margin: 12pt; } 27 li { margin-left: 2em; } 28 29 /* setup headings */ 30 h1, h2, h3, h4, h5, h6 { 31 line-height: 1; 32 font-family: Tahoma, Verdana, sans-serif; 33 font-weight: bold; 34 } 35 36 h1 { font-size: 200%; } 37 h2 { font-size: 180%; } 38 h3 { font-size: 160%; } 39 h4 { font-size: 140%; } 40 h5 { font-size: 120%; } 41 h6 { font-size: 100%; } 42 43 /* setup pre */ 44 pre { font-family: consolas, monospace; }
有的时候我们想用外部的css对网页的内容添加样式的同时，再针对个别细节处进行样式设置，
我们可以在原html文件里保留外部连接css，内部增加一些属性的css。内部同名的设置会覆盖外部的css设置。
View Code
1 <!DOCTYPE html> 2 <!-- style.html by Bill Weinman http://bw.org/contact/ --> 3 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8" /> 7 <title> 8 Style Example 9 </title> 10 <link rel="stylesheet" type="text/css" href="main.css" /> 11 <style> 12 p{line-height:1.2}; //覆盖已有外部css设置 13 p.first:first-line{font-variant: small-caps} //p.first 代表p有class是first的段落，first-line代表段落的第一行 14 </style> 15 </head> 16 <body> 17 18 <h1> 19 Style Example 20 </h1> 21 22 <p class=“first”> 23 l enim. Nulla auctor congue accumsan.... 24 s;kadja;sd 25 a;kad;l 26 </p> 27 <p> 28 a nibh massa vel erat.. 29 </p> 30 <p> 31 ...... 32 </p> 33 34 </body> 35 </html>
<script>:可以外部连接，也可以内部，主要是id的使用，利用getElementById得到一个元素并用javascript的一个变量代替，这样就可以参加逻辑运算。
View Code
1 <html> 2 <head> 3 <title> 4 Javascript Example 5 </title> 6 <link rel="stylesheet" type="text/css" href="main.css" /> 7 <script type="text/javascript"> 8 function init() { 9 var n = 0; 10 e = document.getElementById("output"); //利用id得到span元素 11 setInterval(function() { e.innerHTML = ++n; }, 1000); 12 //e.innerHTML得到内部html的attribute 13 //setInterval设置间隔 14 15 } 16 window.onload = init; 17 </script> 18 19 //...或者用外部javascript替代 20 <script type="text/javascript" src="count.js"> </script> //对于JS,firefox不能没有close Tag tag 21 ...// 22 23 </head> 24 <body> 25 26 <h1> 27 Javascript Example 28 </h1> 29 30 <h2> 31 The count is: <span id="output">0</span> //设置id用来给javascript叫 32 </h2> 33 34 </body> 35 </html>
Images
<img>:inline level element
src:这里是relative path
width/height：一般我都为每一个img设置尺寸，这样服务器load page的时候可以先按照尺寸决定img的位置，然后再慢慢load img。
alt：page上img的地方被alt的字段取代（broswer不能load img时或者等待时间太长）
title：当mouse hover在图片上时候显示的tooltip
<img src="images/scissors.png" width="240" height="240" alt="Picture of scissors" title="Running with these is not recommended." />
1：如何设置floatting？
align/css：增加float attribut后img变成 block level element
<img src="images/scissors.png" width="240" height="240" alt="Picture of scissors" title="Running with these is not recommended." align="left"/>
//html5中用css替换align
style="float: left; margin-right: 10px; magrin-bottom: 5px;
border： solid black 1px; padding: 2px"/>
<--! css复用重写-->
View Code
1 <html lang='en'> 2 <head> 3 <meta charset="UTF-8" /> 4 <title> 5 HTML Images 6 </title> 7 <style> 8 .float-img 9 { 10 float: left; 11 margin-right: 10px; 12 margin-botto: 5px; 13 border: sold black 1px; 14 padding: 2px; 15 } 16 </style> 17 </head> 18 <body> 19 20 <h1> 21 HTML Images 22 </h1> 23 24 <img src="images/scissors.png" width="240" height="240" 25 alt="Picture of scissors" 26 title="Running with these is not recommended." 27 class="float-img"/>
2：如何解决两张图片都float一起
如果两个图片都用一个float：right，图片2也会和图片1跌在右边
clear:使用clear后，图片2 先clear，clear后按其自身行float：right