HTML由原理到实践

最新推荐文章于 2021-06-04 21:50:27 发布

HYunEr

最新推荐文章于 2021-06-04 21:50:27 发布

阅读量1.7k

点赞数 3

分类专栏：【前端这点事】

本文链接：https://blog.csdn.net/mingxuanyun/article/details/17798581

版权

【前端这点事】专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML(HyperText Markup Language)，即超文本标记语言，是用来描述网页的一种语言。不需要编译，直接由浏览器来执行。Web页面（网页）相当于是一种文档，而HTML就是用于编写这种文档的一种标记语言。换句话说，HTML是创建网页的基础，它通过标记符号等标记网页要显示什么部分。

在熟悉HTML之前，我们先来了解一下HTML的框架架构：

HTML的框架结构就跟我们写文章似的，文章要有标题（title)和正文（body)部分。下面是对HTML基础知识的一个总结：

实践：

HTML代码：

<html> 
	<head><title>表单的例子</title></head>
	<body bgcolor="#d0d0d0">
		<form method="get" action="reg.jsp">
			<table>
				<tr>
					<td>用户名:</td> 		
					<td><input type="text" name="user" value=""></td>
				</tr>
				<tr>
					<td>密码:</td> 		
					<td><input type="password" name="pwd"></td>
				</tr>	
				<tr>
					<td>性别:</td> 		
					<td>
					<input type="radio" name="sex" value="1" checked>男
					<input type="radio" name="sex" value="0">女
					</td>
				</tr>		
				<tr>
					<td>兴趣爱好:</td> 		
					<td>
						<input type="checkbox" name="interest" value="football">足球
						<input type="checkbox" name="interest" value="bastball">篮球
						<input type="checkbox" name="interest" value="volleyball">排球
						<input type="checkbox" name="interest" value="swim">游泳
					</td>
				</tr>
				<tr>
					<td>最高学历:</td> 		
					<td>
						<select size="1" name="education">
							<option value="" select>...</option>
							<option value="高中">高中</option>
							<option value="大学">大学</option>
							<option value="硕士">硕士</option>
							<option value="博士">博士</option>			
						</select>
					</td>
				</tr>
				<tr>
					<td valign="top">个人简介:</td> 		
					<td><textarea name="personal" rovs="5" cols="30"></textarea></td>
				</tr>
				<tr>
					<td><input type="reset" value="重置"></td> 		
					<td><input type="submit" value="注册"></td>
				</tr>
			</table>	
		</form>
		</body>
</html>

通过上面的实例，我们可以看出，HTML主要是通过使用标记标签（HTML标签）来描述网页。所以我们有必要来了解一些常用的标签元素：

框架标签：

<html></html> 创建一个HTML文档
<head></head> 设置文档标题和其它在网页中不显示的信息
<title></title> 设置文档的标题
<h1></h1> 最大的标题

格式标签：

 强调文本(通常是斜体加黑体)
 加重文本(通常是斜体加黑体)
 设置字体大小从1到7，颜色使用名字或RGB的十六进制值
<big></big> 字体加大
 字体缩小
<STRIKE></STRIKE> 加删除线
<xmp>...</xmp>固定宽度字体(在文件中空白、換行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体（不執行标记符号)
<listing>...</listing> 固定宽度小字体
...字体颜色
...最小字体
...无线增大

 下划线
 黑体字
 斜体字
<cite></cite> 引用,通常是斜体

文本标签：

 创建一个段落

<pre></pre> 预先格式化文本
 将段落按左、中、右对齐　
 换行插入换行符

<blockquote></blockquote> 从两边缩进文本

<dl></dl> 定义列表
<dt> 放在每个定义术语词前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字,若在<ul></ul>之间则每个列表项加上一个圆点　　
<div align=""></div> 用来排版大块HTML段落,也用于格式化表
<MENU> 选项清单
<DIR> 目录清单
 强行不换行
<hr size='9' width='80%' color='ff0000'>水平線(設定寬度)
<center></center> 水平居中

链接标志表格标志：
<a href="URL"></a> 创建超文本链接
</a> 创建自动发送电子邮件的链接
<a name="name"></a> 创建位于文档内部的书签
<a href="#name"></a> 创建指向位于文档内部书签的链接
<BASE> 文档中不能被该站点辨识的其它所有链接源的URL
<LINK> 定义一个链接和源之间的相互关系

链接标记注解：
target="..."决定链接源在什么地方显示(用户自定义的名字，_blank,_parent,_self,_top
rel="..."发送链接的类型
rev="..."保存链接的类型
accesskey="..."指定该元素的热键
shape="..."允许我们使用已定义的形状定义客户端的图形镜像(default，rect，circle，poly
coord="..."使用像素或者长度百分比来定义形状的尺寸
tabindex="..."使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点)