美图云海网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
大规范 | 大规范里的小规范 |
---|---|
HTML4.01 | 1、Strict:严格的,体现在一些标签不能使用,比如u;2、Transitional:普通的;3、Frameset:带有框架的页面 |
XHTML1.0 (其严格体现在小写标签、闭合、引号) | 1、Strict:严格的,体现在一些标签不能使用,比如u;2、Transitional 普通的(使用sublime的快捷键html:xt生成的html骨架,x表示xhtml,t表示transitional);3、Frameset:带有框架的页面 |
热热
爱爱
欢迎<title></code></pre>
<h2>7 html标签上的说明</h2><h3>7.1 html标签等级分类</h3></li><li>html标签是分等级的,html将所有的标签分为两种:容器级和文本级。</li><li>顾名思义,容器级的标签,里面理论上可以放置任何东西(如h是容器级的标签。理论上里面可以放置p、ul,语法上的允许,在语义上,不要这么写。);</li><li>而文本级标签里面,只能放置文字、图片、表单元素等。(如p标签是一个文本级标签,p里面只能够放置文字、图片、表单元素等)</li><li>正确写法:<br/>```<img src="/upload/otherpic52/210932.jpg" alt="前端复习:html"><br/><h4>个人签名</h4><br/><p><br/>何处不流浪,归途是故乡<br/></p>
<pre><code></code></pre></li><li>错误写法:
<pre><code><p>
<h4>个人签名</h4>何处不流浪,归途是故乡
</p></code></pre></li><li>错误写法使用Chrome的F12审查,你会发现,浏览器自己把p封闭掉了,不让去包裹h2。<br/><img src="/upload/otherpic52/210933.jpg" alt="前端复习:html"></li><li>附加说明:Chrome浏览器是世界上对HTML5支持最好的浏览器,提供了非常好的开发工具,非常适合开发人员使用。(审查元素功能的快捷键是F12)
<h3>7.2 img标签</h3></li><li>HTML页面中不能够直接插入图片,而是插入图片的引用地址,所以也要把图片上传到<a title="服务器" target="_blank" href="http://www.cdfuwuqi.com/">服务器</a>中。插入方法为:<img src="baby.jpg" alt="可爱小宝宝" />,src是英文source“资源”的简写。</li><li>alt是英文中“alternate”替代的意思,就表示不管发生什么原因,当这个图片无法被显示的时候,出现的替代文字(有的浏览器不支持)。</li><li>关于src属性值相对路径的问题,../表示可以为上一层文件夹,../../表示为上一层的上一层的文件夹。(相对路径不会出现以下这种情况:aaa/../bbb/1.jpg。即../要么不写,要么就写在开头。)</li><li>面试题:如下有个文件层次图,能在index.html页面中,插入图片1.png的语句为:<img src="../../photo/1.png" />。<br/><img src="/upload/otherpic52/210935.jpg" alt="前端复习:html"></li><li>解释:document为顶级文件夹,里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹中有index.html。所以index.html在myweb文件夹中,上一级就是work文件夹,上两级就是document文件夹。通过document文件夹当做一个中转站,进入photo文件夹,就可以找到1.png。
<h3>7.3 超级链接的基本语法</h3></li><li>一个网站,是由很多html网页组成的,html网页之间能够通过超级链接相互跳转,从而形成“网”。语法为:<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>。</li><li>a是英文anchor“锚”的意思,是一个文本级的标签;</li><li>href属性是英文hypertext reference超文本地址的缩写;target属性表示是否在新窗口中打开,blank为“空白”的意思,表示新建一个空白窗口;title属性表示悬停文本。
<h3>7.4 页面中的锚点</h3></li><li>页面当中可以有锚点,所谓的锚点,就是一个小标记,这个小标记是用户不可察觉的,用户不知道这里有一个标记。</li><li>锚点用name属性进行设置,一个a标签如果有name属性(或者是id属性),就说明是页面中的一个锚点。
<pre><code><a name="wdzp">我的作品</a> 或者是 <a id="wdzp">我的作品</a></code></pre></li><li>那么页面地址栏上写#wdzp就能够让这个锚点置于页面最顶端显示。</li><li>这里也可以使用超级链接,指向页面中的锚点,那么就是:<a href="#wdzp">点击我就查看我的作品</a>。(也可以从一个页面中使用a标签链接到另一个页面中标记的锚点)
<h3>7.5 无序列表</h3></li><li>无序列表,用来表示一个列表的语义,并且每个项目与每个项目之间,是不分先后的。</li><li>ul就是英文中unordered list,“无序列表”的意思;li就是英文list item,“列表项”的意思。</li><li>无序列表时一个“组标签”,即要么不写,要么就写一组。(也就是说,li不能够单独存在,必须包裹在ul里面;反过来也是,ul的直接子标签不能是别的东西,只能是li)
<pre><code><ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul></code></pre></li><li><p>以下写法错误,li必须用ul包裹:</p><p>为海阳等地区用户提供了全套网页设计制作服务,及海阳网站建设行业解决方案。主营业务为<a href="https://www.cdcxhl.com/" target="_blank">网站设计制作</a>、做网站、海阳网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!</p><pre><code><li>北京</li>
<li>上海</li>
<li>广州</li></code></pre></li><li>下面写法也错误,ul里面直接子标签只能有li标签,而不能有其他:(但是li是一个容器级标签,li里面什么都能放,甚至于li标签中可以包含ul标签)
<pre><code><ul>
<h4>中国主要城市</h4>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul></code></pre></li><li>浏览器会给默认的无序列表项添加小圆点的“先导符号”,这里强调,ul的作用,并不是给文字添加小圆点,而是添加无序列表的“语义”。
<h3>7.6 有序列表</h3></li><li>order list,有序列表,用ol表示。
<pre><code><ol>
<li>体面</li>
<li>下一秒</li>
<li>她说</li>
</ol></code></pre></li><li>ol和ul只是语义上的不一样,怎么使用都是一样的。(ol这个东西用的不多,如果想表达顺序,一般也是用ul)
<h3>7.7 定义列表</h3></li><li>定义列表也是一个组标签,不过比较复杂,出现了三个标签:<br/>1、dl表示definition list,定义列表;2、dt表示definition title,定义标题;3、dd表示definition description,表示定义描述词。</li><li>dt、dd只能在dl中;而且dl的直接子标签只能有dt、dd。
<pre><code><dl>
<dt>广州</dt>
<dd>中国南大门,有珠江、小蛮腰</dd>
<dt>上海</dt>
<dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
</dl></code></pre></li><li>表达语义是两个层面的:1、是一个列表,列出了北京、上海、广州三个项;2、每个词都有自己的描述项。(即,dd是用于描述dt的)</li><li>定义列表用法可以非常灵活,可以一个dt配多个dd:
<pre><code><dl>
<dt>广州</dt>
<dd>中国南大门,有珠江、小蛮腰</dd>
<dd>人特别多</dd>
<dt>上海</dt>
<dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
</dl></code></pre></li><li>还可以拆分开,让每一个dl里面只有一个dt和dd,这样子感觉会清晰一些:
<pre><code><dl>
<dt>广州</dt>
<dd>中国南大门,有珠江、小蛮腰</dd>
<dd>人特别多</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
</dl></code></pre></li><li>此外,dt、dd都是容器级标签,想放什么都可以。(页面编辑时,用什么标签,不是根据样子决定的,而是语义决定。)
<h3>7.8 div和span</h3></li><li><p>div和span是非常重要的标签,div的语义是division“分割”;而span的语义就是span”范围、跨度”。在css设计样式时,这两个标签,都是最重要的“盒子”。</p><pre><code><div>
<h4>中国主要城市</h4>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</div>
<div>
<h4>美国主要城市</h4>
<ul>
<li>纽约</li>
<li>洛杉矶</li>
<li>西雅图</li>
</ul>
</div></code></pre></li><li>在浏览器中,div默认是不会增加任何的效果改变的,但是语义改变了,div中的所有元素就是一个小区域。div是一个容器级标签,里面什么都能够放置,甚至于可以放置div本身。</li><li>span也是表达“小区域、小跨度”的意思,但是是一个文本级标签。也就是说,span只能够放置文字、图片、表单元素。(即span里面是放置小元素的,而div里面是放置大东西的。)</li><li>div标签也称之为布局标签,如下:
<pre><code><div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="guanggao"></div>
<div class="dongxi"></div>
</div>
<div class="footer"></div></code></pre></li><li>我们称呼这种模式叫做“div+css”,div标签负责布局,负责结构,负责分块,而css负责样式。
<h3>7.8 表单元素:文本框架、密码框、单选按钮、复选框</h3></li><li>表单就是收集用户信息的。就是让用户填写、选择的。
<pre><code><div>
<h4>欢迎注册本网站</h4>
<form>
所有的表单内容,都要写在form标签里面
</form>
</div></code></pre></li><li>form是英文表单的意思。form标签里面有action属性和method属性。action属性表示表单提交至哪里。method属性表示用什么HTTP方法提交,有get、post两种方式。</li></ul><hr /><ul><li>文本框:<input type="text" value="默认有的值" />;input表示“输入”,指的是一个“输入小部件”,“type”属性表示所要选择的类型,text值表示类型是一个文本框的输入小部件。</li><li>value属性表示“值”。value值的填写表示默认有的值。<br/><img src="/upload/otherpic52/210937.jpg" alt="前端复习:html"></li></ul><hr /><ul><li>密码框:<input type="password" /></li><li>单选按钮:也是input标签,type为radio;name属性值相同的单选框只能选其一。
<pre><code><input type="radio" name="gender" /> 男
<input type="radio" name="gender" /> 女</code></pre></li><li>默认被选择,就应该书写checked=”checked”。</li></ul><hr /><ul><li>复选框:也是input标签,type为checkbox。(name属性值相同)
<pre><code><p>
请选择你的爱好:
<input type="checkbox" name="hobby"/> 睡觉
<input type="checkbox" name="hobby"/> 吃饭
<input type="checkbox" name="hobby"/> 足球
<input type="checkbox" name="hobby"/> 篮球
</p></code></pre>
<h3>7.9 下拉列表和文本域</h3></li><li>select就是“选择”, option为”选项“。</li><li>select标签和ul、ol、dl一样,都是组标签:
<pre><code><select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
</select></code></pre></li><li>多行文本框(文本域):<textarea cols="30" rows="10"></li></ul>
<br>
当前名称:前端复习:html <br>
标题URL:<a href="http://tjjierui.cn/article/gedeco.html">http://tjjierui.cn/article/gedeco.html</a>
</div>
</div>
<div class="othernews">
<h3>其他资讯</h3>
<div class="othernews_list">
<ul>
<li>
<a href="/article/ddpgjpj.html">linux命令中的竖号 linux命令中的竖线</a>
</li><li>
<a href="/article/ddpgjgh.html">宽带和路由器 宽带和路由器怎么连接</a>
</li><li>
<a href="/article/ddpgpdp.html">企业服务器安全设备网 企业 服务器</a>
</li><li>
<a href="/article/ddpgpcj.html">linux终端中断命令 linux中断处理机制</a>
</li><li>
<a href="/article/ddpgjhe.html">凡科怎么得免费域名 凡科建站购买域名后怎么操作</a>
</li> </ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_content">
<div class="footer_content_top clear">
<div class="content_top_share fl">
<div><img src="/Public/Home/img/logo.png"></div>
<div class="top_share_content">
<dd>分享至:</dd>
<dt class="bdsharebuttonbox clear" id="share">
<a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a>
</dt>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</div>
</div>
<div class="content_top_left fl clear">
<div class="top_left_list fl">
<dd><a href="/about/">关于我们</a></dd>
<dt>
<a href="/about/#gsjj">公司简介</a>
<a href="/about/#fzlc">发展历程</a>
</dt>
</div>
<div class="top_left_list fl">
<dd><a href="/service/">服务项目</a></dd>
<dt>
<a href="/service/">高端网站建设</a>
<a href="/miniprogram/">小程序开发</a>
<a href="/service/app.html">APP开发</a>
<a href="/service/yingxiao.html">网络营销</a>
</dt>
</div>
<div class="top_left_list fl">
<dd><a href="/jianzhan/">建站知识</a></dd>
<dt>
<a href="/jianzhan/">行业新闻</a>
<a href="/jianzhan/">建站学堂</a>
<a href="/jianzhan/">常见问题</a>
</dt>
</div>
<div class="top_left_list fl">
<dd><a href="/contact/">联系我们</a></dd>
<dt>
<a href="/contact/#lxwm">公司地址</a>
<a href="/contact/#rczp">人才招聘</a>
</dt>
</div>
</div>
<div class="content_top_right addressR fr">
<div class="top_right_title addressf_title">
<a href="javascript:;" class="on">成都</a>
<a href="javascript:;">什邡</a>
</div>
<div class="top_right_content addressf">
<div class="right_content_li on">
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">电话:028-86922220</dt>
</div>
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">地址:成都市太升南路288号锦天国际A幢1002号</dt>
</div>
</div>
<div class="right_content_li">
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">电话:028-86922220</dt>
</div>
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">地址:德阳市什邡市顺河路物华南苑B区</dt>
</div>
</div>
</div>
</div>
</div>
<div class="link">
友情链接:
<a href="http://www.dgruizhi.cn/" title="娄底尾呼妄服装" target="_blank">娄底尾呼妄服装</a> <a href="http://www.schzyjs.com/" title="四川和正源" target="_blank">四川和正源</a> <a href="http://www.lnruijie.cn/" title="成都定制无纺布" target="_blank">成都定制无纺布</a> <a href="http://www.gzzbrs.cn/" title="天泽尚品" target="_blank">天泽尚品</a> <a href="http://www.75091.cn/" title="德信企业管理" target="_blank">德信企业管理</a> <a href="http://www.hzjierui.cn/" title="hzjierui.cn" target="_blank">hzjierui.cn</a> <a href="https://www.cdcxhl.com/xiyun.html" title="西云主机托管" target="_blank">西云主机托管</a> <a href="http://www.cxhljz.cn/app/" title="手机APP开发" target="_blank">手机APP开发</a> <a href="http://www.cxhljz.cn/web/" title="企业官网建设" target="_blank">企业官网建设</a> <a href="http://chengdu.xwcx.net/mobile/" title="移动手机网站制作" target="_blank">移动手机网站制作</a> </div>
</div>
<div class="footer_content_copyright clear">版权所有:青羊区美图云海设计工作室(个体工商户)
<a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">蜀ICP备2025119305号-5</a>
</div>
</div>
<!--浮窗-->
<div class="FloatingWindow clear">
<a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr">
<div class="FloatingWindow_list_title">
<dd class="iconfont"></dd>
<dt><span>在线</span>咨询</dt>
</div>
</a>
<a href="javascript:;" class="FloatingWindow_list fr">
<div class="FloatingWindow_list_title">
<dd class="iconfont"></dd>
<dt>服务热线</dt>
</div>
<div class="FloatingWindow_list_down fadeInRight animated">服务热线:028-86922220</div>
</a>
<a href="javascript:;" class="FloatingWindow_list fr STop">
<div class="FloatingWindow_list_title">
<dd class="iconfont"></dd>
<dt>TOP</dt>
</div>
</a>
</div>
<script src="/Public/Home/js/jquery-1.8.3.min.js"></script>
<script src="/Public/Home/js/comm.js"></script>
<script src="/Public/Home/js/wow.js"></script>
<script src="/Public/Home/js/common.js"></script>
</body>
</html>
<script>
$(".cont img").each(function(){
var src = $(this).attr("src"); //获取图片地址
var str=new RegExp("http");
var result=str.test(src);
if(result==false){
var url = "https://www.cdcxhl.com"+src; //绝对路径
$(this).attr("src",url);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script>