-
什么是html和css?
html（hypertext markup language）,即為超文本標(biāo)記語(yǔ)言树叽。將html文件放在web服務(wù)器上，任何瀏覽器就可以通過(guò)互聯(lián)網(wǎng)得到你的web界面了谦絮。首先html是一種markup language题诵，通過(guò)標(biāo)記的方式，它可以告訴瀏覽器文本的結(jié)構(gòu)是怎樣的层皱。css是一種樣式框架性锭。html繪制出網(wǎng)頁(yè)的主要結(jié)構(gòu)，而css則可以給html的結(jié)構(gòu)提供不同的顯示樣式叫胖，讓網(wǎng)頁(yè)變的更加豐富多彩草冈。
-
如何創(chuàng)建html文件并通過(guò)瀏覽器瀏覽？
在window系統(tǒng)下，最簡(jiǎn)單的方式便是創(chuàng)建一個(gè)記事本怎棱，并更改其后綴txt為html即可哩俭。之后就可以在里面寫代碼了。瀏覽html文件拳恋，只需將它拖拽到瀏覽器中便可以查看它的樣式了凡资。
-
最簡(jiǎn)單的html文件
最簡(jiǎn)單的html文件由head和body兩部分組成。簡(jiǎn)單的html文件中谬运，style可放在head中隙赁，style的類型這里采用css框架。復(fù)雜的style設(shè)置可以另設(shè)一個(gè)html文件梆暖。在body中即可寫自己的網(wǎng)頁(yè)了伞访。body由許多元素構(gòu)成，元素又可設(shè)置不同的屬性轰驳。在html文件中會(huì)自動(dòng)忽略回車厚掷，空格等。
下面在代碼中介紹常用的元素：
注釋： 6級(jí)標(biāo)題h1-h6: <h1>標(biāo)題</h1>(h==head) 段落： <p>段落</p> (p==pragraph) 超鏈接（本頁(yè)打開）： <a href="../inf.html" title="inf">內(nèi)容</a>(..為上一級(jí)文件夾 href==hyper reference,title為提示符) 超鏈接（新頁(yè)打開）： <a target="_black" href="../inf.html#pi" title="inf">內(nèi)容</a>(增加target="_black"屬性在新標(biāo)簽頁(yè)打開级解，inf.html#pi可定位到id為pi的元素位置) 強(qiáng)調(diào)：<strong>內(nèi)容</strong> 圖片：<img src="a.jpg">(src==source) 列表行：<li>內(nèi)容</li>(li==list items,li與ol或ul嵌套使用) 無(wú)序列表：<ul>...</ul>(ul==unorder list) 有序列表：<ol>...</ol>(ol==order list) 換行：.....<br> 短句引用：....<q>引用內(nèi)容</q>(q==quote) 塊引用：<blockquote>引用內(nèi)容</blockquote> 代碼：<code>代碼</code> 原樣顯示：<pre>內(nèi)容</pre>
示例代碼
<pre>
<html>
<head>
<title>my first html</title>
<style type="text/css">
body{
background-color:#d2b48c;
margin-left:20%;
margin-right:20%;
border:2px dotted black;
font-family:sans-serif;
padding:10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>nankai university</h1> <h2>person info</h2> <p>hello,my name is <a href="information/huzhiwei.html" title="person information">huzhiwei</a> , i'm from <strong>nankai</strong> university,this is my first html!</p> <a href="information/huzhiwei.html"><img src="images/hzw.png"></a> <h3>my favorite color:</h3> <ol> <li>red</li> <li>blue</li> <li>orange</li> </ol> <h3>the cities i have visited:</h3> <ul> <li>tianjin</li> <li>beijin</li> <li>qingdao</li> </ul> <h2>demo</h2> <p>test for first time!Here is my favorite quote:<q>Do not wish for an easy life. Wish for the strength to endure a difficult one.</q>just for it!</p> <blockquote>Do not wish for an easy life. <br> Wish for the strength to endure a difficult one. </blockquote> <p>my first code:</p> <code>hello world!</code>
</body>
</html>
</pre>
顯示結(jié)果如下：
