web基础学习（一）HTML
HTML
-
Hyper Text Markup Language 超文本标记语言
-
HTML发展历史了解,目前网页常用HTML5。不要在意图片上的问题！
-
所有HTML都遵循W3C标准。即：万维网联盟行业标准的制定者
-
HTML页面主结构
-
本部分知识点实战
demo.html
<!--html版本声明-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--html开始 ->主结构,lang="en"采用英文语言-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<!--编码格式国际通用编码格式适用中文,英文 :charset="utf-8" , 简体中文编码格式： charset="gb2312"-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--网页标题-->
<title>这是我的网页</title>
</head>
<body>
<!--跨页面锚链接 news.html#bottom ：到新闻页面并且找到这个name="bottom"属性的a标签 name="top" 从下面的a标签找到这个属性 跳转到这里-->
<!--需要注意的是html5后期新增 id控制锚链接,一样可以实现锚链接的工作 -->
<a href="news.html#bottom" id="top">到新闻底部id形式的锚链接</a>
<a href="news.html#bottom" name="top">到新闻底部</a>
<!--行内样式控制（后期用处不大）-->
<font size='7' color="blue">这是一个文字</font>
<!--段落标签 p 标签知识点使用 < 尖括号 < 引号 " 字体加粗标签 <b> 斜体 标签<i>斜体文本</i>-->
<p>本报讯<k>（记者魏薇通讯员范晓丽王建明文/摄）10月6日，8岁男童浩浩在写作业时不慎摔倒，手中的铅笔竟插入了鼻腔。"经过山医大一院耳鼻喉科专家的细心手术，"插在浩浩鼻腔，深达5厘米的铅笔被顺利取出。10月6日，家住晋中的赵先生督促儿子浩浩赶紧完成作业。可浩浩并没有专心写作业，而是和家里养的小猫玩了起来。<b>加粗标签<i>斜体文本</i></b>训了儿子几句。一见爸爸发火，浩浩吓得跑了起来，不慎摔倒，竟将手里一支长十几厘米的铅笔从鼻孔插入鼻腔内。赵先生见此情景，赶紧带孩子到当地医院治疗。因为担心铅笔插入脑部，造成脑部损伤，医生建议赵先生转到省城的大医院治疗。</p>
<p>本报讯<k>（记者魏薇通讯员范晓丽王建明文/摄）10月6日，8岁男童浩浩在写作业时不慎摔倒，手中的铅笔竟插入了鼻腔。"经过山医大一院耳鼻喉科专家的细心手术，"插在浩浩鼻腔，深达5厘米的铅笔被顺利取出。10月6日，家住晋中的赵先生督促儿子浩浩赶紧完成作业。可浩浩并没有专心写作业，而是和家里养的小猫玩了起来。<b><i>赵先生</i></b>训了儿子几句。一见爸爸发火，浩浩吓得跑了起来，不慎摔倒，竟将手里一支长十几厘米的铅笔从鼻孔插入鼻腔内。赵先生见此情景，赶紧带孩子到当地医院治疗。因为担心铅笔插入脑部，造成脑部损伤，医生建议赵先生转到省城的大医院治疗。</p>
©<!--版权符号-->
<!--图片标签的使用 src:路径属性 alt: 图片未加载文字提示 title:鼠标悬停文字 -->
<img src="images/201610090849570.jpg" alt="手机" title="鼠标悬停提示文字" width="200" height="120"/>
<!--a标签连接跳转 target="_blank" : 从另一个浏览器窗口打开 target="_self":从本窗口打开-->
<a href="../page/demo/news.html" target="_blank"></a>
<a href="http://www.baidu.com" target="_self">百度</a>
<!--本页面锚链接 href="#top":找到name="top"的标签 name="bottom" ：跟上面一样 -->
<a href="#top" name="bottom">到顶部</a>
<!--发邮箱 href="mailto:[email protected]"-->
<a href="mailto:[email protected]">给我发邮件</a>
<!--无序列表: 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。-->
<ul type="circle">
<li>这是一个列表项1</li>
<li>这是一个列表项2</li>
<li>这是一个列表项3</li>
<li>这是一个列表项4</li>
<li>这是一个列表项5</li>
</ul>
<!--有序列表：列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。-->
<ol type="I">
<li>这是一个列表项1</li>
<li>这是一个列表项2</li>
<li>这是一个列表项3</li>
<li>这是一个列表项4</li>
<li>这是一个列表项5</li>
</ol>
<!--自定义列表： 以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。-->
<dl>
<dt>姓名</dt>
<dd>小王</dd>
<dt>年龄</dt>
<dd>20</dd>
</dl>
<!--
表格行内控制属性(用处不大,后期都用css)
cellpadding 单元格和内容之间间距
cellspacing 单元格和单元格之间的距离
caption 表名
colspan 跨列
rowspan 跨行
border
align: left right center
valign: top bottom middle baseline
-->
<table align="center" border="0" cellpadding="10" cellspacing="1" bgcolor="#000000" height="500" width="600">
<caption>课程表</caption>
<thead>
<tr bgcolor="#fff">
<th colspan="2">星期一</th>
<th>星期一</th>
<th>星期一</th>
<th>星期一</th>
<th>星期一</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#fff">
<td rowspan="2" align="center" valign="baseline">HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
<tr bgcolor="#fff">
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
<tr bgcolor="#fff">
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
<tr bgcolor="#fff">
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
<tr bgcolor="#fff">
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
<tr bgcolor="#fff">
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="#fff">
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
</tfoot>
</table>
<!-- href="news.html" target="kj" ：跳转 news.html 页面并且在 name="kj" 框架内打开页面 -->
<a href="news.html" target="kj">百度</a>
<a href="userset.html" target="kj">新浪</a>
<a href="http://www.optimus.top" target="kj">optimus</a>
<!-- name="kj" ：定义框架名 上面a标签倒转过来 -->
<iframe name="kj" frameborder="1" width="100%" height="500" scrolling="no" ></iframe>
</body>
</html>
news.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<p>本报讯<k>（记者魏薇通讯员范晓丽王建明文/摄）10月6日，8岁男童浩浩在写作业时不慎摔倒，手中的铅笔竟插入了鼻腔。"经过山医大一院耳鼻喉科专家的细心手术，"插在浩浩鼻腔，深达5厘米的铅笔被顺利取出。10月6日，家住晋中的赵先生督促儿子浩浩赶紧完成作业。可浩浩并没有专心写作业，而是和家里养的小猫玩了起来。<b><i>赵先生</i></b>训了儿子几句。一见爸爸发火，浩浩吓得跑了起来，不慎摔倒，竟将手里一支长十几厘米的铅笔从鼻孔插入鼻腔内。赵先生见此情景，赶紧带孩子到当地医院治疗。因为担心铅笔插入脑部，造成脑部损伤，医生建议赵先生转到省城的大医院治疗。</p><p>本报讯<k>（记者魏薇通讯员范晓丽王建明文/摄）10月6日，8岁男童浩浩在写作业时不慎摔倒，手中的铅笔竟插入了鼻腔。"经过山医大一院耳鼻喉科专家的细心手术，"插在浩浩鼻腔，深达5厘米的铅笔被顺利取出。10月6日，家住晋中的赵先生督促儿子浩浩赶紧完成作业。可浩浩并没有专心写作业，而是和家里养的小猫玩了起来。<b><i>赵先生</i></b>训了儿子几句。一见爸爸发火，浩浩吓得跑了起来，不慎摔倒，竟将手里一支长十几厘米的铅笔从鼻孔插入鼻腔内。赵先生见此情景，赶紧带孩子到当地医院治疗。因为担心铅笔插入脑部，造成脑部损伤，医生建议赵先生转到省城的大医院治疗。</p><p>本报讯<k>（记者魏薇通讯员范晓丽王建明文/摄）10月6日，8岁男童浩浩在写作业时不慎摔倒，手中的铅笔竟插入了鼻腔。"经过山医大一院耳鼻喉科专家的细心手术，"插在浩浩鼻腔，深达5厘米的铅笔被顺利取出。10月6日，家住晋中的赵先生督促儿子浩浩赶紧完成作业。可浩浩并没有专心写作业，而是和家里养的小猫玩了起来。<b><i>赵先生</i></b>训了儿子几句。一见爸爸发火，浩浩吓得跑了起来，不慎摔倒，竟将手里一支长十几厘米的铅笔从鼻孔插入鼻腔内。赵先生见此情景，赶紧带孩子到当地医院治疗。因为担心铅笔插入脑部，造成脑部损伤，医生建议赵先生转到省城的大医院治疗。</p>
<a href="" name="bottom"></a>
</body>
</html>
- 实战示例展示：