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

clear: <p> break lines around an img

View Code 
 1 <!DOCTYPE html>
 2 <!-- image-float.html by Bill Weinman http://bw.org/contact/ -->
 3 
 4 <html lang='en'>
 5 <head>
 6     <meta charset="UTF-8" /> 
 7     <title>
 8         HTML Images
 9     </title>
10     <style>
11         img.float-right {
12             float: right;
13             margin-left: 10px;
14             margin-bottom: 5px;
15             border: solid black 1px;
16             padding: 2px;
17         }
18         .clear { clear: both; }
19     </style>
20 </head>
21 <body>
22 
23 <h1>
24     HTML Images
25 </h1>
26 
27 <img src="images/scissors.png" width="240" height="240" 
28     alt="Picture of scissors" TITLE="Running with these is not recommended."
29     class="float-right" />
30 <p>
31     This is a pair of scissors. Do not run with this. 
32     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
33     faucibus interdum neque vitae tincidunt.
34 </p>
35 <p class="clear">
36     Ut non ante a eros sodales
37     dapibus a in arcu. Aenean vulputate venenatis dui, eget pellentesque
38     est consectetur id. Curabitur sed magna lacus, et laoreet urna.
39     Vivamus ut adipiscing turpis.
40 </p>
41 <p>
42     Vivamus in arcu est, quis malesuada
43     metus. Cras pharetra, erat sit amet tincidunt imperdiet, erat sem
44     iaculis libero, at mollis elit arcu a magna. Vestibulum enim sapien,
45     consequat nec tincidunt id, rutrum eget magna.
46 </p>
47 
48 </body>
49 </html>

Align图片：

css float：

View Code 
 1 <!DOCTYPE html>
 2 <!--
 3     cutapart-html5.html by Bill Weinman http://bw.org/contact/
 4     An HTML5-compatible (tables) version of the cutapart.html example from creative html design
 5 -->
 6 
 7 <html lang='en'>
 8 <head>
 9     <meta charset="UTF-8" /> 
10     <title>
11         Cutapart Images
12     </title>
13     <style>
14         .cutapart .crow { clear: both; }
15         .cutapart img {
16             display: block;
17             float: left;
18         }
19         .clear{
20             clear: both;    //reset all
21             margin:0;
22             padding:0;
23             line-height:0;
24         }
25     </style>
26 </head>
27 <body>
28 
29 <h1>
30     Cutapart Images
31 </h1>
32 
33 <div class="cutapart">
34     <div class="crow">
35         <img src="images/k01.jpg" width="100" height="100" />
36         <img src="images/k02.jpg" width="100" height="100" />
37         <img src="images/k03.jpg" width="100" height="100" />
38         <img src="images/k04.jpg" width="100" height="100" />
39     </div>
40     <div class="crow">
41         <img src="images/k05.jpg" width="100" height="100" />
42         <img src="images/k06.jpg" width="100" height="100" />
43         <img src="images/k07.jpg" width="100" height="100" />
44         <img src="images/k08.jpg" width="100" height="100" />
45     </div>
46     <div class="crow">
47         <img src="images/k09.jpg" width="100" height="100" />
48         <img src="images/k10.jpg" width="100" height="100" />
49         <img src="images/k11.jpg" width="100" height="100" />
50         <img src="images/k12.jpg" width="100" height="100" />
51     </div>
52     <p class="clear" />    //for break float affect to next content
53 </div>
54 <p>Been block by class="clear", this P start from new line</p>
55 </body>
56 </html>

imagemap：用来在图片内部建立hotspot，hotspot的trigger shape可以任意定义，连接其他网页

View Code 
 1 <img src="images/scissors-imagemap.png" width="240" height="240" 
 2     alt="Picture of scissors" TITLE="Running with these is not recommended." 
 3     usemap="#scissorsmap" />　　//用#加name对应下面的map
 4 
 5 <map name="scissorsmap">
 6 <area shape="rect" coords="0, 0, 50, 50" alt="rect" title="rectangular area" href="rectangle.htm" />
 7 <area shape="circle" coords="150, 25, 25" alt="circle" title="circular area" href="circle.htm" />
 8 //href连接另外一个网页
 9 
10 <area shape="poly"
11     coords="13, 93, 101, 114, 148, 106, 193, 88, 233, 111, 220, 129,
12         140, 134, 191, 163, 203, 187, 193, 202, 173, 208, 148, 181, 99,
13         137, 5, 130, 68, 120"
14     alt="poly" title="poly area for scissors" href="scissors.htm" />
15 </map>

 Forms

所有form元素都要包含在一个主form下：

 

<form id="f1" onsubmit="return display()" method="post">
密码
输入框
date
...

</form>

id:为了可以css

 

 

text: 


<p> Text: <input type="text" name="text1" value="foo" autofocus /> </p>

autofocus:broswer load页面后鼠标停留的位置

value：starting value

type="text"是default，如果浏览器不能认出type的类型，将以自动切换成默认的text类型

 

password:

 

<p> Password: <input type="password" name="password1" /> </p>

