html标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head><meta charset="UTF-8">
 4     <title>Title</title>
 5 </head>
 6 <body>
 7     <div>参考</div>
 8     <div>粗体</div>
 9 </body>
10 </html>

一些小需求,我希望这个标签的字体看起来比起其它的粗,我们可以使用css样式更改font-size,是的,这是绝对可以的,但是我们现在不讨论css,一点都不沾,我们只使用标签本身,使用h系列(h1-6),这是一个好方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head><meta charset="UTF-8">
 4     <title>Title</title>
 5 </head>
 6 <body>
 7     <div>参考</div>
 8     <h1>h1</h1>
 9     <h2>h2</h2>
10     <h3>h3</h3>
11     <h4>h4</h4>
12     <h5>h5</h5>    
13     <h6>h6</h6>
14 </body>
15 </html>

 

貌似h3比较合适,h6太小了,我都看花眼了,好吧,我现在还想要个斜体了,这可怎么办,其实我想使用b跟i标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head><meta charset="UTF-8">
 4     <title>Title</title>
 5 </head>
 6 <body>
 7     <div>参考</div>
 8     <div><b>粗体</b></div>
 9     <div><i>粗体</i></div>
10 </body>
11 </html>

 

这很不错,这就是标签们的妙用,不需要css就可以做出我们想要的东西,这很有好处,因为我们不用写css了,也不用跟标签关联id、class等,这就减少了文件的传输量,我们都知道我们的静态资源需要靠网络走http协议传输,传输就需要占用资源,当然你可以说我们可以将这些放在cdn上,但是cdn也是按流量计费的,你又说那我自己搭建memcache或者redis集群什么的,但是不论你怎么做,你占用的资源都是多了,而且html又是从上至下解析给标签渲染css,又要一些时间,所以,如果有标签本身就可以达到的效果就不要用css写。

 

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element是所有的标签,但是你不需要背,因为这太多了,我们可以没事看看,积少成多,哪怕一天一个,但是有一个很重要的部分你需要知道:即将被废弃的标签与已经被废弃的标签,不要使用它!如何分辨这些标签呢,就决定是你了!IDE!

 

一目了然!回来吧,IDE!

 

好吧,即便如此我们还是需要一些最基本最常用的标签的,因为它们太重要了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head><meta charset="UTF-8">
 4     <title>Title</title>
 5 </head>
 6 <body>
 7     <div>无任何特殊语义的块级标签</div>
 8     <span>无任何特殊语义的内联标签</span>
 9     <p>段落标签,多用于文章,自带一些行间距</p>
10     <a href="https://www.baidu.com" target="_blank">超链接标签</a>
11     <img src="http://img1.imgtn.bdimg.com/it/u=2197420880,1654835261&fm=26&gp=0.jpg" alt="对此图片的描述,一定要写哦">
12     <ul>
13         <!--条目集合标签-->
14         <li>条目标签</li>
15         <li>条目标签</li>
16         <li>条目标签</li>
17     </ul>
18     <select>
19         <!--下拉选择标签-->
20         <option>可选择的值</option>
21         <option>可选择的值</option>
22         <option>可选择的值</option>
23         <option>可选择的值</option>
24         <option>可选择的值</option>
25         <option>可选择的值</option>
26         <option>可选择的值</option>
27     </select>
28 </body>
29 </html>

 

还有我们各种功能的input标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head><meta charset="UTF-8">
 4     <title>Title</title>
 5 </head>
 6 <body>
 7     <input type="button" value="单纯的点击标签" />
 8     <hr>
 9     <form>
10         <input type="submit" />
11         <input type="reset" />
12     </form>
13     <hr>
14     <input />
15     <input type="password" />
16     <hr>
17     <p>性别(单选框)
18         <br /><input type="radio" name="sex" />
19         <br /><input type="radio" name="sex" />
20         <!--必须设置相同的name!-->
21     </p>
22     <hr>
23     <p>爱好(多选框)
24         <br /><input type="checkbox" />
25         <br /><input type="checkbox" />
26         <br /><input type="checkbox" />
27         <br /><input type="checkbox" />
28         <br /><input type="checkbox" />
29     </p>
30 </body>
31 </html>

 

最后在列出一个网站的基本框架所需要的标签(看看就好)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head><meta charset="UTF-8">
 4     <title>Title</title>
 5 </head>
 6 <body>
 7     <header>
 8         <picture>
 9             <img src="" alt="logo">
10         </picture>
11         <section>
12             <h1>总标题</h1>
13         </section>
14     </header>
15 
16     <nav>
17         <menu></menu>
18         <menu></menu>
19         <menu></menu>
20     </nav>
21 
22     <aside>
23         <ul>
24             <li><a href=""></a></li>
25             <li><a href=""></a></li>
26         </ul>
27         <ul>
28             <li><a href=""></a></li>
29             <li><a href=""></a></li>
30         </ul>
31         <ul>
32             <li><a href=""></a></li>
33             <li><a href=""></a></li>
34         </ul>
35     </aside>
36 
37     <div>
38         <article>
39             <h2></h2>
40             <picture>
41                 <img src="" alt="" >
42                 <source />
43             </picture>
44         </article>
45         <article>
46             <h2></h2>
47             <video></video>
48         </article>
49         <article>
50             <h2></h2>
51             <p></p>
52             <p></p>
53             <p></p>
54         </article>
55     </div>
56 
57     <footer>
58         <a></a>
59     </footer>
60 </body>
61 </html>

那么,就先这样吧~北方卖萌中...

 

posted @ 2017-08-30 23:02  北方姆Q  阅读(187)  评论(0编辑  收藏  举报