HTML(HyperText Markup Language)--超文本标记语言。
看这个名字就知道,它的易学性质。回想下平时用word写文档的时候,内容可以由文字、图片、音视频组成,格式方面有字体、颜色、大小、换行等等,这些都可以用HTML语言标识出来。当然标识的方式有很多,现在的markdown语法也是可以起到标识的作用,区别是HTML是运行在浏览器上,由浏览器来解析。换句话说就是如果想把丰富的文档在浏览器上表现出来,就使用HTML来书写。
既然是标记语言,首先学习它的各种标记方式,就像使用word时先打量下word的工具栏有哪些可配置参数。大致了解后肯定就是要实际使用起来,“试一试看看效果”的反馈学习方式加上回忆使用word的过程结合起来学习HTML无疑是一条比较好的道路。
一、HTML常用的标签符号与对应的格式名称,有个大致的印象而已
<html> | HTML文档 | </html> | 备注 |
<head> | 头部 | </head> | 备注 |
<body> | 文档主体 | </body> | 备注 |
<title> | 文档标题 | </title> | 备注 |
<h1> | 一级标题 | </h1> | h1~h6 |
<p> | 段落 | </p> | 备注 |
<a> | 链接 | </a> |
普通的链接: <a href="http://www.example.com/">链接文本</a> 图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a> 邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a> 书签: <a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a> |
<img/> | 图像 | <img src="/images/logo.png" width="258" height="39" /> | |
<br/> | 换行 | 备注 | |
<hr/> | 水平线 | 备注 | |
<!--...--> | 注释 | 备注 | |
<b> | 粗体文本 | </b> | 一般使用<strong> |
<i> | 斜体文本 | </i> | 一般使用<em> |
<table> | 表格 | </table> | <table border="1"></table> |
<tr> | 表格中的行 | </tr> | 备注 |
<td> | 表格中行的列 | </td> | 备注 |
<ul> | 无序列表 | </ul> | 备注 |
<ol> | 有序列表 | </ol> | 备注 |
<li> | 无、有序列表的节点 | </li> | 备注 |
<dl> | 自定义列表 | </dl> | 备注 |
<dt> | 自定义列表项 | </dt> | 备注 |
<dd> | 自定义列表项的定义 | </dd> | 备注 |
<div> | 块级 | </div> | <div id="container" style="500px"> |
<span> | 内联元素 | </span> | 备注 |
<meta> | <meta charset="utf-8"> | ||
<!DOCTYPE> | <!DOCTYPE html> | ||
<form> | 表单 | </form> | 备注 |
<input> | 输入元素 | </input> |
<input type="text">文本域、<input type="password">密码字段、 <input type="radio">单选按钮、<input type="checkbox">复选框、 <input type="submit">提交按钮 |
<iframe> | 框架 | </iframe> | <iframe src="URL"></iframe> |
<script> | 脚本 | </script> | 备注 |
<noscript> | </noscript> | 备注 | |
<code> | 计算机代码 | </code> | 备注 |
<kbd> | 键盘输入 | </kbd> | 备注 |
<pre> | 预格式化文本 | </pre> | 备注 |
<abbr> | 缩写 | </abbr> | 备注 |
<bdo> | 文字方向 | </bdo> | 备注 |
<address> | 联系信息 | </address> | 备注 |
<del> | 删除的文本 | </del> | 备注 |
<ins> | 插入的文本 | </ins> | 备注 |
<sub> | 下标文本 | </sub> | 备注 |
<sup> | 上标文本 | </sup> | 备注 |
<cite> | 工作的名称 | </cite> | 备注 |
<l> | </> | 备注 |
二、现在就使用一些这些常用的标签,看看效果
三、总结
HTML是一种在Web上使用的通用标记语言。HTML允许你格式化文本,添加图片,创建链接,输入表单,框架和表格等等,并且可将之存为文本文件,浏览器即可读取和显示。
HTML的关键是标签,其作用是指示将出现的内容。简单的使用HTML用用这些标签其实也就够了,其实还可以往HTML的标签上添加属性,比如颜色等。 Web开发时,通过使用CSS,所有的格式化均可以从HTML中剥离出来,并存储于一个独立的文件中。这就是为什么HTML负责内容,CSS负责样式的设计模式。
另外使用HTML+CSS虽然已经能够将内容很好的展示出来了,这也就是静态网页。但是这样的界面缺少于用户的交互或者是网页自身的生动。如果要达到这样的效果的化,还需要使用JavaScript技术。JavaScript是互联网上最流行的脚本语言,目前所有的主流浏览器都支持JavaScript
另外,如果使用HTML(内容)+CSS(样式)+JavaScript(交互)这三种技术的结合就已经能够完成网站的搭建工作了。但是到目前位置它还只是能够运行在本地,如果想让更多人通过互联网就能够访问的话,还需要一个服务器来托管自己写好的网站。