认识超文本，首先要了解其基本结构和不同标签和属性的使用方法及作用。本篇博文就HTML中相关基础标签和属性使用方法进行总结。
一、HTML文档的基本结构。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>我是林木，大家好呀！</h3> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
基本结构的解释
<!--文档类型-->
<!doctype html>
<!--html文档开始, lang设置该文档的内容使用的语言,部分浏览器会依赖它进行翻译提示-->
<!--lang属性非必须,如果页页就是提醒翻译,可以删除它,或者改成: zh-cn, 让它与你的系统语言一致-->
<html lang="en">
<!--head是文档的头部声明和页面描述信息,除标题外, 其余内容对用户不可见, 供浏览器和搜索引擎读取-->
<head>
<!-- meta标签用来设置页面的元数据(描述),例如关键字,页面描述,作者等-->
<!-- charset是你在编写和存储这个html文档时, 使用的编码集-->
<meta charset="UTF-8">
<!-- title是显示在浏览器标签页内的文本内容,用来提示用户当前页面的基本信息-->
<title>html文档的结构</title>
</head>
<!--以下内容会显示在当前浏览器的窗口中, 也是用户最感兴趣的部分-->
<body>
<h3>我是林木，大家好呀！</h3>
</body>
</html>
二、HTML常用标签
标题：<h1> -<h6>
段落：<p>
链接：<a href=" " alt=" ">
图像：<img src=" " alt=" ">
列表：<ul>+<jl>,<ol>+<jl>,<dl><dt><dd>
表格：<table><thead><tbody><tr><td>
表单：<form><label><input><button>
宽架：<iframe src=" " width=" " height=" ">
通用：<div><span>
容器：<header><nav><main><article><section><footer>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题与段落</title> </head> <body> <article role="article"> <h1>HTML是什么?</h1> <p>HTML是超文本标记语言</p> <h2>HTML与CSS之间的关系是什么?</h2> <p>html通常用来写页面的基本结构,css用来设置元素样式</p> <h3>JavaScript可以做什么?</h3> <p>JavaScript是前端唯一的脚本编程语言, 得到了所有浏览器的支持</p> <p>JavaScript可以控制页面元素的显示与行业, 使页面具有交互性,提升用户体验</p> <h4>article标签定义及用法</h4> <p>article标签中的内容是独立的、完整的、摘自外部的内容。它可以是博客文章、新闻文章等独立的内容。</p> </article> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
三、链接：链接是现代互联网的发展基础, 全球各个网站就是通过这个小小的链接全部互联到了一起。
注意：target属性指明在哪里打开。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题与段落</title> </head> <body> <a href="">林木的博客：默认当前页面打开</a> <br> <a href="" target="_self">林木的博客：默认值是_self</a> <br> <a href="" target="_blank">林木的博客：新的窗口打开_blank</a> <br> <a href="" target="_parent">林木的博客：父窗口打开_parent</a> <br> <a href="" target="_top">林木的博客：顶层窗口打开_top</a> <br> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
注意：如果父窗口与顶层窗口都是自己的,则与_self效果相同。
四、图片
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题与段落</title> </head> <body> <img src="static/images/girl.jpg" alt="小姐姐" width="400" title="阳光下的小姐姐"> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
注意：宽度和高度设置一个即可, 另一个会按比例自动调整。
图像的src是图片路径，alt属性是一定要有的，代表的是图片注释,因为搜索引擎 和 屏幕阅读器都是依赖这个元素来获取图片的内容与介绍。
图片是外部资源, html文档无法直接提供内容, 所以对于外部资源, html大多是通过单标签进行加载。
html是通过单标签中的属性指定要加载的外部资源的地址。
可以是本地的图片, 也可以是一个网络图片。
五、列表
无序列表
实例
<h3>学生信息</h3> <ul> <li>张三， 男， 计算机学院</li> <li>李四， 男， 汉语言文学学院</li> <li>王五， 女， 外国语学院</li> <li>赵六， 男， 经管学院</li> </ul>
运行实例 »点击 "运行实例" 按钮查看在线实例
有序列表
实例
<h3>学生信息</h3> <ol> <li>张三， 男， 计算机学院</li> <li>李四， 男， 汉语言文学学院</li> <li>王五， 女， 外国语学院</li> <li>赵六， 男， 经管学院</li> </ol>
运行实例 »点击 "运行实例" 按钮查看在线实例
开发中, 无序列表使用更广泛, 例如导航
实例
<ul> <li><a href="">首页</a></li> <li><a href="">公司新闻</a></li> <li><a href="">公司产品</a></li> <li><a href="">关于我们</a></li> <li><a href="">联系我们</a></li> </ul>
运行实例 »点击 "运行实例" 按钮查看在线实例
六、定义列表：类似于名词解释, 通常用来制作页脚的导航。
实例
<dl> <dt>php</dt> <dd>全球最流行的通用的服务器端编程脚本语言</dd> <dt>mysql</dt> <dd>使用最广泛的免费开源的关系型数据库管理系统</dd> <dt>ThinkPHP</dt> <dd>国内使用最广泛的轻量级免费开源的PHP开发框架<dd> </dl>
运行实例 »点击 "运行实例" 按钮查看在线实例
七、表格
使用表格重新编写
border: 表格与单元格添加边框。
cellspacing: 设置单元格与表格之间的间隙大小,0为折叠。
cellpadding: 设置单元格内容与单元格之间的内边距, 不要太拥挤。
width: 设置表格的宽度, 可以使用相对值:百分比。
align: 设置对齐方式,居中, 居左,居右。
bgcolor: 设置背景色。
colsapn: 单元格在列方向上(水平)的合并。
rowspan: 单元格在行的方向(垂直)合并。
实例
<table border="1" cellspacing="0" cellpadding="5" width="500 " align="left"> <caption>学生信息</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>学院</th> <th>绩点</th> </tr> </thead> <tbody align="center"> <tr> <td width="50">张三</td> <td width="50">男</td> <td width="150">计算机学院</td> <td width="50">3.81</td> </tr> <tr> <td>李四</td> <td>男</td> <td> 汉语言文学学院</td> <td> 4.0</td> </tr> <tr> <td>王五</td> <td>男</td> <td> 外国语学院</td> <td> 4.2</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">总计</td> <!--<td>男</td>--> <!--<td> 外国语学院</td>--> <td align="center"> 12.1</td> </td> </tr> </tfoot> </table>
运行实例 »点击 "运行实例" 按钮查看在线实例
注意：表格标题使用：<caption>学生信息</caption>
表格头部, 使用<thead></thead>，而且只允许一个；里面使用<tr><th></th></tr> 来表示表头行和单元格。表格主体, <tbody></tbody>可以有多个；里面使用<tr><td></td></tr>来表示表身行和单元格。
表格底部, tfoot也只允许有一个。
八、表单与表单中的控件元素
form标签里面填写的内容就是的表单的控件，把表单放到每一个<p>里。表单最常见的控件是input，输入的意思，input最常见类型是一个文本框“text”，同时创建一个label标签，label里的for属性与input里的id属性一一对应，这样就实现标签label和表单控件input进行绑定。
实例
<h3>用户注册</h3> <form action="" method="" name=""> <p> <label for="uesname">账号：</label> <input type="text" id="uesname" name="usename" placeholder="不能超过8个字符" autofocus> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="6-12的字母和数字组成" autofocus> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@mail.com" required> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="18" max="100"> </p> <p> <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday"> </p> </form>
运行实例 »点击 "运行实例" 按钮查看在线实例
注意：autofocus:自动获取焦点
required: 必填项
min - max: 设置取值范围
时间控件因浏览器不同, 会有不同的实现效果,但功能是类型的
select: 下拉列表,也叫下拉框,与前面表单控件不一样,它的值都是预置的,不需要用户输出,是枚举类型，与其它input元素不同, 它的name和value属性分别在二个标签中: name在select中, value在option中
实例
<p> <label for="course">课程:</label> <!-- 默认显示是一个,可以用size设置--> <select name="course" id="course" size="1"> <!-- 选择支持分组--> <optgroup label="前端:"> <option value="0">请选择</option> <option value="1">HTML5</option> <option value="2">CSS3</option> <!-- selected: 设置默认选项--> <option value="3" selected>JavaScript</option> </optgroup> <optgroup label="后端:"> <option value="4">PHP</option> <option value="5">MySQL</option> <option value="6">ThinkPHP</option> </optgroup> </select> </p>
运行实例 »点击 "运行实例" 按钮查看在线实例
复选框
实例
<p> <label for="programme">爱好: </label> <!-- 点击"爱好"标签会自动定位到"撸代码"选项上--> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label> <!-- checked: 默认值--> <input type="checkbox" name="hobby[]" value="programme" id="movies" checked><label for="movies">看片</label> </p>
运行实例 »点击 "运行实例" 按钮查看在线实例
单选按钮
实例
<p> <label for="male">性别: </label> <!-- 点击"性别"标签会自动定位到"男生"选项上--> <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label> <!-- checked: 默认值--> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label> </p>
运行实例 »点击 "运行实例" 按钮查看在线实例
文本域
实例
<p> <label for="comment">简介:</label> <!-- 文本域其实就是一个多行文本框--> <!-- 不要设置value属性, 返回的文本在value属性中--> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea> </p>
运行实例 »点击 "运行实例" 按钮查看在线实例
按钮
实例
<p> <input type="submit" name="submit" value="提交"> <!-- 重置不是清空, 只是恢复表单控件的默认状态或者默认值--> <!-- 重置按钮现在极少用到啦--> <input type="reset" name="reset" value="重置"> <!-- 普通按钮, 没有具体的功能, 通过JavaScript将它的行为重新定义, 例如Ajax异步提交数据--> <input type="button" name="button" value="按钮"> <!-- 推荐使用button标签定义按钮--> <!-- 默认也input:submit功能是一样的--> <button>提交1</button> <!-- 等价于--> <button type="submit">提交2</button> <!-- 普通按钮, 点击执行的行为, 由用户自定义--> <button type="button">提交3</button> </p>
运行实例 »点击 "运行实例" 按钮查看在线实例