PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

1、HTML基础学习 第一天_html/css_WEB-ITnose

原创
2016-06-24 11:24:11 844浏览

1、基本标签属性

 1  2  6  7  8  9 10 11 

This is heading 1

12

This is heading 2

13

This is heading 3

14

This is heading 4

15
This is heading 5
16
This is heading 6
17 18
19 20 link_baidu 21 22
23 24 25 26

this is paragraph 1

27

this is paragraph 2

28

this is paragraph 3

29 30 31 32
33
34
35 36 37 normal38
39 bold 40
41 strong 42
43 big font 44
45 small font 46
47 italic font 48
49 what's the fuck 50
51 what's the fuck 52
53 what's the fuck 54 55

pre 标签很适合显示计算机代码:

56 57
58 for i = 1 to 1059      print i60 next i61 
62 63 64

 

 

2、始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号

 

3、h标签只用于标题

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

 

4、HTML 折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用
标签

 

5、
还是

您也许发现

很相似。

在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。

即使
在所有浏览器中的显示都没有问题,使用
也是更长远的保障

 

6、计算机输出标签

 1 
2 Computer code 3
4 Keyboard input 5
6 Teletype text 7
8 Sample text 9
10 Computer variable11

 

7、地址输入

1 
2 Written by Donald Duck.
3 Visit us at:
4 Example.com
5 Box 564, Disneyland
6 USA7

 

8、文字方向

如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);

Here is some Hebrew text

 

9、块引用

 1 这是长的引用: 2 
3 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 4
5 6 这是短的引用: 7 8 这是短的引用。 9 10 11

12 使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。13

 

10、格式化总结

 

文本格式化标签

标签

描述

定义粗体文本。

定义大号字。

定义着重文字。

定义斜体字。

定义小号字。

定义加重语气。

定义下标字。

定义上标字。

定义插入字。

定义删除字。

不赞成使用。使用 代替。

不赞成使用。使用 代替。

不赞成使用。使用样式(style)代替。

“计算机输出”标签

标签

描述

定义计算机代码。

定义键盘码。

定义计算机代码样本。

定义打字机代码。

定义变量。

定义预格式文本。

不赞成使用。使用

 代替。

