HTML CSS 笔记.docx

资源描述

HTML CSS 笔记.docx

《HTML CSS 笔记.docx》由会员分享，可在线阅读，更多相关《HTML CSS 笔记.docx（35页珍藏版）》请在冰豆网上搜索。

HTML CSS 笔记.docx

HTMLCSS笔记

HTML5

一、HTML5概述

二、HTML5基本格式

一．HTML5文档结构

1.第一步：

打开SublimeText3，打开指定文件夹；

2.第二步：

保存文件到磁盘中，.html是网页后缀；

3.第三步：

开始编写HTML5的基本格式。

DOCTYPEhtml>..

元素

一个超链接，后面会详细探讨。

三．元素标签探讨

HTML是一种标记语言，刚才的结构我们已经详细探讨过。

这里，我们再剖析一下这些

“标记”或者叫“标签”，书面上经常称作为“元素”的东西是怎么构成的。

1.元素

元素就是一组告诉浏览器如何处理一些内容的标签。

每个元素都有一个关键字，比如

、、<meta>都是元素。不同的标签名称代表不同的意义，后面将会涉及到段落标签、文本标签、链接标签、图片标签等。元素一般分为两种：单标签（空元素）和双标签。单标签一般用于声明或者插入某个元素，比如声明字符编码就用<meta>，插入图片就用<img>；双标签一般用于设置一段区域的内容，将其包含起来，比如段落...。2.属性和值元素除了有单双之分，元素的内部还可以设置属性和值。这些属性值用来改变元素某些方面的行为。比如超链接：<a>中的href属性，里面替换网址即可链接到不同的网站。当然一个元素里面可以设置多个属性，甚至自定义属性。三、HTML5文本元素一．文本元素总汇HTML5规范指出：使用元素应该完全从元素的语义出发。但是由于历史遗留及用户至上的原则，这种语义会宽松许多。元素名称说明a生成超链接br强制换行wbr可安全换行b标记一段文字但不强调strong表示重要i表示外文或科学术语em表示强调code表示计算机代码var表示程序输出samp表示变量kdb表示用户输入abbr表示缩写cite表示其他作品的标题del表示被删除的文字s表示文字已不再确认dfn表示术语定义mark表示与另一段上下文有关的内容q表示引自他处的内容rp与ruby元素结合使用，标记括号rt与ruby元素结合使用，标记括号ruby表示位于表意文字上方或右方的注音符号bdo控制文字的方向small表示小号字体内容sub表示下标字体sup表示上标字体time表示时间或日期u标记一段文字但不强调span通用元素，没有任何语义。一般配合CSS修饰。从上面这张表格中，我们发现文本元素还是非常多的。但实际上，在现实应用中，真正常用的也就是那么几个，绝大部分是针对英文的。二．文本元素解析1.表示关键字和产品名称HTML5解释：元素实际作用就是加粗。从语义上来看，就是标记一段文字，但并不是特别强调或重要性。比如：一段文本中的某些关键字或者产品的名称。2.表示重要的文字HTML5解释：元素实际作用和一样，就是加粗。从语义上来看，就是强调一段重要的文本。3. 强制换行、安全换行 Thisabcdkedkslakdjfkdlsakdisapple.解释：在任意文本位置键入 都会被换行，而在英文单词过长时使用会根据浏览器的宽度适当的裁切换行。4.表示外文词汇或科技术语HTML5解释：元素实际作用就是倾斜。从语义上来看，表示区分周围内容，并不是特别强调或重要性。5.加以强调HTML5解释：元素实际作用和一样，就是倾斜；从语义上来看，表示对一段文本的强调。6.<s>表示不准确或校正<s>HTML5</s>解释：<s>元素实际作用就是删除线；从语义上来看，表示不准确的删除。7.<del>表示删除文字<del>HTML5</del>解释：<del>元素实际作用和<s>一样，就是删除线；从语义上来看，表示删除相关文字。8.表示给文字加上下划线HTML5解释：元素实际作用就是加一条下划线；从语义上来看，并不强调此段文本。9.<ins>添加一段文本<ins>HTML5</ins>解释：<ins>元素实际作用和一样，加一条下划线；从语义上来看，是添加一段文本，起到强调的作用。10.添加小号字体HTML5解释：元素实际作用就是将文本放小一号。从语义上来看，用于免责声明和澄清声明。11.添加上标和下标55解释：和元素实际作用就是数学的上标和下标。语义也是如此。12.<code>等表示输入和输出<code>HTML5</code><var>HTML5</var><samp>HTML5</samp><kdb>HTML5</kdb>解释：<code>表示计算机代码片段；<var>表示编程语言中的变量；<samp>表示程序或计算机的输出；<kdb>表示用户的输入。由于这属于英文范畴的，必须将lang="en"英语才能体现效果。13.<abbr>表示缩写<abbr>HTML5</abbr>解释：<abbr>元素没有实际作用；从语义上看，是一段文本的缩写。14.<dfn>表示定义术语<dfn>HTML5</dfn>解释：<dfn>元素就是一般性的倾斜；从语义上看，表示解释一个词或短语的一段文本。15.<q>引用来自他处的内容<q>HTML5</q>解释：<q>元素实际作用就是加了一对双引号。从语义上来看，表示引用来自其他地方的内容。16.<cite>引用其他作品的标题<cite>HTML5</cite>解释：<cite>元素实际作用就是加粗。从语义上来看，表示引用其他作品的标题。17.<ruby>语言元素<ruby>饕<rp>（</rp><rt>tāo</rt><rp>）</rp>餮<rp>（</rp><rt>tiè</rt><rp>）</rp></ruby>解释：<ruby>用来为非西方语言提供支持。<rp><rt>用来帮助读者掌握表意语言文字正确发音。比如：汉语拼音在文字的上方。但目前Firefox还不支持此特性。18.<bdo>设置文字方向<bdodir="rtl">HTML5</bdo>解释：<bdo>必须使用属性dir才可以设置，一共两个值：rtl（从右到左）和ltr（从左到右）。一般默认是ltr。还有一个<bdi>元素也是处理方向的，由于是特殊语言的特殊效果，且主流浏览器大半不支持，忽略。19.突出显示文本HTML5解释：实际作用就是加上一个黄色的背景，黑色的字；从语义上来看，与上下文相关而突出的文本，用于记号。20.<time>表示日期和时间<time>2015-10-10</time>解释：<time>元素没有实际作用；从语义上来看，表示日期和时间。21.表示一般性文本HTML5解释：元素没有实际作用；语义上就是表示一段文本，我们经常用它来设置CSS等操作。四、HTML5超链接和路径一．超链接的属性<a>元素属于文本元素，有一些私有属性或者叫局部属性。那么，相对应的还有通用属性或叫做全局属性。这方面的知识，后面会详细探讨。属性名称说明href指定<a>元素所指资源的URLhreflang指向的链接资源所使用的语言media说明所链接资源用于哪种设备rel说明文档与所链接资源的关系类型target指定用以打开所链接资源的浏览环境type说明所链接资源的MIME类型（比如text/html）在这几个属性当中，只有href和target一般比较常用，而href是必须要用的。其他几个属性，在<a>元素使用较少，将在CSS章节再探讨。属性<ahref="">XX</a>解释：href是必须属性，否则<a>元素就变成空元素了。如果属性值是，意味着点击跳转到指定的外部网站。属性<ahref=""target="_blank">XX</a>解释：target属性告诉浏览器希望将所链接的资源显示在哪里。属性名称说明_blank在新窗口或标签页中打开文档_parent在父窗框组（frameset）中打开文档_self在当前窗口打开文档（默认）_top在顶层窗口打开文档这四种最常用的是_blank，新建一个窗口。而_self是默认，当前窗口打开。_parent和_top是基于框架页面的，分别表示在父窗口打开和在整个窗口打开。而HTML5中，框架基本被废弃，只能使用<iframe>元素，且以后大量结合JavaScript和PHP等语言配合，框架用的就很少了。二．相对与绝对路径所谓相对路径，就是相对于链接页面而言的另一个页面的路径。而绝对路径，就是直接从，其中一个页面链接到另一个页面。1.绝对路径<ahref="第一季/code/">index2</a>解释：首先是，然后是磁盘符，然后是一个个的目录层次，找到相应文件。这种方式最致命的问题是，当整个目录转移到另外的盘符或其他电脑时，目录结构一旦出现任何变化，链接当即失效。2.相对路径<ahref="">index2</a>解释：相对路径的条件是必须文件都在一个磁盘或目录下，如果是在同一个目录下，直接属性值就是被链接的文件名.后缀名。如果在同一个主目录下，有多个子目录层次，那就需要使用目录结构语法。3.目录语法同一个目录：或./；在子目录：xxx/；在孙子目录：xxx/xxx/；在父目录：../；在爷爷目录：../../；三．锚点设置超链接也可用来将同一个文档中的另一个元素移入视野。通过属性id或name实现锚点定位。p>建立段落这是一个段落这也是一个段落解释：元素实际作用就是将内部包含的文本形成一个段落；而段落和段落之间保持一定量的空隙。2.<div>通用分组<div>这是一个通用分组</div><div>这是又一个通用分组</div>解释：<div>元素在早期的版本中非常常用，通过<div>这种一般性分组元素进行布局。而在HTML5中，由于语义的缘故，被其他各种文档元素所代替。和段落的区别就是，两段文本的上下空隙是没有的，空隙间隔和 换行一样。3.<blockquote>引用大段他出内容<blockquote>这是一个大段引自他出内容</blockquote><blockquote>这是另一个大段引自他出内容</blockquote>解释：<blockquote>元素实际作用除了和元素一样，有段落空隙的功能，还包含了首尾缩进的功能。语义上表示，大段的引用他出的内容。4.<pre>展现格式化内容<pre>#########################</pre>解释：<pre>元素实际作用就是编辑器怎么排版的，原封不动的展现出来。当然，这种只适合简单的排版，复杂的排版就无法满足要求了。5.<hr>添加分隔<hr>解释：<hr>元素实际作用就是添加一条分割线，意图呈现上下文主题的分割。6.<ul><li>添加无序列表<ul><li>张三</li><li>李四</li><li>王五</li><li>马六</li></ul>解释：<ul>元素表示无序列表，而<li>元素则是内部的列表项。7.<ol><li>添加有序列表<ol><li>张三</li><li>李四</li><li>王五</li><li>马六</li></ol>解释：<ol>元素表示有序列表，而<li>元素则是内部的列表项。<ol>元素目前支持三种属性。ol元素属性属性名称说明start从第几个序列开始统计：<olstart="2">reversed是否倒序排列：<olreversed>，一半主流浏览器不支持type表示列表的编号类型，值分别为：1、a、A、i、Ili元素属性属性名称说明value强行设置某个项目的编号。<livalue="7">王五</li>8.<dl><dt><dd>生成说明列表<dl><dt>这是一份文件</dt><dd>这里是这份文件的详细内容1</dd><dd>这里是这份文件的详细内容2</dd></dl>解释：这三个元素是一个整体，但<dt>或<dd>并非都必须出现。9.<figure><figcaption>使用插图<figure><figcaption>这是一张图</figcaption><imgsrc=""></figure>解释：这两个元素一般用于图片的布局。五、HTML5表格元素一．表格元素总汇表格的基本构成最少需要三个元素：<table>、<tr>、<td>，其他的一些作为可选辅助存在。元素名称说明table表示表格thead表示标题行tbody表示表格主体tfoot表示表脚tr表示一行单元格th表示标题行单元格td表示单元格col表示一列colgroup表示一组列caption表示表格标题二．构建表格解析1.<table><tr><td>构建基础表格<tableborder="1"><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>李四</td><td>女</td><td>已婚</td></tr></table>解释：<table>元素表示一个表格的声明，<tr>元素表示表格的一行，<td>元素表示一个单元格。默认情况下表格是没有边框的，所以，在<table>元素增加一个border属性，设置为1即可显示边框。2.<th>为表格添加标题单元格<tableborder="1"style="width:300px;"><tr><th>姓名</th><th>性别</th><th>婚姻</th></tr><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>李四</td><td>女</td><td>已婚</td></tr></table>解释：<th>元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。这里使用了一个通用属性style，主要用于CSS样式设置，以后会涉及到。<th><td>均属于单元格，包含两个合并属性：colspan、rowspan等。3.<thead>添加表头<thead><tr><th>姓名</th><th>性别</th><th>婚姻</th></tr></thead>解释：<thead>元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头位置。4.<tfoot>添加表脚<tfoot><tr><tdcolspan="3">统计：共两名</td></tr></tfoot>解释：<tfoot>元素为表格生成表脚，限制在表格的底部。5.<tbody>添加表主体<tbody><tr><td>张三</td><td>男</td><td>未婚</td></tr><tr><td>李四</td><td>女</td><td>已婚</td></tr></tbody>解释：<tbody>元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更加有助于后续CSS和JavaScript的控制。6.<caption>添加表格标题<caption>这是一个人物表</caption>解释：<caption>元素给表格添加一个标题。7.<colgroup>设置列<colgroupspan="2"style="background:red;">解释：<colgroup>元素是为了处理某个列，span属性定义处理哪些列。1表示第一列，2表示前两列。如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点移入第二位，再处理第二个即可。8.<col>更灵活的设置列<colgroup><col><colstyle="background:red;"span="1"></colgroup>解释：<col>元素表示单独一列，一个表示一列，控制更加灵活。如果设置了span则，控制多列。六、HTML5文档元素一．文档元素总汇文档元素基本没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念。元素名称说明h1~h6表示标题header表示首部footer表示尾部nav表示有意集中在一起的导航元素section表示重要概念或主题article表示一段独立的内容address表示文档或article的联系信息aside表示与周边内容少有牵涉的内容hgroup将一组标题组织在一起details生成一个区域，用户将其展开可以获得更多细节summary用在details元素中，表示该元素内容的标题或说明二．文档元素解析文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结构性。只有在后面的章节学习CSS，配合使用才能起到布局和样式的效果。1.<header>表示首部<header>这里部分一般是页面头部，包括：LOGO、标题、导航等内容</header>解释：<header>元素主要设置页面的标头部分。2.<footer>表示尾部<footer>这里是页面的尾部，一般包括：版权声明、友情链接等内容</footer>解释：<footer>元素主要设置页面的尾部。3.<h1>~<h6>添加标题<h1>标题部分</h1><h4>小标题部分</h4>解释：<h1>~<h6>实际作用就是加粗并改变字体大小。用于各种标题文档。4.<hgroup>组合标题<hgroup><h1>标题部分</h1><h4>小标题部分</h4></hgroup>解释：<hgroup>元素的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题，这是使用此元素包含群组。5.<section>文档主题<section>这里一般是存放文档主题内容。</section>解释：<section>元素的作用是定义一个文档的主题内容。6.<nav>添加导航<nav>这里存放文档的导航</nav>解释：<nav>元素给文档页面添加一个导航。7.<article>添加一个独立成篇的文档<article><header><nav></nav></header><section></section><footer></footer></article>解释：<article>元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。在比较大的页面中会使用到，比如一片博文的列表，每篇博文，都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等。8.<aside>生成注释栏<aside>这是是一个注释</aside>解释：<aside>元素专门为某一段内容进行注释使用。9.<address>表示文档或article元素的联系信息。<address>联系信息</address>解释：如果是在<body>元素下时，表示整个文档的联系信息。如果是在<article>元素下时，表示其下的联系信息。10.<details>元素生成详情区域、<summary>元素在其内部生成说明标签解释：由于大多数主流浏览器尚未支持，暂略。七、HTML5嵌入元素一．嵌入元素总汇这里所列出的元素，并非本节课全部涉及到，比如音频audio、视频video、以及动态图像canvas和媒体资源source、track等会在后面章节或季度讲解。元素名称说明img嵌入图片map定义客户端分区响应图area表示一个用户客户端分区响应图的区域audio表示一个音频资源video表示一个视频资源iframe嵌入一个文档embed用插件在HTML中嵌入内容canvas生成一个动态的图形画布meter嵌入数值在许可值范围背景中的图形表示object在HTML文档中嵌入内容param表示将通过object元素传递给插件的参数progress嵌入目标进展或任务完成情况的图形表示source表示媒体资源svg表示结构化矢量内容track表示媒体的附加轨道（例如字幕）二．嵌入元素解析1.<img>嵌入图像<imgsrc="">解释：<img>元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致。img的私有属性属性名称说明src嵌入图像的URLalt当图片不加载时显示的备用内容width定义图片的长度（单位是像素）height定义图片的高度（单位是像素）ismap创建服务器端分区响应图usemap关联<map>元素<ahref=""><imgsrc=""width="339"height="229"alt="风景图"ismap></a>2.<map>创建分区响应图<imgsrc=""alt="风景图"width="339"height="229"usemap="#Map"><mapname="Map"><areashape="rect"coords="31,28,112,100"href=""target="_blank"alt="方形"><areashape="circle"coords="187,142,47"href=""target="_blank"alt="圆形"><areashape="poly"coords="287,26,240,66,308,112"href=""target="_blank"alt="多边形"></map>解释：通过 </div> <div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;">展开阅读全文</div> <script> function showmore() { $(".readmore").hide(); $(".detail-article").css({ "height":"auto", "overflow": "hidden" }); } $(document).ready(function() { var dh = $(".detail-article").height(); if(dh >100) { $(".detail-article").css({ "height":"100px", "overflow": "hidden" }); } else { $(".readmore").hide(); } }); </script> </div> <script> var defaultShowPage = parseInt("5"); var id = "23926344"; var total_page = "35"; var mfull = false; var mshow = false; function DownLoad() { window.location.href='https://m.bdocx.com/down/23926344.html'; } function relate() { var reltop = $('#relate').offset().top-50; $("html,body").animate({ scrollTop: reltop }, 500); } </script> <script> var pre = "https://file1.bdocx.com/fileroot1/2023-5/22/15131b24-e1cd-41b4-b6b8-1d2eec1469bd/15131b24-e1cd-41b4-b6b8-1d2eec1469bd"; var freepage = parseInt('20'); var total_c = parseInt('35'); var start = defaultShowPage; var adcount = 0; var adindex = 0; var adType_list = ";0;1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;"; var end = start; function ShowSvg() { end = start + defaultShowPage; if (end > freepage) end = freepage; for (var i = start; i < end; i++) { var imgurl = pre + (i + 1) + '.gif'; var html = "<img src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\" alt=\"HTML CSS 笔记.docx_第" + (i + 1) + "页\" width='100%'/>"; $("#page").append("<div class='page'>" + html + "</div>"); $("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>"); if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1) { if(adindex > (adcount-1)) adindex = 0; $("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>"); document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML; adindex += 1; } } start = end; if (start > (freepage - 1)) { if (start < total_c) { $("#pageMore").removeClass("btnmore"); $("#pageMore").html("亲，该文档总共" + total_c + "页，到这儿已超出免费预览范围，如果喜欢就下载吧！"); } else { $("#pageMore").removeClass("btnmore"); $("#pageMore").html("亲，该文档总共" + total_c + "页全部预览完了，如果喜欢就下载吧！"); } } } //$(document).ready(function () { // ShowSvg(); //}); </script> <div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li><a target="_parent" href="https://m.bdocx.com/doc/30873202.html" title="语言学纲要-叶蜚声版演示课件.ppt">语言学纲要-叶蜚声版演示课件.ppt</a> </li><li><a target="_parent" href="https://m.bdocx.com/doc/30872995.html" title="素描活动记录（全文5篇）.docx">素描活动记录（全文5篇）.docx</a> </li><li><a target="_parent" href="https://m.bdocx.com/doc/30872855.html" title="少先队队会课教案.doc">少先队队会课教案.doc</a> </li><li><a target="_parent" href="https://m.bdocx.com/doc/30872842.html" title="大数据治理平台建设与应用解决方案.pptx">大数据治理平台建设与应用解决方案.pptx</a> </li><li><a target="_parent" href="https://m.bdocx.com/doc/30872547.html" title="马克思主义基本原理概论优秀教学设计.docx">马克思主义基本原理概论优秀教学设计.docx</a> </li><li><a target="_parent" href="https://m.bdocx.com/doc/30872461.html" title="网约车服务礼仪培训.pptx">网约车服务礼仪培训.pptx</a> </li><li><a target="_parent" href="https://m.bdocx.com/doc/30872350.html" title="1.2.2 微生物的选择培养与计数教案高中生物新人教版选择性必修..docx">1.2.2 微生物的选择培养与计数教案高中生物新人教版选择性必修..docx</a> </li><li><a target="_parent" href="https://m.bdocx.com/doc/30872196.html" title="精校大六壬指南（珍藏全本）.docx">精校大六壬指南（珍藏全本）.docx</a> </li><li><a target="_parent" href="https://m.bdocx.com/doc/30872188.html" title="职业院校技能大赛（中职组）幼儿创客设计赛项题库2.docx">职业院校技能大赛（中职组）幼儿创客设计赛项题库2.docx</a> </li><li><a target="_parent" href="https://m.bdocx.com/doc/30871982.html" title="常用家电维修基础知识课件PPT.ppt">常用家电维修基础知识课件PPT.ppt</a> </li> </ul> </div> </div> <div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li> <a href="https://m.bdocx.com/doc/8851773.html" target="_parent" title="江苏师范大学19级文学院汉语言文学专业《教育学》《教材教法》真题及答案解析.docx">江苏师范大学19级文学院汉语言文学专业《教育学》《教材教法》真题及答案解析.docx</a></li> <li> <a href="https://m.bdocx.com/doc/8851774.html" target="_parent" title="五香熟食制法.docx">五香熟食制法.docx</a></li> <li> <a href="https://m.bdocx.com/doc/8851775.html" target="_parent" title="教师教育理论读书笔记范文.docx">教师教育理论读书笔记范文.docx</a></li> <li> <a href="https://m.bdocx.com/doc/8851776.html" target="_parent" title="俄罗斯方块.docx">俄罗斯方块.docx</a></li> <li> <a href="https://m.bdocx.com/doc/8851777.html" target="_parent" title="幼儿园中班份月打算表五篇.docx">幼儿园中班份月打算表五篇.docx</a></li> <li> <a href="https://m.bdocx.com/doc/8851778.html" target="_parent" title="语文S版小学三年级上册全册教案.docx">语文S版小学三年级上册全册教案.docx</a></li> <li> <a href="https://m.bdocx.com/doc/8851779.html" target="_parent" title="超市管理信息系统分析设计书.docx">超市管理信息系统分析设计书.docx</a></li> <li> <a href="https://m.bdocx.com/doc/8851780.html" target="_parent" title="法院实习周记.docx">法院实习周记.docx</a></li> <li> <a href="https://m.bdocx.com/doc/8851781.html" target="_parent" title="酒店餐厅服务员职业技能鉴定操作考核大纲.docx">酒店餐厅服务员职业技能鉴定操作考核大纲.docx</a></li> </ul> </div> </div> <div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;"> 相关搜索</div> <div class="widget-box pt0" style="border: none; padding:0px 5px;"> <ul class="taglist--inline multi"> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=HTML">HTML</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=CSS">CSS</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e7%ac%94%e8%ae%b0">笔记</a></li> </ul> </div> <div > 当前位置：<a target="_parent" href="https://m.bdocx.com/">首页</a> > <a href="https://m.bdocx.com/booklist-00018.html">初中教育</a> > <a href="https://m.bdocx.com/booklist-0001800004.html">政史地</a> </div> <div class="cssnone"> <iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=XXL92VUm5Z%2fWYy2OP9C1wA%3d%3d&parto=026b5asfnwLUSMUXZYPU83v%2bLGvo2vkkYBKPWNHBEnj3f5nTRljk4wJOLWOXJGXZUYTpOeUN3pWACaIcpQAKCmjQ8nehgLvULIu2FHEmeahGKG8bp6dllwdFli9%2bUj6kKnaQwfVu6XiGCqXrNcDOlPmyv7mkSMe7si6gfEbhu%2f7hSuJ6frmkc3orIvXlFI%2fRBd4pO1r1H4DQom4PILvAQfEfMUACuQiF" frameborder="0" style="width: 0px; height: 0px"> </iframe> </div> <script src="https://mstatic.bdocx.com/JS/bootstrap-collapse.js"></script> </form> <div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;"> <div class="siteInner"> copyright@ 2008-2022 冰豆网网站版权所有经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015515号-1</a><script>var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?2e77bd3f6fe91b0e21d3f22267249ee3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script><script>(function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?81476e42bf626128cf29544ee216a8ed7deb9487dce7ed62313212129c4244a219d1c501ebd3301f5e2290626f5b53d078c8250527fa0dfd9783a026ff3cf719"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window)</script> </div> </div> <div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; "> <div class="trlogoside" id="navlogo" style="display: none;"> <a href="https://m.bdocx.com/" title="冰豆网"><img src="https://www.bdocx.com/images/logo_bd.png" alt="冰豆网"></a> <div class="trnavclose" id="navclose"> </div> </div> <div class="navcontainer"> <div class="row"> <ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;"> <li><a target="_parent"href="https://m.bdocx.com/login.aspx">登录</a></li> <li><a target="_parent"href="https://m.bdocx.com/">首页 </a></li> <li><a target="_parent"href="https://m.bdocx.com/booklist-0.html">资源分类 </a></li> <li><a target="_parent"href="https://m.bdocx.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bdocx.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bdocx.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li> <li><a target="_parent"href="https://m.bdocx.com/newslist.html">通知公告 </a></li> <li><a target="_parent"href="https://m.bdocx.com/h-0.html">帮助中心 </a></li> </ul> </div> </div> </div> <script type="text/javascript"> function stopPropagation(e) { var ev = e || window.event; if (ev.stopPropagation) { ev.stopPropagation(); } else if (window.event) { window.event.cancelBubble = true;//兼容IE } } $("#navmore").click(function (e) { $("#navcontent").show(); $("#navlogo").show(); stopPropagation(e); var navcontentwidth = $("#navcontent").width(); $('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' }); $("#navcontent").show().animate({ "right": 0 }, 300); }); $(document).bind('click', function () { var navcontentwidth = $("#navcontent").width(); $("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); }); $("#navlogo").fadeOut(300); }); $("#navcontent").click(function (e) { stopPropagation(e); }); $("#navclose").click(function (e) { var navcontentwidth = $("#navcontent").width(); $("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); }); $("#navlogo").fadeOut(300); }); </script> <script> function BaseShare(title, desc, imgUrl) { var link = "https://m.bdocx.com/doc/23926344.html"; if (wx) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识 timestamp: '1730154863', // 必填，生成签名的时间戳 nonceStr: '6A9AEDDFC689C1D0E3B9CCC3AB651BC5', // 必填，生成签名的随机串 signature: '71a81e2d8315f7e1f1b81d37bf35cfbb1e95f83a',// 必填，签名，见附录1 jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 //openTagList: ["wx-open-launch-weapp"]//H5打开小程序 }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3 menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand'] }); var shareData = { title: title, // 分享标题 desc: desc,//这里请特别注意是要去除html link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 }; wx.updateAppMessageShareData(shareData);//1.4 分享到朋友 wx.updateTimelineShareData(shareData);//1.4分享到朋友圈 }); } } function BaseShare(title, desc, imgUrl, link) { if (link=="") link = "https://m.bdocx.com/doc/23926344.html"; if (wx) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识 timestamp: '1730154863', // 必填，生成签名的时间戳 nonceStr: '6A9AEDDFC689C1D0E3B9CCC3AB651BC5', // 必填，生成签名的随机串 signature: '71a81e2d8315f7e1f1b81d37bf35cfbb1e95f83a',// 必填，签名，见附录1 jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 //openTagList: ["wx-open-launch-weapp"]//H5打开小程序 }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3 menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand'] }); var shareData = { title: title, // 分享标题 desc: desc,//这里请特别注意是要去除html link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 }; wx.updateAppMessageShareData(shareData);//1.4 分享到朋友 wx.updateTimelineShareData(shareData);//1.4分享到朋友圈 }); } } </script> <script> $(document).ready(function () { var arr = $(".headercontent"); for (var i = 0; i < arr.length; i++) { (function (index) { var url = "https://m.bdocx.com/header.aspx"; $.get(url + "?t=" + (new Date()).valueOf(), function (d) { try { arr.eq(index).empty().html(d); } catch (e) { } try { arr.html(d); } catch (e) { } }); })(i); } }); </script> <script src="https://mstatic.bdocx.com/js/jquery.lazyload.js"></script> <script charset="utf-8"> $("img.lazys").lazyload({ threshold: 200, effect: "fadeIn" }); </script> </body> </html>