子曰:温故而知新,可以为师矣。 《论语》-- 孔子
一、标题内容
<!DOCTYPE html>
<html>
<head>
<!-- 网页头部内容 -->
<title>标题</title>
</head>
<body>
<!-- 网页主体内容 -->
</body>
</html>
二、文字和段落标签
<!DOCTYPE html>
<html>
<head>
<title>文字和段落标签</title>
</head>
<body>
<!-- 文档标签 h1~h6 -->
<h1>什么是HTML</h1>
<!-- 段落标签 -->
<p>HTML 指的是超文本标记语言 </p>
<!--pre 标签: 文本内容是什么样式,网页就显示什么样式 -->
<pre>HTML 指的是超文本标记语言。</pre>
<!-- 水平线-->
<hr/>
<!--修饰标签
i:文字斜体 | em:文字斜体 | b:加粗 | strong:加粗
sub:下标 | sup:上标 | ins:插入内容 | del:删除内容 -->
<p><i>HTML</i> 标记标签通常被称为<em> HTML</em> 标签</p>
<p>HTML 标签是由<b>尖括号</b>包围的<strong>关键词</strong></p>
<p>开始和<ins>结束标签</ins>也被称为<sup>开放标签</sup>和<sub>闭合标签</sub> </p>
<!--特殊符号
< < 小于号 | > > 大于号
® 已注册 | @copy; 版权
@trade; 商标 | @nbsp; 不断行的空白 -->
<p>标签是<del>成对出现</del>,比如<b>和</b></p>
<p>Copyright ©2016 baidu.com All Rights Reserved</p>
</body>
</html>
三、列表标签
<!DOCTYPE html>
<html>
<head><title>列表标签</title></head>
<body>
<!-- ul 代表无序列表。 type属性值: - disc:圆点 - square:正方形 - circle:空心圆 -->
<ul type="disc">
<li>HTML 指的是超文本标记语言 (Hyper Text Markup Language)</li>
</ul>
<!-- ol 代表有序列表。type属性值: 1:数字1,2,3 | a:小写字母a,b | A:大写字母A,B | i:小写罗马数字i | I:大写罗马数字I -->
<ol type="1">
<li>HTML 标记标签通常被称为 HTML 标签</li>
<li>HTML 标签是由尖括号包围的关键词</li>
<li>HTML 标签通常是成对出</li>
<li>标签对中的第一个标签是开始标签,第二个标签是结束标签</li>
</ol>
<!--dl: 列表标签。 dt: 定义列表项。 dd: 列表项描述。 -->
<dl>
<dt>什么是HTML</dt>
<dd>HTML是用来描述网页的一种语言。</dd>
<dd>HTML超文本标记(Hyper Text Markup Language)。</dd>
<dt>HTML标签</dt>
<dd>HTML标记标签通常被称为HTML 标签</dd>
</dl>
</body>
</html>
四、图像和链接
<!DOCTYPE html>
<html>
<head><title>图像和超链接</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<!-- 绝对路径 -->
<img src="E:/HTML/图像与超链接/img/html.jpg" />
<!-- 相对路径: ./(返回上一级目录) 以及 ../(返回上两级目录) alt:代替图像显示在浏览器中的内容 title:链接提示文字 name:链接命名 -->
<a href="html2.html"><img src="img/html.jpg" alt="html基础课程" width="50px" height="80px"/></a>
<!--空链接 target: _self(跳转自身) _blank(新的页面) -->
<a href="#" target="_self" title="javascript进阶课程,边学边练,提升JS技术"><h2>javascript进阶课程</h2></a>
<!-- 锚链接(同一页面) -->
<a href="#html">html课程</a>
<a name="html"></a>
<!-- 锚链接(不同页面) -->
<a href="./html/test.html#html">html课程</a>
<a name="html"></a>
<!-- 电子邮件链接 -->
<a href="mailto:alisa@mukewang.com">反馈意见</a>
<!-- 文件下载 -->
<a href="img.rar">文件下载</a>
</body>
</html>
五、表格
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<!--创建带表格标题的表格 -->
<table border="1" width="500px">
<!-- caption 表格标题 居中显示 -->
<caption > 前端工程师平均工资</caption>
<!-- 表格分为三个部分:表头、主体、脚注 -->
<!-- thead:表格的头(放表格的表头) -->
<thead>
<tr>
<!-- th 表格头 加粗 居中 -->
<th>城市</th>
<th>2014年</th>
<th>2014年</th>
<th>2015年</th>
<th>2016年</th>
</tr>
<tr>
<th>城市</th>
<th>上半年</th>
<th>下半年</th>
<th>2015年</th>
<th>2016年</th>
</tr>
</thead>
<!-- tbody:表格的主体(放数据本体) -->
<tbody>
<tr>
<td>北京</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>12000</td>
</tr>
<tr>
<td>上海</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>10000</td>
</tr>
</tbody>
<!-- tfoot:表格的脚(放表格的脚注) -->
<tfoot>
<tr>
<td>合计</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>11000</td>
</tr>
</tfoot>
</table>
<!-- 表格属性:
属性 值 描述
width px % 规定表格的宽度
align left,center、right 表格相对周围元素的对齐方式
border px 规定表格边框的宽度
BgColor rgb、#xxxxxx 表格的背景颜色
cellpadding px、% 单元边沿与其内容之间的空白
cellspacing px、% 单元格之间的空白
frame 属性值 规定外边框的哪个部分是可见的
rules 属性值 规定内边框的哪个部分是可见的
frame : void 不显示外边框
above 显示上部的外边框
below 显示下部的外边框
hsides 显示上部和下部的外侧边框
vsides 显示左边和右边的外侧边框
lhs 显示左边的外侧边框
rhs 显示右边的外侧边框
box 在所有4个边上显示外侧边框
border 在所有4个边上显示外侧边框
rules none 没有线条
groups 位于行组和列组之间的线条
rows 位于行之间的线条
cols 位于列之间的线条
all 位于行和列之间的线条
tr标签属性: align(行内容水平对齐)valign(行内容垂直对齐) bagcolor(行的背景颜色)
td、th标签属性:align valign bgcolor width height
thead、tbody、tfoot标签属性:align valign
-->
<table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="5" cellpadding="5" align="center" frame="border" rules="rows">
<caption> 前端工程师平均工资</caption>
<thead>
<tr>
<th>城市</th>
<th>2014年</th>
<th>2014年</th>
<th>2015年</th>
<th>2016年</th>
</tr>
<tr>
<th>城市</th>
<th>上半年</th>
<th>下半年</th>
<th>2015年</th>
<th>2016年</th>
</tr>
</thead>
<tfoot>
<tr>
<td>合计</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>11000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>北京</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>12000</td>
</tr>
<tr>
<td>上海</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>10000</td>
</tr>
</tbody>
</table>
<!--创建2行3列表格 表格的跨行和跨列 -->
<table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" >
<caption> 前端工程师平均工资</caption>
<thead>
<tr bgcolor="#d8e4bc">
<!--
跨列属性 colsapn
跨行属性 rowspan
-->
<th rowspan="2">城市</th>
<th colspan="2">2014年</th>
<th rowspan="2">2015年</th>
<th rowspan="2">2016年</th>
</tr>
<tr bgcolor="#d8e4bc">
<th>上半年</th>
<th>下半年</th>
</tr>
</thead>
<tbody align="center" valign="middle">
<tr>
<td bgcolor="#b8cce4" align="center" valign="middle">北京</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>12000</td>
</tr>
<tr>
<td bgcolor="#b8cce4" align="center" valign="middle">上海</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>10000</td>
</tr>
</tbody>
<tfoot>
<tr align="center" valign="middle">
<td height="30px" bgcolor="#b8cce4">合计</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>11000</td>
</tr>
</tfoot>
</table>
<!--嵌套表格的说明:1.完整的结构 2.放到<td>标签中 -->
<table border="1" cellspacing="0">
<tr>
<td>2014年</td>
<td>2015年</td>
<td>2016年</td>
</tr>
<tr>
<td>
<table border="1px" cellspacing="0">
<tr>
<td>上半年</td>
<td>下半年</td>
</tr>
<tr>
<td>8000</td>
<td>9000</td>
</tr>
</table>
</td>
<td>10000</td>
<td>12000</td>
</tr>
</table>
</body>
</html>
六、表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单表单</title>
</head>
<body>
<!--基础表单-->
<form>
姓名: <input type="text" name="username"/>
密码: <input type="password" name="password"/>
<input type="submit">
</form>
<!-- 表单中input标签的使用-->
<h1 align="center">注册信息</h1>
<hr color="#336699"/>
<!-- 属性 值 描述
action URL 提交表单时向何处发送表单数据
method get/post 设置表单以何种方式发送到指定页面
name form_name 表单名称
target _blank _self 在何处打开 -->
<form action="action.php" method="get">
<table width="600px" bgcolor="#f2f2f2" align="center" >
<tr>
<td align="right">姓名:</td>
<td align="left">
<!-- 单行文本域
name:文字域名称 Maxlength:指用户输入的最大字符长度
size:指定文本框的宽度,以字符个数为单位,文本框的缺省宽度是20个字符
value:指定文本框的默认值 placeholder:规定用户填写输入字段的提示 -->
<input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/>
</td>
</tr>
<tr>
<td align="right">邮箱:</td>
<td align="left">
<input type="text" name="emal" value="@qq.com" />
</td>
</tr>
<tr>
<td align="right">密码:</td>
<td align="left">
<input type="password" name="passwrod" placeholder="请输入密码" size="25" maxlength="6">
</td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td align="left">
<input type="password" name="password" placeholder="再次输入密码" size="25" maxlength="6">
</td>
</tr>
<tr>
<td align="right">上传照片:</td>
<td align="left">
<input type="file" name="file" >
</td>
</tr>
<tr>
<td align="right">性别:</td>
<td align="left">
<!-- 相同name的单选框只能选择一个
checked:默认选中
-->
男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女">
保密<input type="radio" name="sex" value="保密" checked>
</td>
</tr>
<tr>
<td align="right">爱好:</td>
<td align="left">
<!-- name值不受限制,无需一样 -->
读书<input type="checkbox" name="ck1" value="read">
跳舞<input type="checkbox" name="ck1" value="dance">
唱歌<input type="checkbox" name="ck1" value="sing">
</td>
</tr>
<tr>
<td align="right">爱好的运动:</td>
<td align="left">
<!-- 服务器根据 name 属性值的不同来区分复选框 -->
跑步<input type="checkbox" name="ck2" value="run">
篮球<input type="checkbox" name="ck2" value="ball">
跳绳<input type="checkbox" name="ck2" value="wing">
</td>
</tr>
<tr>
<td align="right">城市:</td>
<td align="left">
<!-- 下拉菜单
属性: name(设置下拉菜单和列表的名称)
multipe:多项选择 size:设置列表中可见选项的数目
selected:默认选中 value:定义送往服务器的选项值 -->
<select name="city">
<option value="xz">--请选择--</option>
<option value="北京" selected>北京</option>
<option value="河北">天津</option>
<option value="河北">河北</option>
<option value="厦门">厦门</option>
<option value="上海">上海</option>
</select>
<select name="city" size="3" multiple >
<option value="北京">北京</option>
<option value="河北">天津</option>
<option value="河北">河北</option>
<option value="厦门">厦门</option>
<option value="上海">上海</option>
</select>
<select name="city">
<option value="xz">请选择</option>
<!--分组下拉菜单 -->
<optgroup label="华北">
<option value="北京" selected>北京</option>
<option value="河北">天津</option>
<option value="河北">河北</option>
</optgroup>
<optgroup label="华东">
<option value="厦门">厦门</option>
<option value="上海">上海</option>
<option value="福建">福建</option>
</optgroup>
</select>
<select name="city" size="5" multiple>
<option value="xz">请选择</option>
<optgroup label="华北">
<option value="北京" selected>北京</option>
<option value="河北">天津</option>
<option value="河北">河北</option>
</optgroup>
<optgroup label="华东">
<option value="厦门">厦门</option>
<option value="上海">上海</option>
<option value="福建">福建</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td align="right">简介:</td>
<td align="left">
<!-- 多行文本域 cols:宽度 rows:可见行数 -->
<textarea name="简介" cols="50" rows="10" placeholder="请输入个人介绍"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="来点我" name="button">
<input type="submit" value="submit" name="submit">
<input type="reset" value="reset" name="reset">
<input type="image" name="image_button" src="./image/image-button.png">
</td>
<td></td>
</tr>
<tr>
<td><input type="hidden" name="hidden" value="这是一个用户注册信息" ></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
七、行内和块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
行内元素:在一行,不换行。 img input a sub textarea span
块级元素:占据一行,换行。 div ul ol li dl dt dd h1~h6 p form hr
-->
<!--div标签-->
<div><img src="./image/html.jpg"/>html课程</div>
<div><img src="./image/js1.jpg"/>JS入门课程</div>
<div><img src="./image/js2.jpg"/>JS进阶课程</div>
<!--span标签-->
<span><img src="./image/html.jpg"/>html课程</span>
<span><img src="./image/js1.jpg"/>JS入门课程</span>
<span><img src="./image/js2.jpg"/>JS进阶课程</span>
<!--标签嵌套规则-->
<!--块级元素可包含行内元素和某些块级元素-->
<div><h1></h1><a href=""></a></div>
<!--行内元素不能包含块元素,只能包含其他行内元素-->
<a href=""><h1></h1><div></div></a><!--错误-->
<span><em></em></span><!--正确-->
<!--块级元素不能放在<p>标签内-->
<!--<p><div>1111</div><h1>2222</h1></p><!–错误–>-->
<!--特殊块级元素只能包含行内元素,不能再包含块级元素
如:h1、h2、h3、h4、h5、h6、p、dt-->
<!--块级元素与块元素并列,行内元素和行内元素并列-->
<div><h1></h1><p></p></div><!--正确-->
<div><span></span><a href=""></a></div><!--正确-->
<div><h1>666</h1><span>888</span></div><!--错误-->
</body>
</html>
写在文末
纸上得来终觉浅,绝知此事要躬行。 《冬夜读书示子聿》-- 陆游
好了,关于 HTML
基础知识就说到这,各位看官食用愉快。