首页 > 代码库 > HTML快速入门

HTML快速入门

2024-07-15 13:48:51   220人阅读


     我们经常上网浏览网页，来获取资讯。可网页是什么呢？它又是如何编写出来的呢？

      网页又叫Web页面，我们经常可以在网页上看到文字、图片、视频等。我们所要说的HTML（超文本标记语言）就是构成网页文档的主要语言，也是网页设计的核心语言。

       首先，我们先来理解下三个概念：HTML，HTML文档和HTML标签。


HTML
          描述网页的一种语言。
          超文本标记语言 ，而非编程语言。
          标记语言是一套标记标签 (markup tag)

HTML 文档 
          描述网页
         包含 HTML 标签和纯文本
         也被称为网页


HTML 标签
          也叫 标记标签
          是由尖括号包围的关键词，比如 <html>
          通常是成对出现的，比如 <b> 和 </b>
          第一个标签是开始标签，第二个标签是结束标签
       

梳理这三者的关系，HTML文档是由HTML这种标记语言编写的，它包括标签和文本元素。所以我们重点来说一下HTML文档，了解了HTML文档，就对HTML有了一个大致的了解。


下面就通过几个例子来实践下吧！

HTML的基本结构：

<html>
	<!--头部,包含标题-->
	<head><title>标题</title></head>
	<!--主体部分-->
	<body>
		
	</body>
</html>


通过网页显示文本，并对文本的样式进行简单的设定。

<html>
	<head><title>白头吟</title></head>
	<body>
		<center>
		<!--诗的标题-->
			<h2><font color="black"><b>白头吟</b></font></h2><br>
		<!--作者-->
			<font color="black" size="2">作者：卓文君</font><br><br>
		<!--正文-->
		<font color="green" size="4">皑如山上雪，皎若云间月。<br>
		闻君有两意，故来相决绝。<br>
		今日斗酒会，明旦沟水头。<br>
		躞蹀御沟上，沟水东西流。<br>
		凄凄复凄凄，嫁娶不须啼。<br>
		愿得一心人，白头不相离。<br>
		竹竿何袅袅，鱼尾何簁簁！<br>
		男儿重意气，何用钱刀为！
		</font>
		</center>
	</body>
</html>


接下来是一个课程表的表格，用到的标签主要有<table>,<tr>，<th>,<td>等。

<html>
	<head><title>表格</title></head>
	<body>
		<table border="1"align="center" bgcolor="#ffdddd">
			<caption>课程表</caption>
			<tr align="center" valign="middle">
				<th>星期</th>
				<th>周一</th>
				<th>周二</th>
				<th>周三</th>
				<th>周四</th>
				<th>周五</th>
			</tr>
		<tr align="center" valign="middle">
			<td>第一节</td>
			<td>数学</td>
			<td>语文</td>
			<td>美术</td>
			<td>地理</td>
       			<td>语文</td>
		</tr>
		<tr align="center" valign="middle">
			<td>第二节</td>
			<td>生物</td>
			<td>英语</td>
			<td>体育</td>
			<td>地理</td>
			<td>语文</td>
		</tr>
		<tr align="center" valign="middle">
			<td>第三节</td>
			<td>数学</td>
			<td>地理</td>
			<td>语文</td>
			<td>英语</td>
			<td>语文</td>
		</tr>
		<tr align="center" valign="middle">
			<td>第四节</td>
			<td>数学</td>
			<td>地理</td>
			<td>语文</td>
			<td>英语</td>
			<td>语文</td>
		</tr>
		<tr align="center" valign="middle">
			<td>第五节</td>
			<td>数学</td>
			<td>地理</td>
			<td>语文</td>
			<td>地理</td>
			<td>语文</td>
		</tr>
		</table>
	</body>
</html>


下面我们来制作一个注册的表单，主要就是<input>元素的使用，它用于接受用户输入的信息，主要属性是type。

<html>
	<head><title></title><head>
	<body>
		<form method="get" action="reg.jsp">
<!--单行文本输入控件-->
			用户名： <input type="text" name="user" size="30"><br>
<!--口令输入控件-->
			密   码：  <input type="password" name="pwd" size="30"><br>
<!--重置按钮-->
			<input type="reset" value=http://www.mamicode.com/"重置" size="30">>


相关概念：
URL：统一资源定位符（Uniform Resource Locator，缩写为URL）。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名。模式/协议（scheme）：它告诉浏览器如何处理将要打开的文件。最常用的模式是HTTP。URL分为绝对URL和相对URL，即绝对路径与相对路径。
<html>
	<head><title>路径的例子</title></head>
	<body>
<!--相对路径-->
		<a href=http://www.mamicode.com/"Test1.html">例子1
>
      通过上面几个简单的例子，可以看出，利用HTML我们可以设计出网页中的段落、文本、表格、表单等。而且，我们可以对元素标签的样式进行简单的设定，呈现出来的效果也是很漂亮的。但是我们对其样式等的修改是十分有限的，没办法像CSS一样灵活的设定。
      网上有个更为通俗的解释：没CSS的html页面就好比“没化妆的丑女人”，而随意处理的html页面就是“化妆后的丑女人”；用了CSS后，等于是把丑女人换了一张林志玲的脸或者连身材也换了，只不过骨头、器官之类的还是原来的而已！


联系
我们