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:\Users\ysx\Desktop\Test1.html">例子2</a><br>
</body>
</html>
通过上面几个简单的例子，可以看出，利用HTML我们可以设计出网页中的段落、文本、表格、表单等。而且，我们可以对元素标签的样式进行简单的设定，呈现出来的效果也是很漂亮的。但是我们对其样式等的修改是十分有限的，没办法像CSS一样灵活的设定。
网上有个更为通俗的解释：没CSS的html页面就好比“没化妆的丑女人”，而随意处理的html页面就是“化妆后的丑女人”；用了CSS后，等于是把丑女人换了一张林志玲的脸或者连身材也换了，只不过骨头、器官之类的还是原来的而已！
HTML快速入门的更多相关文章
- Web Api 入门实战 （快速入门+工具使用+不依赖IIS）
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...
- SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
- 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令（2）
今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...
- 【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- Mybatis框架 的快速入门
MyBatis 简介 什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果 ...
- grunt快速入门
快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...
- 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【第四篇】ASP.NET MVC快速入门之完整示例（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
随机推荐
- Python学习之路——基础1
python作为一门解释型的编程语言,和c/c++等其他语言都或多或少有相通的地方,所以有语言基础的话,学起来还是方便一些.所以我的笔记对于相对简单的概念可能会选择放过,但对自己记录的东西我会力求完备 ...
- LeetCode47.Permutations II（剑指offer38-1)
Given a collection of numbers that might contain duplicates, return all possible unique permutations ...
- 【模板时间】◆模板·I◆ 倍增计算LCA
[模板·I]LCA(倍增版) 既然是一篇重点在于介绍.分析一个模板的Blog,作者将主要分析其原理,可能会比较无趣……(提供C++模板) 另外,给reader们介绍另外一篇非常不错的Blog(我就是从 ...
- 返回固定页面的web服务器
import socket def handle_client(socket_con): """ 接收来自客户端的请求,并接收请求报文,解析,返回 "" ...
- sqlite的sql常用语句（笔记）
1.复制一张表并重命名 比如已经创建好一个表 表名为"28165" 复制这个表. CREATE TABLE [33150] AS SELECT * FROM [28165] 2.根 ...
- python__高级 : @修饰器(装饰器)的理解
以下是第一次了解的时候写的东西,有的地方理解不正确,虽已改正但是太片面,请直接看下面第二次修改加上的内容. ---------------------------------------------- ...
- 【PHP基础】序列化serialize()与反序列化unserialize()
序列化serialize()与反序列化unserialize(): 序列化serialize():就是将一个变量所代表的 “内存数据”转换为“字符串”的形式,并持久保存在硬盘(写入文件中保存)上的一种 ...
- stark组件（11）：组合搜索
效果图: 新增函数和类 Option 获取字段的对象或元组 SearchGroupRow 封装数据,展示到前端 get_search_group 获取组合搜索的字段 get_search_group_ ...
- 大话循环神经网络（RNN）
在上一篇文章中,介绍了 卷积神经网络(CNN)的算法原理,CNN在图像识别中有着强大.广泛的应用,但有一些场景用CNN却无法得到有效地解决,例如: 语音识别,要按顺序处理每一帧的声音信息,有些结果 ...
- talent-aio源码阅读小记（一）
近来在oschina上看到一个很火的java 即时通讯项目talent-aio,恰巧想了解一下这方面的东西,就阅读了一下项目的源码,这里对自己阅读源码后的一些心得体会做一下备忘,也希望能够对其他项目中 ...