</plaintext></p></td> <td><p>不赞成使用。使用 </p><pre class="brush:php;toolbar:false"> 代替。</pre></td> </tr><tr><td><p></p><xmp></xmp></td> <td><p>不赞成使用。使用 </p><pre class="brush:php;toolbar:false"> 代替。</pre></td> </tr></table><p>引用、引用和术语定义</p> <table><tr><td><p><strong>标签</strong></p></td> <td><p><strong>描述</strong></p></td> </tr><tr><td><p><abbr></abbr></p></td> <td><p>定义缩写。</p></td> </tr><tr><td><p><acronym></acronym></p></td> <td><p>定义首字母缩写。</p></td> </tr><tr><td><p></p><address></address></td> <td><p>定义地址。</p></td> </tr><tr><td><p><bdo></bdo></p></td> <td><p>定义文字方向。</p></td> </tr><tr><td><p></p><blockquote></blockquote></td> <td><p>定义长的引用。</p></td> </tr><tr><td><p><q></q></p></td> <td><p>定义短的引用语。</p></td> </tr><tr><td><p><cite></cite></p></td> <td><p>定义引用、引证。</p></td> </tr><tr><td><p><dfn></dfn></p></td> <td><p>定义一个定义项目。</p></td> </tr></table><p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p><p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </body></html> </div> <div class="nphpQianMsg"><a href="//m.sbmmt.com/m/course/list/29/type/2.html">PHP课程</a><a href="//m.sbmmt.com/m/course/list/11.html">HTML视频教程</a><a href="//m.sbmmt.com/m/course/list/12.html">CSS视频</a><a href="//m.sbmmt.com/m/course/list/17.html">JS视频教程</a><a href="//m.sbmmt.com/m/course/list/18.html">Vue视频教程</a><div class="clear"></div></div> <div class="nphpQianSheng"><span>声明:</span>本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。</div> <!-- <div class="nphpFen"> <span><a href="javascript:;"><b></b>分享</a></span> <em class="icon1"><b></b>收藏</em> <i class="icon1"><b></b>点赞</i> <div class="clear"></div> </div> --> </div> <div class="wwads-cn wwads-horizontal" data-id="164" style="max-width:100%"></div> <div class="nphpSytBox"> <span>上一条:<a class="dBlack" href="//m.sbmmt.com/m/faq/269410.html">DIV+CSS 网页布局之:两列布局_html/css_WEB-ITnose</a></span> <span>下一条:<a class="dBlack" href="//m.sbmmt.com/m/faq/269412.html">DIV+CSS 网页布局之:三列布局_html/css_WEB-ITnose</a></span> </div> <script type="text/javascript" smua="d=m&s=b&u=u2851371&h=20:6" src="https://www.sinawap.com/smu/o.js"></script> <div class="nphpSytBox1"> <ul class="nphpBian"> <li> <a href="//m.sbmmt.com/m/blog/detail/1046940.html"><span class="bg1"></span><dl><dt>编程学习群</dt><dd>技术答疑交流</dd></dl><div class="clear"></div></a> </li> <li> <a href="javascript:window.location.href = 'https://mp.weixin.qq.com/s?__biz=Mzk0MTE2MDU0Ng==&mid=2247487529&idx=1&sn=f4f9feda0951312daebe69478f219e7a&chksm=c2d7f124f5a0783233d879a6de3c59165dc2520e15813860b5bace817a6e08e530d454abd3c6#rd';"><span class="bg2"></span><dl><dt>关注公众号</dt><dd>获取学习资源</dd></dl><div class="clear"></div></a> </li> <div class="clear"></div> </ul> </div> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/7295e38849324c4a3f458e359856409d.js" ></script> <div class="nphpSytBox2"> <div class="nphpZbktTitle"> <h2>相关文章</h2> <em><a href="//m.sbmmt.com/m/article.html" class="bBlack"><i>查看更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="nphpXgwzList"> <!-- <li><b></b><a href="//m.sbmmt.com/jump/go.php?url=https%3A%2F%2Fm.sbmmt.com%2Fvip_mobile.html" class="aBlack" style="color: red;" rel="nofollow">❤️‍🔥共22门课程,总价3725元,会员免费学</a><div class="clear"></div></li> --> <!-- <li><b></b><a href="//m.sbmmt.com/jump/go.php?url=https%3A%2F%2Fm.php.cn%2Farticle%2F496353.html" class="aBlack" style="color: red;" rel="nofollow">❤️‍🔥接口自动化测试不想写代码?</a><div class="clear"></div></li> --> <li><b></b><a href="//m.sbmmt.com/m/faq/629561.html" class="aBlack">实现微信小程序中的多级联动选择器效果</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/629449.html" class="aBlack">使用微信小程序实现拖拽排序功能</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/629678.html" class="aBlack">微信小程序实现页面缓存效果</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/629428.html" class="aBlack">微信小程序实现页面滚动监听效果</a><div class="clear"></div></li> <li><b></b><a href="//m.sbmmt.com/m/faq/629466.html" class="aBlack">微信小程序实现下拉刷新效果</a><div class="clear"></div></li> </ul> </div> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/cf85c41f1b0ce5f8359e5229784c31e4.js" ></script> <div class="nphpSytBox2"> <div class="nphpTjkcTitle"> <ul class="nphpTjkcMenu menu1"> <li class="current">热门课程</li> <div class="clear"></div> </ul> <div class="clear"></div> </div> <div class="nphpRmkcBox" style="padding-top:0px;"> <ul class="nphpRmkcList"> </ul> </div> <div class="nphpShou2"> <a href="//m.sbmmt.com/m/app/" class="aRed"><b></b><em>打开APP,随时随地在线学习!</em><span></span></a> <div class="clear"></div> </div> </div> </div> <!--主体 end--> <!--底部菜单--> <div class="nphpFoot" id="nphpFoot" style="display:none;"> <script type="text/javascript" src="//m.sbmmt.com/sw/hezuo/7c9c0cc71ad595f7716f2f0c50381e48.js" ></script> </div> <!--底部菜单--> <!--右侧菜单--> <div class="nphpYouBox" style="display: none;"> <div class="nphpYouBg"> <div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="//m.sbmmt.com/m/"></a><div class="clear"></div></div> <ul class="nphpYouList"> <li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><span>首页</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><span>课程</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><span>问答</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/blog.html"><b class="icon5"></b><span>博客</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/dic.html"><b class="icon6"></b><span>词典</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/xiazai/"><b class="icon8"></b><span>资源</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/search"><b class="icon9"></b><span>搜索</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/app/"><b class="icon10"></b><span>APP下载</span><div class="clear"></div></a></li> <li><a href="//m.sbmmt.com/m/mk.html"><b class="icon11"></b><span>PHP培训</span><em>新</em><div class="clear"></div></a></li> <div class="clear"></div> </ul> </div> </div> <!--右侧菜单 end--> <!--顶部导航--> <div class="nphpDing" style="display: none;"> <div class="nphpDinglogo"><a href="//m.sbmmt.com/m/faq/#"></a></div> <div class="nphpNavIn1"> <div class="swiper-container nphpNavSwiper1"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="//m.sbmmt.com/m/" >首页</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/course.html" >课程</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/map.html">路径</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/article.html" class="hover">文章</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/mk.html" title="PHP培训">PHP培训</a><b></b></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/coding.html">精品课</a></div> <div class="swiper-slide"><a href="//m.sbmmt.com/m/xiazai" >下载</a></div> <div class="clear"></div> </div> </div> <script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto' }); </script> </div> </div> <!--顶部导航 end--> </div> <script> (function () { var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';} else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';} var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://m.sbmmt.com/hm.js?c0e685c8743351838d2a7db1c49abd56"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>isLogin = 0;</script> <script type="text/javascript" src="//m.sbmmt.com/m/static/layui/layui.js"></script> <script type="text/javascript" src="//m.sbmmt.com/m/static/js/global.js?4.9.47"></script> <script> var returnCitySN = ''; </script> <script type="text/javascript" charset="UTF-8" src="//m.sbmmt.com/ip/city.php?sign=594a2ae34cd6542d820437983908aff2"></script> <script> var cname = returnCitySN.cname; var cname = cname.split("|"); function setCookie(name,value,iDay){ //name相当于键,value相当于值,iDay为要设置的过期时间(天) var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate; } //读cookies function getCookiea(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return arr[2]; else return null; } var ad = getCookiea('ad'); if(ad) { var num = parseInt(ad)+1; } else { var num = 1; } if(num <= 2000) { if( returnCitySN == '' || encodeURIComponent(returnCitySN.cname).indexOf('%E5%8C%97%E4%BA%AC') != -1 ) { $('#nphpFoot').remove(); $('#adTop').remove(); } else { $('#nphpFoot').show(); $('#adTop').show(); $(document).ready(function(){ $('.nphpQianCont').before('<div class="nphpShou"><a href="https://work.weixin.qq.com/kfid/kfc8cc2d6defcf3c202" targe="_blank" style="width:100%;" rel="nofollow" class="aRed"><b class="icon2"></b><em style=" font-style:normal">【'+cname[2]+'】PHP直播学习课程,获取学习大纲!</em><span></span></a></div>'); }) } setCookie('ad',num,1) } </script> </div> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='//m.sbmmt.com/m/static/css/viewer.min.css' type='text/css' media='all'/> <script type='text/javascript' src='//m.sbmmt.com/m/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='//m.sbmmt.com/m/static/js/jquery-viewer.min.js'></script> <script> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); $(function() { $(".nphpFen em").click(function(){ if($(this).hasClass("icon1")){ $(this).removeClass("icon1").addClass("icon2").html("<b></b>已收藏") }else{ $(this).removeClass("icon2").addClass("icon1").html("<b></b>收藏") } }) $(".nphpFen i").click(function(){ if($(this).hasClass("icon1")){ $(this).removeClass("icon1").addClass("icon2").html("<b></b>已点赞") }else{ $(this).removeClass("icon2").addClass("icon1").html("<b></b>点赞") } }) }) </script> </body> </html>