zoukankan      html  css  js  c++  java
  • HTML快速入门


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

          网页又叫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="重置" size="30">
    <!--提交按钮-->
    			<input type="submit" value="提交" size="30">
    		</form>
    	</body>
    </html>



    相关概念:

    URL:统一资源定位符(Uniform Resource Locator,缩写为URL)。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

    基本URL包含模式(或称协议)、服务器名称(或IP地址)、路径和文件名。模式/协议(scheme):它告诉浏览器如何处理将要打开的文件。最常用的模式是HTTP。URL分为绝对URL和相对URL,即绝对路径与相对路径。

    <html>
    	<head><title>路径的例子</title></head>
    	<body>
    <!--相对路径-->
    		<a href="Test1.html">例子1</a><br>
    <!--绝对路径-->
    		<a href="C:UsersysxDesktopTest1.html">例子2</a><br>
    	</body>
    </html>

          通过上面几个简单的例子,可以看出,利用HTML我们可以设计出网页中的段落、文本、表格、表单等。而且,我们可以对元素标签的样式进行简单的设定,呈现出来的效果也是很漂亮的。但是我们对其样式等的修改是十分有限的,没办法像CSS一样灵活的设定。

          网上有个更为通俗的解释:没CSS的html页面就好比“没化妆的丑女人”,而随意处理的html页面就是“化妆后的丑女人”;用了CSS后,等于是把丑女人换了一张林志玲的脸或者连身材也换了,只不过骨头、器官之类的还是原来的而已!

  • 相关阅读:
    Nginx负载均衡配置
    云鹏在美团八年工作总结
    尽量不要让儿女从事这3种工作,钱再多也别做,坚持再久也没前途
    Nginx 配置ip_hash
    postgresql获取表结构,表名、表注释、字段名、字段类型及长度和字段注释
    更快的Maven来了,我的天,速度提升了8倍!
    Nginx负载均衡配置及算法详解
    nginx负载均衡策略:ip_hash、url_hash
    Windows Phone实用开发技巧(41):解决WebBrowser中显示黑色背景网页闪屏
    Windows Phone实用开发技巧(32):照片角度处理
  • 原文地址:https://www.cnblogs.com/saixing/p/6730324.html
Copyright © 2011-2022 走看看