我的第一个网页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
欢迎访问我的网页！
</body>
</html>
HTML文档类型
目前常用的两种文档类型xhtml 1.0和html5
在sublim中，保存html格式文档，按快捷键
xhtml 1.0 快捷键 html:xt+tab键
<!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>XHTML 1.0</title> </head> <body> </body> </html>
html5 快捷键 !+tab键
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5</title> </head> <body> </body> </html>
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>XHTML 1.0</title>
</head>
<!--1、标签建议全部小写-->
<body>
<!-- 2、属性用引号引起来 -->
<div class="aa" id="div1"></div>
<!-- 3、标签应该闭合 成对标签应该成对出现，单个标签在结尾加“/”-->
<br>
<br />
<!-- 4、img标签加上alt属性 -->
<img src = "images/1.jpg" alt="风景图">
</body>
</html>
标题、段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html标题、段落</title>
</head>
<body>
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>
<p>石家庄市新华区教育局充分发挥学区管理制、一体化 <!--表示空格-->办学和集团化办学的“名校孵化器”作用，推动城乡教育高质量均衡发展。<br /><!--表示换行-->在全市率先启动学区管理制改革试点工作，多渠道强力推进学区管理制改革深入实施。目前，全区共建机一、西苑、合作等9个试点学区、39个试点校，学区管理制试点校达到72%，试点校在区三个教育资源带达到了全覆盖，覆盖范围全市最广。到2020年，力争学区管理制改革覆盖面达到80%以上。</p><!--表示大于号--> <br />
5>3<!--表示小于号--> <br />
1<3
</body>
</html>
html块、含样式的标签
html块
1、div标签 块元素，表示一块内容，没有具体的语义。
2、span标签 行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签
1、em标签 行内元素，表示语气中的强调词
2、i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇
3、b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
4、strong标签 行内元素，表示非常重要的内容
语义化的标签
语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html标题、段落</title>
</head>
<body>
<p>其实，<div>那树上并没有树叶</div>，<span>树叶是一位画家</span>画上去的，它不是<em>真树叶</em>，<i>但它达到了</i>真树叶生动真实的效果，<b>给了那位病人</b>一个坚强的信念：<strong>活着，只要那片树叶不落，我的生命就不会死</strong>。结果，他真的康复了，走出病房去那棵树下看个究竟。</p>
</body>
</html>
绝对路径和相对路径
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html图像及路径</title> </head> <body> <img src="images/3.jpg" alt="图画"> <img src="c:\Users\blur\Desktop\002.jpg" alt="水果"> <img src="./images/002.jpg" alt="水果"> <!-- ./可以省略--> <img src="../images/002.jpg" alt="水果"> </body> </html>
链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接</title> </head> <body> <a href="http://www.baidu.com" title="跳转到百度的网站">百度</a> <a href="http://www.baidu.com" title="跳转到百度的网站"> <img src="images/4.jpg" alt="卡通"> </a> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <a href="#">新闻标题</a> <!--链接到页面顶部--> <a href="javascript:;">缺省值</a> <!--不做任何操作--> </body> </html>
页面内跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面内跳转</title> </head> <body> <a href="#biaoti01">标题一</a> <a href="#biaoti02">标题二</a> <a href="#biaoti03">标题三</a> <h1 id="biaoti01">标题1</h1> <p>欧·亨利在他的小说《最后一片树叶》里讲了一个故事，说：有个病人躺在病床上，绝望地看着窗外一棵被秋风扫过的萧瑟的树。他突然发现，在那树上，居然还有一片葱绿的树叶没有落。病人想，等这片树叶落了，我的生命也就结束了。于是，他终日望着那片树叶，等待它掉落，也悄然地等待自己生命的终结。但是，那树叶竟然一直未落，直到病人身体完全恢复了健康，那树叶依然碧如翡翠。</p> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h1 id="biaoti02">标题2</h1> <p>欧·亨利在他的小说《最后一片树叶》里讲了一个故事，说：有个病人躺在病床上，绝望地看着窗外一棵被秋风扫过的萧瑟的树。他突然发现，在那树上，居然还有一片葱绿的树叶没有落。病人想，等这片树叶落了，我的生命也就结束了。于是，他终日望着那片树叶，等待它掉落，也悄然地等待自己生命的终结。但是，那树叶竟然一直未落，直到病人身体完全恢复了健康，那树叶依然碧如翡翠。</p> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h1 id="biaoti03">标题3</h1> <p>欧·亨利在他的小说《最后一片树叶》里讲了一个故事，说：有个病人躺在病床上，绝望地看着窗外一棵被秋风扫过的萧瑟的树。他突然发现，在那树上，居然还有一片葱绿的树叶没有落。病人想，等这片树叶落了，我的生命也就结束了。于是，他终日望着那片树叶，等待它掉落，也悄然地等待自己生命的终结。但是，那树叶竟然一直未落，直到病人身体完全恢复了健康，那树叶依然碧如翡翠。</p> </body> </html>
在本窗口打开链接和开一个新窗口打开链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接</title> </head> <body> <a href="http://www.baidu.com" title="链接到百度" target="_blank">百度网</a> <a href="http://www.baidu.com" title="链接到百度" target="_self">百度网</a> </body> </html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<h3>有序列表</h3>
<ol>
<li>学习html</li>
<li>学习css</li>
<li>学习javascript</li>
</ol>
<!--快捷键： ol>li*3 tab -->
<h3>无序列表</h3>
<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>
<!-- 快捷键：ol>(li>a)*5 tab -->
<h3>定义列表</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>html</dt>
<dd>负责页面的行为</dd>
</dl>
<!-- 快捷键：dl>(dt+dd)*3 tab 平级用+父子级用>-->
</body>
</html>
表格
table常用标签
1、table标签：声明一个表格
2、tr标签：定义表格中的一行
3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性：
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan 设置单元格水平合并
7、rowspan 设置单元格垂直合并
传统布局：
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
2、单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或者css样式设置单元格中元素的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <h3>产品列表</h3> <table border="1" width="500" height="300"> <tr> <th valign="top">序号</th> <th>产品名称</th> <th>产品价格</th> <th>产品数量</th> </tr> <tr> <td align="center">1</td> <td align="center">苹果</td> <td>5.00</td> <td>1000</td> </tr> <tr> <td align="center">2</td> <td align="center">橘子</td> <td>4.00</td> <td>2000</td> </tr> </table> <h3>个人简历表</h3> <!-- 快捷键：table>(tr>td*5)*6 tab--> <table border="1" width="600" height="300"> <tr> <th colspan="5" align="left">基本情况</th> </tr> <tr> <td width="18%">姓名</td> <td width="18%"></td> <td width="18%">性别</td> <td width="18%"></td> <td rowspan="5" width="28%"><img src="images/6f.jpg" alt="人物图片"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简历</title>
</head>
<body>
<table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="260" valign="top" bgcolor="#f2f2f2">
<table width="260" border="0" cellpadding="0" cellspacing="0">
<tr height="100">
<td></td>
<td></td>
</tr>
<tr>
<td width="230" align="right"><img src="images/12.jpg" alt="人物图片"></td>
<td width="30"></td>
</tr>
<tr>
<td align="right">张大山</td>
<td></td>
</tr>
<tr>
<td align="right">18265652323</td>
<td></td>
</tr>
<tr>
<td align="right">zhangdashan@163.com</td>
<td></td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="480">
<tr height="75">
<td></td>
</tr>
<tr>
<td align="right"><img src="images/2.jpg" alt="人物图片"></td>
</tr>
</table border="0" cellpadding="0" cellspacing="0" width="480">
<hr />
<table border="0" cellpadding="0" cellspacing="0" width="480" height="180">
<tr>
<td colspan="2"><b>个人基本情况</b></td>
</tr>
<tr>
<td width="50%">姓名：张三</td>
<td width="50%">籍贯：北京市朝阳区</td>
</tr>
<tr>
<td>性别：男</td>
<td>身高：175cm</td>
</tr>
<tr>
<td>民族：汉族</td>
<td>体重：75kg</td>
</tr>
<tr>
<td>出生年月：1981.8.28</td>
<td>电话:13888888888</td>
</tr>
<tr>
<td>专业：软件工程</td>
<td>现居地：北京</td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</body>
</html>
浙公网安备 33010602011771号