-
什么是html和css?
html（hypertext markup language）,即为超文本标记语言。将html文件放在web服务器上，任何浏览器就可以通过互联网得到你的web界面了。首先html是一种markup language，通过标记的方式，它可以告诉浏览器文本的结构是怎样的。css是一种样式框架。html绘制出网页的主要结构，而css则可以给html的结构提供不同的显示样式，让网页变的更加丰富多彩。
-
如何创建html文件并通过浏览器浏览？
在window系统下，最简单的方式便是创建一个记事本，并更改其后缀txt为html即可。之后就可以在里面写代码了。浏览html文件，只需将它拖拽到浏览器中便可以查看它的样式了。
-
最简单的html文件
最简单的html文件由head和body两部分组成。简单的html文件中，style可放在head中，style的类型这里采用css框架。复杂的style设置可以另设一个html文件。在body中即可写自己的网页了。body由许多元素构成，元素又可设置不同的属性。在html文件中会自动忽略回车，空格等。
下面在代码中介绍常用的元素：
注释： 6级标题h1-h6: <h1>标题</h1>(h==head) 段落： <p>段落</p> (p==pragraph) 超链接（本页打开）： <a href="../inf.html" title="inf">内容</a>(..为上一级文件夹 href==hyper reference,title为提示符) 超链接（新页打开）： <a target="_black" href="../inf.html#pi" title="inf">内容</a>(增加target="_black"属性在新标签页打开，inf.html#pi可定位到id为pi的元素位置) 强调：<strong>内容</strong> 图片：<img src="a.jpg">(src==source) 列表行：<li>内容</li>(li==list items,li与ol或ul嵌套使用) 无序列表：<ul>...</ul>(ul==unorder list) 有序列表：<ol>...</ol>(ol==order list) 换行：.....<br> 短句引用：....<q>引用内容</q>(q==quote) 块引用：<blockquote>引用内容</blockquote> 代码：<code>代码</code> 原样显示：<pre>内容</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>
显示结果如下：
res.png
网友评论