0102 HTML模板配置、HTML规范、HTML基本标签（重点掌握a标签）、【锚点】

HTML模板配置
HTML规范
HTML树形结构
HTML基本标签

　　　　4.1 h标签

　　　　4.2 段落标签

　　　　4.3 a标签

　　　　4.4 特殊符号

　　　　4.5 文本装饰标签

　　　　4.6 即将被淘汰的标签

1 HTML模板配置

　　1.1 打开 Preference -->> Browse Packages

　　　　　　会弹出一个文件，这个文件夹里面是所有下载好的插件

　　1.2 选中 SublimeTmpl -->> templates

　　　　　　里面有一个 html.tmpl ，在编辑器中打开这个文件，用下面的代码进行代替然后保存即可

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="$3" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "$2" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title>$1</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13     </style>
14 </head>
15 
16 <body>
17     $0
18 </body>
19 </html>

模板源代码

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="$3" />
 6     <meta name="Keywords" content="$2" />
 7     <title>$1</title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24     </style>
25 </head>
26 
27 <body>
28     $0
29 </body>
30 </html>

模板形式（EasyUI）

2 HTML规范

　　2.1 标签必须闭合
　　2.2 标签名一定用小写
　　2.3 代码缩进，让阅读代码更加易懂*****
　　2.4 特殊符号使用< >   " &….;
　　2.5 命名规范，见名知意

3 HTML树状结构

4 基本标签

　　4.1 标题标签h

　　　　h标签是块级标签，其中h1标签在一个页面只能出现一个，目的是为了seo

　　　　<h1>我是大主题</h1>
　　　　<h2>我是主题二</h2>
　　　　<h3>我是主题三</h3>
　　　　<h4>我是主题四</h4>
　　　　<h5>我是主题五</h5>
　　　　<h6>我是主题六</h6>

　　4.2 段落标签p

　　　　p标签是块级标签

　　4.3标签a

　　　　a标签是行内元素

　　　　href：跳转地址

　　　　　　#：表示跳转到当前页

　　　　　　javascript:void(0)；：表示实现对应的js效果，这里是void(0)，就是没有效果

　　　　　　http://www.baidu.com：表示跳转到百度首页

1 <p>
2         <a href="http://www.baidu.com" target="_blank">点击跳转到百度</a>
3         <br />
4 
5         <a href="javascript:void(0);">点击实现js效果</a>
6         <br />
7 
8         <a href="#">点击回到顶部</a>
9     </p>

a标签

　　　　4.3.1 利用a标签实现锚点

　　　　　　<a href="#di" id="ding">我在顶部位置，点击我回到底部</a>

　　　　　　<a href="#ding" id="di">我在底部位置，点击我回到顶部</a>

　　　　　　　　#di：表示跳转到当前页id为di的标签处

　　4.4 特殊符号　　

　　　　空格———— 
　　　　小于————<
　　　　大于————>
　　　　引号————"
　　　　版权————©
　　　　×叉————×
　　　　&符号——— &

　　4.5 文本装饰标签

　　　　b：加粗标签（只有加粗意义）

　　　　strong：高级加粗标签（利于SEO搜索引擎优化，强调文本）

　　　　i：倾斜标签

　　　　u：下划线标签

　　　　s：删除线标签

 1 <p>
 2         <b>我是加粗的文本</b>我是用来对比的文本
 3         <br />
 4 
 5         <i>我是倾斜标签</i>
 6         <br />
 7 
 8         <u>我是下划线标签</u>
 9         <br />
10 
11         <s>删除标签</s>现价￥88
12         <br />
13 
14         <strong>
15             我是加粗标签（用了后的文本就能在百度中就能够被搜索到）
16         </strong>
17     </p>

文本装饰标签

　　4.6 其他标签（了解即可）

　　　　br：换行

　　　　hr：下划线

　　　　　　　　size的值没有限制

　　　　font：文本装饰

　　　　　　<font color="#E41313">我是font标签</font>

　　　　　　<font size="3">我是font标签</font>

　　　　　　　　size的值为：1~7

　　　　marquee：文本移动标签　　　　　　

　　　　　　behavior：行为属性
　　　　　　　　alternate 交替滚动
　　　　　　　　scroll 滚动
　　　　　　　　slide 滑落

　　　　　　direction：移动方向

　　　　　　　　right、left、up、down

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title>网页标题</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13     </style>
14 </head>
15 
16 <body>
17     <!-- 方向属性 -->
18     <marquee behavior="" direction="right">三少</marquee>
19     <hr color="#CA0909"size="10"/>
20     <marquee behavior="" direction="LEFT">WYM</marquee>
21     <hr color="#CA0909"size="10"/>
22     <marquee behavior="" direction="UP">WYC</marquee>
23     <hr color="#CA0909"size="10"/>
24     <marquee behavior="" direction="down">WYS</marquee>
25     <hr color="#CA0909"size="10"/>
26     <br />
27     
28     <!-- 移动属性 -->
29     <marquee behavior="alternate" direction="down" height="100px" width="100px" style="border:1px solid red;">WYS</marquee> 
30     <br />
31     <marquee behavior="scroll" direction="down" height="100px" width="100px" style="border:1px solid red;">WYS</marquee>
32     <br />
33     <marquee behavior="slide" direction="down" height="100px" width="100px" style="border:1px solid red;">WYS</marquee>
34     <hr color="#CA0909"size="10"/>
35     <br />
36     
37     <!-- 嵌套效果 -->
38     <marquee behavior="alternate" direction="down" height="100px" width="100px" style="border:1px solid red;">
39         <marquee behavior="alternate" direction="RIGHT">WYS</marquee>
40     </marquee>
41 
42     <script type="text/javascript">
43         
44     </script>
45 </body>
46 </html>

