html
作者：互联网
我的第一个网页
<!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>
标签：树叶,标签,学区,语义,标题,html 来源： https://www.cnblogs.com/ql0302/p/12556855.html