子曰：温故而知新，可以为师矣。 《论语》-- 孔子
一、标题内容
<!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 基础知识就说到这，各位看官食用愉快。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
