HTML常用标签练习（1）

学习HTML第一天，学习了一些常用的html标签

HBuileder的使用，适用于html编写

1.html head部分的学习

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--head了解部分-->
 5         <meta name="keywords" content="head mibin" />
 6         <meta name="author" content="mibin" />
 7         <meta name="description" content="head部分的学习" />
 8         <!--head重点-->
 9         <meta http-equiv="content-type" content="text/html ;charset=utf-8" />
10         <meta http-equiv="expires" content="0"  />
11         <meta http-equiv="refresh" content="3;url=http://www.baidu.com "/>
12         <title>head学习</title>
13     </head>
14     <body>
15     </body>
16 </html>

<meta http-equiv="expires" content="0"  />    不建立缓存

<meta http-equiv="refresh" content="3;url=http://www.baidu.com "/>   3秒后跳转到百度

expires用于设定网页的过期时间,一旦过期就必须从服务器上重新加载.时间必须使用GMT格式，也可以是0.

expires示例

<meta http-equiv="expires" content="Sunday 26 October 2008 01:00 GMT" />

SEO

SEO是由英文Search Engine Optimization缩写而来，中文意译为“搜索引擎优化”！SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。而SEM，搜索引擎营销，就是根据用户使用搜索引擎的方式，利用

用户检索信息的机会尽可能将营销信息传递给目标用户。在目前企业网站营销中，SOM（SEO+SEM）模式越来越显重要。

2.html body部分的学习

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>body中常用标签</title>
 6     </head>
 7     <body bgcolor="aquamarine" style="background-repeat: no-repeat;background-size: cover;" background="img/girl.jpg">
 8     <body>
 9         <!--标题标h1~h6-->
10         <h1></h1>
11         <h2></h2>
12         <h3></h3>
13         <h4></h4>
14         <h5></h5>
15         <h6></h6>
16         <!--水平线hr-->
17         <hr color="red" size="1"  width="200px" align="left" />
18         <hr color="red" size="7"  width="60%" align="center" />
19         <!--段落标签p-->
20         <p></p>
21         <!--换行标签br-->
22         <p>【特朗普签署旅行禁令 涉及委内瑞拉、朝鲜等8个国家】当地时间9月25日，<br/>
23             美国总统特朗普签署旅行禁令宣言，此次更新涉及八个国家：乍得，委内瑞拉，朝鲜伊朗，<br/>
24             利比亚，索马里，叙利亚和也门。条款因不同国家有所不同，措施包括暂缓移民入境，<br/>
25             暂缓非移民入境及严格审查非移民入境等。</p>
26         <!--预格式化文本标签-->
27         <pre>
28             23
29             4
30             78
31         </pre>
32         <!--实体字符标签 空格 & 大于小于-->
33         &lt;pre&gt; &amp;&copy;版权符号<br />
34         &nbsp;嘿嘿<br />
35         <!--文本标签-->
36         <del>我是中划线</del>
37         <u><i><b>我是加粗加黑倾斜  下划线</b></i></u>
38         <br />
39         <!--字体标签-->
40         <!--<font color="blue" size="4" face=" 微软雅黑" style="font-size: 200px;font-weight: bold;">中国北京</font>-->
41         <!--块元素标签，独占一行，通常用来作页面布局-->
42         <div style=" 150px; height: 150px; border: 2px solid crimson;">我是一个功能区</div>
43         <!--行内元素，在一行内显示-->
44         <span>我是一行</span>
45         <span>我也是一行</span>
46         <span>我也是一行</span>
47         <!--列表标签，无序标签，有序标签-->
48         <!--快捷方式创建列表 ul>li{内容}*3+按下tab键-->
49         <ul>
50             <li>wo</li>
51             <li>wo</li>
52             <li>wo</li>
53         </ul>
54         <ol>
55             <li>ni</li>
56             <li>ni</li>
57             <li>ni</li>
58         </ol>
59     </body>
60 </html>
补充：

字母列表顺序efg

HTML 自定义列表

　　　　自定义列表不仅仅是一列项目，而是项目及其注释的组合。

　　　　自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

　　　　　　<dl>
　　　　　　　　<dt>Coffee</dt>
　　　　　　　　<dd>- black hot drink</dd>
　　　　　　　　<dt>Milk</dt>
　　　　　　　　<dd>- white cold drink</dd>
　　　　　　</dl>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>图片标签和音频视频的学习</title>
 6         <!--
 7         图片标签img
 8         src：设置资源的访问路径（本地||网络中）
 9         title：当鼠标移上去的时候给出提示信息
10         alt：当资源加载失败后给出提示信息
11         设置图片的宽度，如果只是设置图片的宽度的话，高度也会进行等比变化
12         height:设置图片的高度，如果只是设置图片的高度的话，宽度也会进行等比变化
13            
14         总结：如果需要对一个图片的宽度和高度进行设置，需要同时加上width和height才行(单位：一种是固定值像素  另一种是百分比)
15         
16         音视频标签embed
17         -->
18     </head>
19     <body>
20         <!--图片标签img -->
21         <!--访问本地的图片资源 -->
22         <img src="img/10.jpg" />
23         <!--访问网络中的图片资源-->
24         <img src="https://www.baidu.com/img/bd_logo1.png" />
25         <!--对img属性值设置-->
26         <img src="img/101.jpg" title="我是美女" alt="美女丢失"/>
27         <img src="img/10.jpg " width="100px" height="100px" />
28         <img src="img/10.jpg " width="20%" height="20%"  />
29         
30         <!--音频视频embed标签-->
31         <!--embed:IE用户体验性比较好，谷歌和火狐体验性不好-->
32         <embed src="music/1.mp3" autostart="false" loop='true' hidden='false' width="250px" height="100px"></embed>
33         <embed src='http://player.youku.com/player.php/sid/XMjk3NDI5MDUzMg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
34     </body>
35 </html>



 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8">
 6         <title>超链接a标签的学习</title>
 7     </head>
 8     <!--
 9             超链接a标签
10              a:
11              作用：实现页面间资源互相跳转访问
12              属性：
13               href:设置访问的资源路径
14               target:设置访问到的资源的打开位置
15                  _self:在当前窗口打开资源（默认的）
16                  _blank:在新窗口打开资源
17                  _parent:在当前页面窗口的父页面打开资源
18                  _top:在当前页面窗口的顶层页面打开资源
19                  
20                           重点：锚点
21                           锚点：是一个能够在页面内部进行资源跳转访问的功能
22                           使用场合：当一个页面资源信息量太大的情况下，可能需要进行页面内部资源的跳转  （京东）
23           
24                     应用：使用锚点的步骤
25           1.在需要进行跳转访问的页面内部设置一个锚点名称
26            <a name="one"></a>
27           2.使用锚点功能进行跳转访问即可(#锚点名称)
28            <a href="#one">第一集</a>
29            
30           3.特殊：<a href="#">返回页面顶端（固定写法）</a>
31         -->
32     <body>
33     <!--访问本项目资源-->
34     <a href="04image_embed.html">04image_embed.html</a>
35     <!--访问网络中的资源-->
36     <a href="http://www.baidu.com">百度首页</a>
37     <!--a标签通常会嵌套一个图片标签-->
38     <a href="http://www.baidu.com"><img src="img/10.jpg"></a> <br />
39     <a href="http://www.163.com" target="_blank"><img src="img/10.jpg"/></a>
40     <a href="06a.html">a标签的锚点功能</a>  <br />
41     <a href="06a.html#three">a标签的锚点功能（第三章）</a>
42     </body>
43 
44 </html>

用于锚点测试的一个html