码迷,mamicode.com
首页 > Web开发 > 详细

html

时间:2020-03-24 12:57:27      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:石家庄市   style   标签   blur   public   快捷   搜索引擎   head   三级   

我的第一个网页

<!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

标签:石家庄市   style   标签   blur   public   快捷   搜索引擎   head   三级   

原文地址:https://www.cnblogs.com/ql0302/p/12556855.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!