date:

 

 

 

Google Crome下的date type　　　　　　　　　　　　　　firefox下的date type

 

　　　　　　　　　　　　　　　　　　

<p> Date: <input type="date" name="date1" 
        pattern="\d{4}-\d{2}-\d{2}" title="YYYY-MM-DD"/> </p>

pattern:用来规定输入的格式，这里是4-2-2

title：tooltips

color:

 

 

<p> Color: <input type="color" name="color1" value="#336699" /> </p>

email:

<p> Email: <input type="email" name="email1" multiple /> </p>

multiple：多个输入email address用","分割

number:

Google Crome下的number type　　　　　　　　　　　　　　firefox下的number type

　　　　　　　　　　　　　　　　　　　　

<p> Number (1-5): <input type="number" name="number1" min="1" max="5" value="1" /> </p>

Range：

<p> Range (1-100 in steps of 10):
        <input type="range" name="range1" min="0" max="100"
            step="10" value="20" /> </p>

Search：

<p> Search: <input type="search" name="date1" /> </p>

url：

检测是否输入的是正确的url

<p> URL: <input type="url" name="url1" /> </p>

textarea:

<p> Text area: </p>
<p> <textarea name="textarea1"></textarea> </p>

checkbox & radio button:

<p> Checkboxes: 
        <input type="checkbox" name="check1" checked autofocus />
        <input type="checkbox" name="check2" />
        <input type="checkbox" name="check3" checked />
    </p>

    <p> Radio buttons: 
        <input type="radio" name="radio1" value="one" />
        <input type="radio" name="radio1" value="two" checked />
        <input type="radio" name="radio1" value="three" />
    </p>

radio button的name都是相同的，同时只能选择一个

checked：代表初始已被选择

 

select：

　　　　

View Code 
 1 <form id="f1" onsubmit="return display()" method="post">
 2     <p> Selection Lists: <br />
 3         <select name="select1" size="5" multiple>
 4             <optgroup label="Literature">
 5                 <option value="" disabled selected>-- Select a Cat --</option>
 6                 <option value="cheshire">Cheshire Cat</option>
 7             </optgroup>
 8             <optgroup label="Film">
 9                 <option value="hat">The Cat in the Hat</option>
10                 <option value="bigglesworth">Mr Bigglesworth</option>
11             </optgroup>
12             <optgroup label="Television">
13                 <option value="fritz">Fritz the Cat</option>
14                 <option value="spot">Spot</option>
15                 <option value="cat">The Cat</option>
16             </optgroup>
17             <optgroup label="Comics">
18             <option value="tom">Tom</option>
19             <option value="heathcliff">Heathcliff</option>
20             <option value="garfield">Garfield</option>
21             </optgroup>
22         </select>
23     </p>
24     <p> <input type="submit" name="submit1" value="Big Red Button" onclick="return display()" /> </p>
25 </form>

multiple：是否可以多选

size：控制显示框屏幕最多可以显示几个项目

如果没有multiple和size那么select type为一个下拉菜单

Select a Cat选项是disabled的并且为初始选项

submit：

<form id="f1" action="http://t.bw.org/cgi-test.php" onsubmit="return submitDisplay();" method="post">
    <p> Text: <input type="text" name="text1" required autofocus /> </p>
    <p> Password: <input type="password" name="password1" required /> </p>
    <p> <input type="submit" name="submit1" value="Big Red Button" onclick="return submitDisplay()" /> </p>
</form>

id：form的css

action：表述server用到的外置程序，这里用的是php，用来submit用户填入的form信息

onsubmit：叫js后台文件里的submitDisplay方法，如果返回值为true才submit form

methord：submit的方式，如果为post url会隐藏掉填入的信息，如果为get，则url里包含submit 的form信息

type="submit":submit类型用来叫js里方法的同时，把信息传入到server端

 

button：

<form id="f1" action="http://t.bw.org/cgi-test.php" onsubmit="return submitDisplay();" method="post">
    <p> Text: <input type="text" name="text1" required autofocus /> </p>
    <p> Password: <input type="password" name="password1" required /> </p>
    <p> <input type="button" name="submit1" value="Big Red Button" onclick="return submitDisplay()" /> </p>
</form>

同样和上面一样，只是submit type换成了button type，click button还是可以叫js的方法，但是不可以submit信息到server端

reset：reset在text框里输入的数值

<p> 
<input type="button" name="submit1" value="Big Red Button" onclick="return submitDisplay()" /> 
<input type="reset" name="reset1" value="Reset Button"/> 
</p>

image button：

<form id="f1" onsubmit="return Display();" method="post">
    <p> Text: <input type="text" name="text1" required autofocus /> </p>
    <p> Password: <input type="password" name="password1" required /> </p>
    <p> <input type="image" src="image/brb.png" 
        name="submit1" value="Big Red Button" onclick="return Display()" /> </p>
</form>

 

 

 

posted @ 2012-12-09 10:41  若愚Shawn  阅读(125)  评论(0)  编辑  收藏  举报