我的第一个网页
<!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>