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>
那么,就先这样吧~北方卖萌中...