marquee代码

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5         <meta name="Keywords" content="" />
 6         <mata name = "description" content = "" />
 7         <title>html模板</title>
 8         <style>
 9             *{
10                 margin: 0;
11                 padding: 0;
12             }
13         </style>
14     </head>
15 <body>
16     <a href="#di" id="ding">我在顶部位置，点击我回到底部</a>
17     <h1>标题</h1>
18     <p>这是段落：段落是块级元素</p>
19     <p style="height:2000px;">我是空白段落</p>
20     <h2>特殊符号的表示</h2>
21     <p>
22         空格 ---- fury&nbsp;&nbsp;&nbsp;&nbsp;fury&nbsp;&nbsp;fury&nbsp;fury 
23         <br />
24         小于 ---- &lt;&lt;
25         <br />
26         大于 ---- &gt;&gt;
27         <br />
28         & ---- &amp;
29         <br />
30         引号 ---- &quot;&quot;
31         <br />
32         版权号 ---- &copy;
33         <br />
34         叉 ---- &times;
35     </p>
36 
37     <h2>文本标签</h2>
38     <p>
39         <b>我是加粗的文本</b>我是用来对比的文本
40         <br />
41 
42         <i>我是倾斜标签</i>
43         <br />
44 
45         <u>我是下划线标签</u>
46         <br />
47 
48         <s>删除标签</s>现价￥88
49         <br />
50 
51         <strong>
52             我是加粗标签（用了后的文本就能在百度中就能够被搜索到）
53         </strong>
54     </p>
55 
56     <h2>A标签</h2>
57     <p>
58         <a href="http://www.baidu.com" target="_blank">点击跳转到百度</a>
59         <br />
60 
61         <a href="javascript:void(0);">点击实现js效果</a>
62         <br />
63 
64         <a href="#">点击回到顶部</a>
65     </p>
66 
67     <h2>marquee标签</h2>
68     <marquee style="border:1px solid red" height="100px" width="100px" behavior="right">wys</marquee>
69 
70     <h2>font标签</h2>
71     <font color="#E41313">我是font标签</font> <span>通过ctr+shift+c打开调色板</span>
72 
73     <h2>hr标签</h2>
74     <hr color="blue" size="10"/>
75     <a href="#ding" id="di">我在底部位置，点击我回到顶部</a>
76 
77     <script type="text/javascript"> 
78         
79     </script>
80 </body>
81 </html>

本博客所有源代码

小练习

　　利用 a标签实现锚点

　　利用 marquee标签实现倾斜移动

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title>三少</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13     </style>
14 </head>
15 
16 <body>
17     <a href="#diBu" id="dingBu">点击回到底部</a>
18     <h1>Rod Johnson</h1>
19     <hr />
20     <p>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#EA4B1D" size="4"><strong>Spring Framework</strong></font>创始人，著名作者。 Rod在悉尼大学不仅获得了计算机学位，同时还获得了音乐学位。更令人吃惊的是在回到软件开发领域之前，他还获得了音乐学的博士学位。 有着相当丰富的C/C++技术背景的Rod早在1996年就开始了对Java服务器端技术的研究。他是一个在保险、电子商务和金融行业有着丰富经验的技术顾问，同时也是JSR-154（Servlet2.4）和JDO2.0的规范专家、JCP的积极成员，是Java development community中的杰出人物。</p>
21     <hr />
22     <p>
23         <a href="https://www.baidu.com/" target="_blank">百度首页</a>
24     </p>
25     <hr />
26     <p style="height: 3000px;"></p>  <!-- 目的是：拉开空间 -->
27     <hr />
28     <marquee behavior="alternate" direction="down" height="100px" width="100px" style="border: 1px solid red">
29         <marquee behavior="alternate" direction="right">WYS</marquee>
30     </marquee>
31     <hr />
32     <a href="#dingBu" id="diBu">点击回到顶部</a>
33 
34     <script type="text/javascript">
35         
36     </script>
37 </body>
38 </html>

小练习源码

posted @ 2017-05-09 14:14 寻渝记阅读(193) 评论(0) 收藏举报

刷新页面返回顶部

0102 HTML模板配置、HTML规范、HTML基本标签（重点掌握a标签）、【锚点】

1 HTML模板配置

1.1 打开 Preference -->> Browse Packages

1.2 选中 SublimeTmpl -->> templates

2 HTML规范

2.1 标签必须闭合 2.2 标签名一定用小写 2.3 代码缩进，让阅读代码更加易懂***** 2.4 特殊符号使用&lt; &gt; &nbsp; &quot; &….; 2.5 命名规范，见名知意

3 HTML树状结构

4 基本标签

4.1 标题标签h

4.2 段落标签p

4.3标签a

4.3.1 利用a标签实现锚点

4.4 特殊符号

4.5 文本装饰标签

4.6 其他标签（了解即可）

公告

　　1.1 打开 Preference -->> Browse Packages

　　1.2 选中 SublimeTmpl -->> templates

　　2.1 标签必须闭合
　　2.2 标签名一定用小写
　　2.3 代码缩进，让阅读代码更加易懂*****
　　2.4 特殊符号使用< > " &….;
　　2.5 命名规范，见名知意

　　4.1 标题标签h

　　4.2 段落标签p

　　4.3标签a

　　　　4.3.1 利用a标签实现锚点

　　4.4 特殊符号　　

　　4.5 文本装饰标签

　　4.6 其他标签（了解即可）