---恢复内容开始---

1.HTML 第一天目标

学习目标:- 了解常用浏览器- 掌握WEB标准- 理解标签语义化- 掌握常用的排版标签- 掌握常用的文本格式化图像链接等标签- 掌握三种列表标签- 掌握表格标签- 掌握表格标签- 掌握表单标签

2.常见浏览器内核介绍

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。



浏览器内核（理解）


浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

        渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

        JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。


最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。


3.Web标准（重点）


主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。


结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 最重要


表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

        行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript


理想状态我们的源码： .HTML .css .js


课堂一练：


1.关于WEB标准下列说法正确的是:的（C）


A html决定页面的行为，css决定页面的样式，js决定页面的结构


B html决定页面的样式，css决定页面的结构，js决定页面的行为


C html决定页面的结构，css决定页面的样式，js决定页面的行为


D 以上都不正确


2 web 标准里边规定三层分离不包括哪部分（D）


A．HTML


B．CSS


C．JavaScript


D．PHP


3.关于WEB标准下列说法正确的是（B）


A．html相当于人的动作行为，CSS相当于人的穿着打扮，javascript相当于人的骨架结构；


B．html相当于人的骨架结构，CSS相当于人的穿着打扮，javascript相当于人的动作行为；


C．html相当于人的穿着打扮，CSS相当于人的骨架结构，javascript相当于人的动作行为；


D．html相当于人的骨架结构，CSS相当于人的动作行为，javascript相当于人的穿着打扮；


4.HTML 初识


4.1HTML骨架格式




1 <HTML>
2     <head>
3         <title></title>
4     </head>
5     <body>
6     </body>
7 </HTML>


课堂练习1： 书写我们的第一个HTML 页面！


  1. 新建一个demo 的 TXT 文件。
    2. 

  2. 里面写入刚才的HTML 骨架。月薪过万 你我之间 黑马洗练 一飞冲天
    3. 

  3. 把后缀名改为 .HTML。
    4. 

  4. 右击--谷歌浏览器打开。




<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>俺的网页标题</title></head><body>月薪过万 你我之间 黑马洗练 一飞冲天</body>
</html>


4.2HTML标签分类


在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素


1.双标签




<标签名> 内容 </标签名>


该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。




比如 <body>我是文字  </body>


2.单标签


单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。




<标签名 />




比如  <br />


4.3HTML标签关系


标签的相互关系就分为两种：


1.嵌套关系




<head>  <title> </title>  </head>


2.并列关系




<head></head>
<body></body>


课堂一练


请问下列哪个标签是错误的？(A)


A  <head></head><body></body>


B  <strong><div></div></strong>


C  <head><title></head></title>


D  <body><div></div></body>


5.HTML常用标签


5.1排版标签


标题标签 (熟记)




<hn>   标题文本   </hn>




<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1>传智播客学前端，</h1><h2>前端学院四十班。</h2><h3>新班强哥讲台站，</h3> <h4>又带新颜技术钻。</h4> 标题一共六级选， <hr>具体效果刷新见。<br> ------强哥<p>我是一个段落</p>我是一个段落</body>
</html>


段落标签( 熟记)




<p>  文本内容  </p>


水平线标签(认识)




<hr />是单标签


换行标签(熟记)




<br />




<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>DOCUMENT</title></head><body><h1>40.6摄氏度：上海创出140年气象史上高温新纪录</h1>
<p>2020年07月27日</p>
<p>10:58:26来源：新华网</p><hr><p>新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值</p><p>上海已经连续２天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。</p><p>在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站 １４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p><p>由于气温实在太高，上海２６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</p><p>在上海历史上，出现４０摄氏度以上极端高温的几率并不大。<br />根据相关资料，中心城区徐家汇观测站 １４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p></body>
</html>


课堂一练


关于标签下列说法正确的是(B)


(A) P1是段落标签


(B) H1 是标题标签


(C) Hr是换行标签


(D) Br 是一条直线


2 关于标签下列说法不正确的是(B)


(A) H标签有6个等级分别是<h1> <h2> <h3> <h4> <h5>和<h6>


(B) h1到h6 文字从小到大


(C) p标签一行只能放一个


(D) P是段落标签会给文字加上段落的语义


div span标签(重点)


div span 是没有语义的 是我们网页布局主要的2个盒子 css+div


div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。


span, 跨度，跨距；范围


语法格式：




<div> 这是头部 </div>    <span>今日价格</span>





<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div>我是布局</div><div>我是布局</div><span>布局</span><span>布局</span></body>
</html>


5.2文本格式化标签(熟记)


在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。


b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈




<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>我是<b>楚乔</b>  我是<strong>宇文月 </strong> 我是<i>眼睛</i><em>斜体</em>原价<del>1800</del><ins>下划线</ins></body>
</html>


5.3标签属性


属性就是特性 比如 手机的颜色 手机的尺寸 ，总结就是手机的。。


手机的颜色是黑色 手机的尺寸是 8寸


水平线的长度是 200


图片的宽度 是 300 键 值对


使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：




<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>


在上面的语法中，


1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。


2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。


3.任何标签的属性都有默认值，省略该属性则取默认值。


采取 键值对 的格式 key="value" 的格式


比如:




<hr width="400" />


属性 是 宽度


值 是 400


提倡： 尽量不使用 样式属性。




<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>属性标签</title></head><body><hr color="red"  size="7" width="50px"/><p></p><div></div></body>
</html>


5.4图像标签img (重点)


单词缩写： image 图像


HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下：


该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。




<img src="图像URL" />




<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图像标签</title></head><body><img src="timg.jpg" title="胡歌" /><br /><p><strong>title 鼠标放到图片上，显示的文字</strong></p><br /><img src="timg.gif" title="梅长苏" /></body>
</html>


课堂一练


1.当网页显示图片时,鼠标滑上图片显示文字描述是以下哪个属性****(A)


(A) 设置alt属性


(B) 设置title属性


(C) 设置href 属性


(D) 设置src 属性


2 在HTML中，使用<img>标签插入图像，下列选项关于<img>的src属性说法正确的是(B)


(A) 用来设置图片的格式


(B) 用来设置图片的所在位置


(C) 用来设置鼠标指向图片时显示的文字


(D) 用来设置图片是否能正确显示


5.5链接标签(重点)


单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的


在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：




<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>


href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用


target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。


注意：


1.外部链接 需要添加 http:// www.baidu.com


2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >


3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。


4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。




<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>友情链接:  <!-- <a href="去"></a><img src="来" > --><a href="http://www.baidu.com" target="_blank">百度一下</a>搜狐  <a href="http://www.sina.com">新浪</a>天气预报：<a href="me.html">点击</a>空链接 : <a href="#">空</a>产品   销售   首页   公司地址<a href="http://www.baidu.com"><img src="bd.png" /></a>
</body>
</html>


5.5.1锚点定位 （难点）


通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步：




1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）<a href="#two">   2.使用相应的id名标注跳转目标的位置。<h3 id="two">第2集</h3> 




<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>锚点案例</title></head><body><h1>楚乔传</h1>
<div>中国大陆 67集（TV版）/58集（DVD版）</div>
<h3>《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。由吴锦源执导，嘉纹、杨涛、陈岚编剧，赵丽颖、林更新、窦骁、李沁领衔主演，邓伦、金士杰特邀出演，王彦霖、牛骏峰、黄梦莹、田小洁、孙宁、金瀚、邢昭林、曹曦月、朱圣祎、阮圣文、李若嘉、苗苗等联合出演。[1] 该剧改编自潇湘冬儿小说《11处特工皇妃》，讲述了西魏乱世中，一个特立独行的女奴楚乔，在协助建立新政权过程中关于守护、背叛、信仰、爱情的故事。</h3><a href="test.html/#text">另外一个页面的第4集</a><br /><a href="#one">第1集 </a><br />
<a href="#two">第2集</a><br />
<a href="#three">第3集</a><br />
<a href="#four">第4集</a><br />
<a href="#five">第5集</a><br /><img src="data:images/1.jpg" />
<h3 id="one">第1集(分集以TV版为准)</h3>摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。她不知道自己从哪里来，又将去往何方，前路茫茫。囚车里传来低低的啜泣声，楚乔从梦境里回过神来。周遭都是一片陌生，有一个自称卷毛头的小姑娘听得楚乔肚子咕咕叫，便将自己藏着的窝头分了一半给她。楚乔告诉卷毛头，自己叫做荆小六，卷毛头便唤她小六姐姐。女奴们被带往围场。 　　西魏皇城，燕北世子燕洵，西魏十三皇子裕王元嵩，魏氏门阀长房嫡子魏舒烨，赵氏门阀次子赵西风和宇文门阀三房庶孙宇文怀策马出城去了一处围场。女奴们便被人从帐篷中赶了出来，站在围场中央，手执兵器的官兵将她们团团围住。少女们身上穿的衣服，都写上了几名少年的名字。 　　见此情形，站在高台上的少年们不解宇文怀的意图。宇文怀得意的笑笑，告诉其他几位少年，这不是一次普通的围猎。此次的猎物不仅有狼，还有这些新鲜的少女奴隶，大家可以射畜生，也可以射别人的奴隶，一炷香之后，看看谁剩下的奴隶最多，就算谁赢。 　　裕王觉得这种玩法太过残忍，表示反对。而赵西风却觉得很有意思，鼓动大家兴奋起来。几个人相持不下，言辞便激烈起来。眼见赵西风吵嚷着要求放狼，裕王便推托等宇文玥来了再开始。宇文怀却阴阴一笑，只道宇文玥怕是正在春宵一刻。 　　而另一边，宇文家青山院。一身白衣的宇文门阀长房嗣孙宇文玥，刚刚推门走进房间，就见床上躺着一位美人。但他只是淡淡地瞟了一眼躺在床上的美人，便径自走到书桌前坐了下来。美人见状，主动诱之。宇文玥却不动声色，将计就计，引得美人主动出手行刺，才一举擒住了她。解决掉刺客，宇文玥这才吩咐人备马，往围场上奔去。 　　正当还在宇文玥赶往围场的路上之时，围场上已是一片哀号惨叫景象。两侧的围栏闸门被打开，二十多只凶猛的恶狼登时冲进围场，张大血盆大口，咆哮着向少女们冲去。楚乔观察了一下周围地形，大喊着叫少女们逃离空旷的围场，躲向有植物的山丘。一片慌乱中，高台上的箭已经向少女们射了过来，不消片刻功夫，身边已有好几人倒下。楚乔拉着卷毛头，频频躲过高台上射来的箭支和饿狼的追捕，引起了少年们的注意。 　　慌乱中，一头饿狼在前方挡住了去路，楚乔让卷毛头先躲起来，自己去将那头饿狼引开。燕洵世子见状，搭箭拉弓射杀了饿狼，救下了楚乔。刚刚逃过一劫的楚乔又被一前一后两只饿狼围住。被逼入绝境的她，为了求生，捡起地上的箭支，狠狠的插进了饿狼的咽喉。远处的沙丘上，骑马而立的宇文玥，看着围场中的倔强少女，不由得在心底赞叹她，天生的战士。 　　围场中的少女越来越少，宇文怀看着底下顽强的楚乔，不禁玩心大起。他飞身上马，呼喝着手下人马进围场里去追杀剩下的女奴。其他几名少年都紧随其后，燕洵世子一路上只顾着射杀饿狼，并不对女奴下手。 　　渐渐地，围场中的女奴越来越少，饿狼也越来越少。只有一队人马，在荒野中狂奔，向着少女们逃跑的方向追去，不断地还是有女奴在倒下。楚乔拉着卷毛头，在沙丘上拼命地跑着，一时也不敢慢下来，她知道，要想活命，就不能够停下脚步。 　　远处传来了结束的响箭声，所有人都勒马停下。宇文怀却心有不甘，他还是拉弓朝着女奴射了过去，跑在后面的卷毛头应声倒地。楚乔回过身，紧紧地抱住了卷毛头，似是被风化一般，一动也不动。心有不甘的宇文怀，不想让身上写了“玥”字的楚乔活下来，不顾之前约定，依旧朝着楚乔射了一箭。一旁的燕洵见了，搭箭射向宇文怀的箭，却还是稍稍差了几毫厘，只射下几缕箭尾的翎毛。最后关头，宇文玥悄无声息地用弩箭挡下了这一箭，救了楚乔一命。 　　而伤心欲绝的楚乔，自然没有注意到，她是怎么在几位少年的争论下活下来的。她此刻心里只有恨，以至于在燕洵世子询问她的名字的时候，她也只是冷冷的回答，等到有一天我不用再仰视你的时候，我自然会告诉你。 　　侥幸活下来的楚乔，却因惹得宇文怀不悦，便被管家朱顺关进了宇文家的柴房。躺在地上的楚乔心里恨极了，她恨这个世道，那些贵族比饿狼还要可怕，人命比草芥还要低贱的世道。在昏暗的柴房里，浑身是伤的楚乔暗暗发誓，早晚有一天，自己定要让这些人血债血偿。 　　一名男子手提食盒走了进来，一到楚乔跟前，就满脸心疼地唤楚乔小六，说自己是五哥。楚乔并不认识他，微微有些抗拒他的接近。男子从食盒里拿出一碗饭，饭上放着一块楚乔最爱吃的红烧肉，楚乔含泪接过，觉得吃到了自己这一生最好吃的东西。 　　燕洵来找宇文玥，请他帮忙解决淳公主要替他办生辰宴的事情。面色冷冷的宇文玥，三言两语，就将燕洵的难题化解。 　　柴房里，楚乔还在昏迷。昏睡中，她似乎想起自己同一名男子打斗，不慎落入水中，在湍急的河流中，浑身发冷。有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她。
<h3 id="two">第2集</h3>楚乔伤病还未痊愈，便被宋大娘遣来干活。大姐汁湘为楚乔求情，却被宋大娘骂了一通。管家朱顺前来通知，过两日少爷宇文玥要在府上为燕洵世子举办生辰宴，谁要是敢出一点差错，便要将她打死，众人皆唯唯应了。楚乔便被宋大娘安排去搬花草，朱顺却叫住汁湘，说自己并没有为难楚乔，让汁湘报答他。眼见他就要对汁湘动手动脚，楚乔突然过来问汁湘兰花的位置，汁湘成功躲过朱顺的纠缠。宇文怀吩咐朱顺往宇文玥的酒里下毒，楚乔将这一切都收在眼里，却不动声色地看着。汁湘被安排给宇文玥斟酒，宇文玥察觉出不妥，不肯饮酒。宇文怀便笑言仿效古人，主人不饮酒，就杀美人。宇文玥知道有诈，依旧不肯饮酒。汁湘举着酒杯，苦苦请求。楚乔不愿见姐姐白白做了他们内斗的牺牲品，伺机打翻了酒杯，将众人的注意力吸引到了自己身上。楚乔便求诸位公子放过自己的姐姐，表示自己愿意替姐姐受罚。宇文怀见状，就要让人杀了楚乔。燕洵表示既是自己的生辰，便不愿见着打打杀杀，为楚乔求情。宇文怀却表示宇文府的规矩不能坏，不肯轻饶。燕洵建议玩个游戏，让老天来决定楚乔的生死。他拿出自己腰间的腰牌，腰牌一面龙纹，一面篆字，将它扔在地上，让楚乔来猜哪面朝上，若是猜对了，便免她死罪。楚乔看懂了燕洵的暗示，猜对了龙纹朝上，侥幸逃过一死，却是活罪难逃。楚乔被倒吊在树上已是晚间时分，宇文玥带人过来将她放了下来，却讽刺她。在姐妹们的帮助下逃出府外的楚乔，无意之中听到了朱顺与锦烛的对话，得知临惜有危险，又回到了宇文府。却不想，刚回到宇文府中，就看见宇文玥亲手将临惜杀掉，一脚踢进火堆之中。楚乔想冲进火堆救临惜出来，却被宇文玥踢起的石子打中小腿扑倒在地，当场被侍卫拿住。伤心欲绝的楚乔指责宇文玥滥杀无辜，自己的哥哥根本就不是细作。宇文玥却道，自己滥杀无辜又如何。受了伤的楚乔回到柴房，告诉了姐妹们五哥死去的消息。伤心的小八怨怪楚乔是个克星，克死了自己的家人，汁湘不让小八这样说楚乔，姐妹为了此事吵了起来。浓浓的难过夹杂着满满的无奈，倾袭着每一个荆家姐妹的心。
<h3 id="three">第3集</h3>青山院灵堂肃穆，宇文玥一身孝衣，沉静的面色里透出几分隐隐的忧伤。宇文玥刚刚下令封棺，便被院子里闯进来的一位不速之客阻拦。来人正是三房的宇文怀，他不顾侍卫阻拦，出言嚣张傲慢，扬言要亲自开棺验尸。宇文玥百般阻拦未果，两人便在灵堂上动起手来。正在难分难解之间，宇文怀掷出去的剑让院门口立着的一位太监险险避过，继而尖锐的声音响起“护驾！贵妃娘娘在此，谁敢造次？”此言一出，惊得院里的宇文玥急急撇下了手中的武器，来向贵妃娘娘问安。宇文怀心知贵妃是宇文玥请来的救兵，却也无可奈何，只得停了手。一身雍容的贵妃娘娘开口便质问宇文怀，何以在青山院里闹事？宇文怀却恶人先告状，只道是宇文玥执意封棺，还逼得自己动手。宇文玥便回禀贵妃，祖父是身中西域奇毒而亡，自己是怕此毒再行伤人，便先焚毁杂物再封棺。柴房里，清醒过来的楚乔郁郁寡欢，连汁湘姐姐送来的药汤也不愿意喝。汁湘知道她是因为临惜的死自责便劝慰她，生逢乱世大家都是身不由己，叫她不要再责怪自己。楚乔的目光却透出坚毅，她告诉汁湘，自己是不会让临惜白白死去的，自己一定会好好活下去。说罢，端起药汤一饮而尽。婢女们都在院子里干活，就见有侍卫抬着一具尸体走了出去。婢女们纷纷议论，这是被送去极乐阁的婢女锦兰，因未被老太爷看上，便被折磨致死。宋大娘前来挑选送往极乐阁的婢女，楚乔被宋大娘指名要送去极乐阁。汁湘为了救下妹妹，便求了宋大娘，由自己顶替了楚乔去了极乐阁。极乐阁里，同汁湘一起被送进去的女孩子，没有一个人活着出来，汁湘也不例外。楚乔带着小七小八躲在暗处，亲眼看着汁湘被装在一辆破车上送出来，难过至极的三人，却不敢哭出声音，只能眼睁睁看着自己姐姐的尸体被人扔掉。事后，楚乔悄悄将汁湘的尸首埋了。姐妹三人拿着弄来的纸钱，在临惜和汁湘的坟前烧着，却被受了罚的宋大娘撞个正着。宋大娘想拉着她们去向宇文怀邀功，遂与楚乔姐妹三人起了争执。几人撕打之中，宋大娘从桥上滑落，被楚乔拉住，却终是因为太过沉重而落下了水。小七小八十分害怕，楚乔安慰她们，若是有一日东窗事发，自己会一力承当，叫姐妹们不要担心。可是她们谁也没有瞧见，有一个躲在暗处的影子，早已将这发生在深夜里的一切，尽数看在眼底。宇文玥依旧一副淡淡神情，只说人太过聪明了不见得是好事。燕洵不理会宇文玥的冷淡，只跟他说起他们宇文家的内斗，表示自己并不喜欢这些，自己只想做草原上自由翱翔的雄鹰。问及宇文玥想成为什么的时候，宇文玥也只是微微沉吟。燕洵却不理会宇文玥，他想起了楚乔，便从宇文玥的桌子上顺了一瓶伤药，径自来找楚乔了。却正巧撞上有侍卫要带楚乔去受罚，燕洵轻轻松松就替她解了围。但楚乔冷漠的神色却让燕洵很不解，楚乔告诉燕洵，自己的哥哥姐姐新丧，自己也朝不保夕，自然高兴不起来。
<h3 id="four">第4集</h3>宇文玥挑选侍寝婢女的消息很快传了开来，听着小七小八的议论声，楚乔心底里萌生出了求生的新芽。她猛地意识到，自己只有离开宇文怀的爪牙，才能保护妹妹们的性命，才能为兄姐报仇。自己就像是墙角的弱草，只有借助强者的力量，才能与顽石对抗！楚乔下定决心要参加择选，她不顾别人异样的眼光，勇敢地走进了青山院。只可惜，她只是一个带着铁铃铛的奴婢，根本没有资格参加择选。但楚乔知道，自己已经没有退路，她一定要参加这次的择选。她不屈不挠地留了下来，固执的跪在院子里不肯起来。宇文玥听闻，只道她是不自量力，便由着她跪，并不理会她。屋外烈日当头，楚乔在烈日下烤着，却依旧坚持着。时间一分一秒流逝，外头已是月上中天，楚乔还在院子中跪着，宇文玥默不作声地在暗处瞧着倔强的楚乔，面上若有所思。侍卫想要劝楚乔回去，却见楚乔并无退意，就要将她架走。宇文玥却出来制止了侍卫，他看着跪在地上的楚乔，问她为什么要来参加择选。楚乔目光坚定的看着他，说自己想要活下去。宇文玥并不相信楚乔的意图，他继续问楚乔，自己亲手杀死了她的哥哥，她却来求着自己收她做侍寝婢女，尊严何在。楚乔面无表情，目光却依旧坚定，作为奴婢，命都保不住，哪里还有尊严。宇文玥看了一眼楚乔，问她是否知道侍寝婢女是要在主人床底之间承欢侍奉。楚乔紧紧握住了自己的手，卑微地叩头，请公子留下奴婢。宇文玥似是沉思了一会儿，便向侍卫下令，准许楚乔参加择选。择选开始，众多的婢女聚到一起，便免不了生出是非。楚乔本就是因着公子格外开恩才得以参选，自然引得其他人对其不满。银铃铛的大丫鬟锦烛，看不惯楚乔私自放飞公子豢养的鹦鹉，想暗地里使坏抓坏楚乔的衣服，不想，却被楚乔反手夺走了衣衫，弄得失了仪态。宇文玥将这一切都瞧在眼里，看出了楚乔身手敏捷，倒是个练武的苗子。第一场是蒲棋，楚乔并不太懂，遂很惨淡地输掉一局。第二局是烹茶，依旧不是楚乔的强项，但她知道自己不能再输了。楚乔仔细观察着周围的婢女们如何烹茶，突然计上心头。她跑到井边打了新鲜的井水上来，又顺手摘了一片叶子，照着别的婢女的法子，有样学样，也烹制出了一杯甘冽的茶水。楚乔赢了第二局。第三局，默记梵文佛经，一柱香时间去记，再用一柱香时间默写。楚乔虽然不会握笔，更不会写字，但她却凭借超人的记忆，将佛经一字不差地默写了下来。但楚乔却因为没有署名，而被宇文玥责问。楚乔却道，规则里并没有要求署名，自己只是按照规则来做，并无不妥。宇文玥要求只要楚乔能够在经文上署上自己的名字，这一局就算她赢。这可难不倒楚乔，她从自己的头发上拿下铜铃铛，蘸了墨，稳稳地印了上去。宇文玥不再说话，但他却在回过身以后，在嘴角勾起了一抹微不可察的笑意。中选后的楚乔被带来见宇文玥，宇文玥再次问她，为何要来做自己的侍寝婢女。楚乔跪下回话，自己是为了活下去。宇文玥不信楚乔会忘记自己亲手杀了她哥哥的仇恨，而楚乔却表示自己已经答应过姐姐，要好好照顾两个妹妹。
<h3 id="five"> 第5集</h3>楚乔一觉醒来，忽觉身边有些异样，那躺在不远处的不就是冷脸面瘫的宇文玥嘛，尖叫声不经思考就脱口而出。宇文玥不慌不忙的坐起身，冷言嘲她大惊小怪，这侍寝的机会不正是她想要的吗。楚乔凌厉出手反抗，宇文玥趁此机会教她功夫，两人之间不免有了肢体接触，宇文玥将她拦腰抱起，旋转数圈。宇文玥第一次招人侍寝，在青山院里极为轰动。一大早锦烛赶去送汤。听到房外的动静，宇文玥特意与楚乔亲密搂抱，温柔宠溺地亲自喂她吃粥，锦烛出去后，宇文玥立马推开了楚乔，好像刚才温柔似水的不是他一样，冷言让她整理被她玷污的床铺。楚乔瞥了眼床上的落红，面露不屑，明明就是他故意弄上的。楚乔侍寝后还是身份低下的铁铃铛，比之锦烛这样银铃铛的大丫鬟还是差了很多。锦烛对楚乔嫉妒不已，小七、小八听不下去了，出言为楚乔抱不平。锦烛气而动起手来，楚乔随手就制住了她。碧水河畔，杨柳依依，楚乔坐在栈桥边，奋力地洗着衣服。燕洵牵马来到河边找她，调笑宇文玥为楚乔取的名字-星儿，正好与宇文玥的玥字相和，燕洵满脸揶揄，笑说宇文玥矫情。楚乔懒得和他计较，端起盆就要走。燕洵不依不饶，耍赖般的把自己的爱驹交给她牵着。楚乔的性子甚合燕洵心意，他特意去找宇文玥要讨了她去，否则就赖在青山院不走了。女奴们居住的小院里，楚乔的特殊待遇遭到以锦烛为首的部分女奴妒忌，连带着她的两位妹妹小七、小八也受到排挤，处处被为难。楚乔为妹妹出头，惹得锦烛满脸怒气，与她动起手来，甚至不惜暗箭伤人，千钧一发之际，宇文玥及时出手，才免得楚乔被伤。锦烛恶人先告状，假惺惺地说是在维护青山院的规矩。宇文玥长身玉立，脸色平静无波看不出喜怒，只说要将楚乔带回去惩罚。他们走后，锦烛的跟随者们趾高气昂，对小七、小八嘲讽更加变本加厉，仿佛宇文玥的态度已经说明了一切。而随宇文玥而去的楚乔，不想白白受到惩罚，她向宇文玥说明当时情况，表明自己只是看不惯弱者被欺负。宇文玥面色冷峻，告诉她强者为王，身为弱者没资格为人讨公道。楚乔心有不甘，请他指点何为强者。假山流水淙淙，走过水上蜿蜒的石块，宇文玥带楚乔进入密室。宇文玥让她掷石头，烛火晃动，乱箭齐发，楚乔一时应付不来，但渐渐地身手越来越快，闪躲越发及时。接下来的三个时辰，楚乔都要和乱箭、石子为伴。她不断被击中，但眼神却越发坚韧，要报仇，就要忍常人所不能忍</body>
</html>


test.html




<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Document</title></head><body><h3>第1集(分集以TV版为准)</h3> 　　摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。她不知道自己从哪里来，又将去往何方，前路茫茫。囚车里传来低低的啜泣声，楚乔从梦境里回过神来。周遭都是一片陌生，有一个自称卷毛头的小姑娘听得楚乔肚子咕咕叫，便将自己藏着的窝头分了一半给她。楚乔告诉卷毛头，自己叫做荆小六，卷毛头便唤她小六姐姐。女奴们被带往围场。 　　西魏皇城，燕北世子燕洵，西魏十三皇子裕王元嵩，魏氏门阀长房嫡子魏舒烨，赵氏门阀次子赵西风和宇文门阀三房庶孙宇文怀策马出城去了一处围场。女奴们便被人从帐篷中赶了出来，站在围场中央，手执兵器的官兵将她们团团围住。少女们身上穿的衣服，都写上了几名少年的名字。 　　见此情形，站在高台上的少年们不解宇文怀的意图。宇文怀得意的笑笑，告诉其他几位少年，这不是一次普通的围猎。此次的猎物不仅有狼，还有这些新鲜的少女奴隶，大家可以射畜生，也可以射别人的奴隶，一炷香之后，看看谁剩下的奴隶最多，就算谁赢。 　　裕王觉得这种玩法太过残忍，表示反对。而赵西风却觉得很有意思，鼓动大家兴奋起来。几个人相持不下，言辞便激烈起来。眼见赵西风吵嚷着要求放狼，裕王便推托等宇文玥来了再开始。宇文怀却阴阴一笑，只道宇文玥怕是正在春宵一刻。 　　而另一边，宇文家青山院。一身白衣的宇文门阀长房嗣孙宇文玥，刚刚推门走进房间，就见床上躺着一位美人。但他只是淡淡地瞟了一眼躺在床上的美人，便径自走到书桌前坐了下来。美人见状，主动诱之。宇文玥却不动声色，将计就计，引得美人主动出手行刺，才一举擒住了她。解决掉刺客，宇文玥这才吩咐人备马，往围场上奔去。 　　正当还在宇文玥赶往围场的路上之时，围场上已是一片哀号惨叫景象。两侧的围栏闸门被打开，二十多只凶猛的恶狼登时冲进围场，张大血盆大口，咆哮着向少女们冲去。楚乔观察了一下周围地形，大喊着叫少女们逃离空旷的围场，躲向有植物的山丘。一片慌乱中，高台上的箭已经向少女们射了过来，不消片刻功夫，身边已有好几人倒下。楚乔拉着卷毛头，频频躲过高台上射来的箭支和饿狼的追捕，引起了少年们的注意。 　　慌乱中，一头饿狼在前方挡住了去路，楚乔让卷毛头先躲起来，自己去将那头饿狼引开。燕洵世子见状，搭箭拉弓射杀了饿狼，救下了楚乔。刚刚逃过一劫的楚乔又被一前一后两只饿狼围住。被逼入绝境的她，为了求生，捡起地上的箭支，狠狠的插进了饿狼的咽喉。远处的沙丘上，骑马而立的宇文玥，看着围场中的倔强少女，不由得在心底赞叹她，天生的战士。 　　围场中的少女越来越少，宇文怀看着底下顽强的楚乔，不禁玩心大起。他飞身上马，呼喝着手下人马进围场里去追杀剩下的女奴。其他几名少年都紧随其后，燕洵世子一路上只顾着射杀饿狼，并不对女奴下手。 　　渐渐地，围场中的女奴越来越少，饿狼也越来越少。只有一队人马，在荒野中狂奔，向着少女们逃跑的方向追去，不断地还是有女奴在倒下。楚乔拉着卷毛头，在沙丘上拼命地跑着，一时也不敢慢下来，她知道，要想活命，就不能够停下脚步。 　　远处传来了结束的响箭声，所有人都勒马停下。宇文怀却心有不甘，他还是拉弓朝着女奴射了过去，跑在后面的卷毛头应声倒地。楚乔回过身，紧紧地抱住了卷毛头，似是被风化一般，一动也不动。心有不甘的宇文怀，不想让身上写了“玥”字的楚乔活下来，不顾之前约定，依旧朝着楚乔射了一箭。一旁的燕洵见了，搭箭射向宇文怀的箭，却还是稍稍差了几毫厘，只射下几缕箭尾的翎毛。最后关头，宇文玥悄无声息地用弩箭挡下了这一箭，救了楚乔一命。 　　而伤心欲绝的楚乔，自然没有注意到，她是怎么在几位少年的争论下活下来的。她此刻心里只有恨，以至于在燕洵世子询问她的名字的时候，她也只是冷冷的回答，等到有一天我不用再仰视你的时候，我自然会告诉你。 　　侥幸活下来的楚乔，却因惹得宇文怀不悦，便被管家朱顺关进了宇文家的柴房。躺在地上的楚乔心里恨极了，她恨这个世道，那些贵族比饿狼还要可怕，人命比草芥还要低贱的世道。在昏暗的柴房里，浑身是伤的楚乔暗暗发誓，早晚有一天，自己定要让这些人血债血偿。 　　一名男子手提食盒走了进来，一到楚乔跟前，就满脸心疼地唤楚乔小六，说自己是五哥。楚乔并不认识他，微微有些抗拒他的接近。男子从食盒里拿出一碗饭，饭上放着一块楚乔最爱吃的红烧肉，楚乔含泪接过，觉得吃到了自己这一生最好吃的东西。 　　燕洵来找宇文玥，请他帮忙解决淳公主要替他办生辰宴的事情。面色冷冷的宇文玥，三言两语，就将燕洵的难题化解。 　　柴房里，楚乔还在昏迷。昏睡中，她似乎想起自己同一名男子打斗，不慎落入水中，在湍急的河流中，浑身发冷。有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她。<h3>第2集</h3> 　　楚乔伤病还未痊愈，便被宋大娘遣来干活。大姐汁湘为楚乔求情，却被宋大娘骂了一通。管家朱顺前来通知，过两日少爷宇文玥要在府上为燕洵世子举办生辰宴，谁要是敢出一点差错，便要将她打死，众人皆唯唯应了。楚乔便被宋大娘安排去搬花草，朱顺却叫住汁湘，说自己并没有为难楚乔，让汁湘报答他。眼见他就要对汁湘动手动脚，楚乔突然过来问汁湘兰花的位置，汁湘成功躲过朱顺的纠缠。宇文怀吩咐朱顺往宇文玥的酒里下毒，楚乔将这一切都收在眼里，却不动声色地看着。汁湘被安排给宇文玥斟酒，宇文玥察觉出不妥，不肯饮酒。宇文怀便笑言仿效古人，主人不饮酒，就杀美人。宇文玥知道有诈，依旧不肯饮酒。汁湘举着酒杯，苦苦请求。楚乔不愿见姐姐白白做了他们内斗的牺牲品，伺机打翻了酒杯，将众人的注意力吸引到了自己身上。楚乔便求诸位公子放过自己的姐姐，表示自己愿意替姐姐受罚。宇文怀见状，就要让人杀了楚乔。燕洵表示既是自己的生辰，便不愿见着打打杀杀，为楚乔求情。宇文怀却表示宇文府的规矩不能坏，不肯轻饶。燕洵建议玩个游戏，让老天来决定楚乔的生死。他拿出自己腰间的腰牌，腰牌一面龙纹，一面篆字，将它扔在地上，让楚乔来猜哪面朝上，若是猜对了，便免她死罪。楚乔看懂了燕洵的暗示，猜对了龙纹朝上，侥幸逃过一死，却是活罪难逃。楚乔被倒吊在树上已是晚间时分，宇文玥带人过来将她放了下来，却讽刺她。在姐妹们的帮助下逃出府外的楚乔，无意之中听到了朱顺与锦烛的对话，得知临惜有危险，又回到了宇文府。却不想，刚回到宇文府中，就看见宇文玥亲手将临惜杀掉，一脚踢进火堆之中。楚乔想冲进火堆救临惜出来，却被宇文玥踢起的石子打中小腿扑倒在地，当场被侍卫拿住。伤心欲绝的楚乔指责宇文玥滥杀无辜，自己的哥哥根本就不是细作。宇文玥却道，自己滥杀无辜又如何。受了伤的楚乔回到柴房，告诉了姐妹们五哥死去的消息。伤心的小八怨怪楚乔是个克星，克死了自己的家人，汁湘不让小八这样说楚乔，姐妹为了此事吵了起来。浓浓的难过夹杂着满满的无奈，倾袭着每一个荆家姐妹的心。<h3>第3集</h3> 　　青山院灵堂肃穆，宇文玥一身孝衣，沉静的面色里透出几分隐隐的忧伤。宇文玥刚刚下令封棺，便被院子里闯进来的一位不速之客阻拦。来人正是三房的宇文怀，他不顾侍卫阻拦，出言嚣张傲慢，扬言要亲自开棺验尸。宇文玥百般阻拦未果，两人便在灵堂上动起手来。正在难分难解之间，宇文怀掷出去的剑让院门口立着的一位太监险险避过，继而尖锐的声音响起“护驾！贵妃娘娘在此，谁敢造次？”此言一出，惊得院里的宇文玥急急撇下了手中的武器，来向贵妃娘娘问安。宇文怀心知贵妃是宇文玥请来的救兵，却也无可奈何，只得停了手。一身雍容的贵妃娘娘开口便质问宇文怀，何以在青山院里闹事？宇文怀却恶人先告状，只道是宇文玥执意封棺，还逼得自己动手。宇文玥便回禀贵妃，祖父是身中西域奇毒而亡，自己是怕此毒再行伤人，便先焚毁杂物再封棺。柴房里，清醒过来的楚乔郁郁寡欢，连汁湘姐姐送来的药汤也不愿意喝。汁湘知道她是因为临惜的死自责便劝慰她，生逢乱世大家都是身不由己，叫她不要再责怪自己。楚乔的目光却透出坚毅，她告诉汁湘，自己是不会让临惜白白死去的，自己一定会好好活下去。说罢，端起药汤一饮而尽。婢女们都在院子里干活，就见有侍卫抬着一具尸体走了出去。婢女们纷纷议论，这是被送去极乐阁的婢女锦兰，因未被老太爷看上，便被折磨致死。宋大娘前来挑选送往极乐阁的婢女，楚乔被宋大娘指名要送去极乐阁。汁湘为了救下妹妹，便求了宋大娘，由自己顶替了楚乔去了极乐阁。极乐阁里，同汁湘一起被送进去的女孩子，没有一个人活着出来，汁湘也不例外。楚乔带着小七小八躲在暗处，亲眼看着汁湘被装在一辆破车上送出来，难过至极的三人，却不敢哭出声音，只能眼睁睁看着自己姐姐的尸体被人扔掉。事后，楚乔悄悄将汁湘的尸首埋了。姐妹三人拿着弄来的纸钱，在临惜和汁湘的坟前烧着，却被受了罚的宋大娘撞个正着。宋大娘想拉着她们去向宇文怀邀功，遂与楚乔姐妹三人起了争执。几人撕打之中，宋大娘从桥上滑落，被楚乔拉住，却终是因为太过沉重而落下了水。小七小八十分害怕，楚乔安慰她们，若是有一日东窗事发，自己会一力承当，叫姐妹们不要担心。可是她们谁也没有瞧见，有一个躲在暗处的影子，早已将这发生在深夜里的一切，尽数看在眼底。宇文玥依旧一副淡淡神情，只说人太过聪明了不见得是好事。燕洵不理会宇文玥的冷淡，只跟他说起他们宇文家的内斗，表示自己并不喜欢这些，自己只想做草原上自由翱翔的雄鹰。问及宇文玥想成为什么的时候，宇文玥也只是微微沉吟。燕洵却不理会宇文玥，他想起了楚乔，便从宇文玥的桌子上顺了一瓶伤药，径自来找楚乔了。却正巧撞上有侍卫要带楚乔去受罚，燕洵轻轻松松就替她解了围。但楚乔冷漠的神色却让燕洵很不解，楚乔告诉燕洵，自己的哥哥姐姐新丧，自己也朝不保夕，自然高兴不起来。<h3 id="text">第4集</h3> 　　宇文玥挑选侍寝婢女的消息很快传了开来，听着小七小八的议论声，楚乔心底里萌生出了求生的新芽。她猛地意识到，自己只有离开宇文怀的爪牙，才能保护妹妹们的性命，才能为兄姐报仇。自己就像是墙角的弱草，只有借助强者的力量，才能与顽石对抗！楚乔下定决心要参加择选，她不顾别人异样的眼光，勇敢地走进了青山院。只可惜，她只是一个带着铁铃铛的奴婢，根本没有资格参加择选。但楚乔知道，自己已经没有退路，她一定要参加这次的择选。她不屈不挠地留了下来，固执的跪在院子里不肯起来。宇文玥听闻，只道她是不自量力，便由着她跪，并不理会她。屋外烈日当头，楚乔在烈日下烤着，却依旧坚持着。时间一分一秒流逝，外头已是月上中天，楚乔还在院子中跪着，宇文玥默不作声地在暗处瞧着倔强的楚乔，面上若有所思。侍卫想要劝楚乔回去，却见楚乔并无退意，就要将她架走。宇文玥却出来制止了侍卫，他看着跪在地上的楚乔，问她为什么要来参加择选。楚乔目光坚定的看着他，说自己想要活下去。宇文玥并不相信楚乔的意图，他继续问楚乔，自己亲手杀死了她的哥哥，她却来求着自己收她做侍寝婢女，尊严何在。楚乔面无表情，目光却依旧坚定，作为奴婢，命都保不住，哪里还有尊严。宇文玥看了一眼楚乔，问她是否知道侍寝婢女是要在主人床底之间承欢侍奉。楚乔紧紧握住了自己的手，卑微地叩头，请公子留下奴婢。宇文玥似是沉思了一会儿，便向侍卫下令，准许楚乔参加择选。择选开始，众多的婢女聚到一起，便免不了生出是非。楚乔本就是因着公子格外开恩才得以参选，自然引得其他人对其不满。银铃铛的大丫鬟锦烛，看不惯楚乔私自放飞公子豢养的鹦鹉，想暗地里使坏抓坏楚乔的衣服，不想，却被楚乔反手夺走了衣衫，弄得失了仪态。宇文玥将这一切都瞧在眼里，看出了楚乔身手敏捷，倒是个练武的苗子。第一场是蒲棋，楚乔并不太懂，遂很惨淡地输掉一局。第二局是烹茶，依旧不是楚乔的强项，但她知道自己不能再输了。楚乔仔细观察着周围的婢女们如何烹茶，突然计上心头。她跑到井边打了新鲜的井水上来，又顺手摘了一片叶子，照着别的婢女的法子，有样学样，也烹制出了一杯甘冽的茶水。楚乔赢了第二局。第三局，默记梵文佛经，一柱香时间去记，再用一柱香时间默写。楚乔虽然不会握笔，更不会写字，但她却凭借超人的记忆，将佛经一字不差地默写了下来。但楚乔却因为没有署名，而被宇文玥责问。楚乔却道，规则里并没有要求署名，自己只是按照规则来做，并无不妥。宇文玥要求只要楚乔能够在经文上署上自己的名字，这一局就算她赢。这可难不倒楚乔，她从自己的头发上拿下铜铃铛，蘸了墨，稳稳地印了上去。宇文玥不再说话，但他却在回过身以后，在嘴角勾起了一抹微不可察的笑意。中选后的楚乔被带来见宇文玥，宇文玥再次问她，为何要来做自己的侍寝婢女。楚乔跪下回话，自己是为了活下去。宇文玥不信楚乔会忘记自己亲手杀了她哥哥的仇恨，而楚乔却表示自己已经答应过姐姐，要好好照顾两个妹妹。<h3>第5集</h3> 　　楚乔一觉醒来，忽觉身边有些异样，那躺在不远处的不就是冷脸面瘫的宇文玥嘛，尖叫声不经思考就脱口而出。宇文玥不慌不忙的坐起身，冷言嘲她大惊小怪，这侍寝的机会不正是她想要的吗。楚乔凌厉出手反抗，宇文玥趁此机会教她功夫，两人之间不免有了肢体接触，宇文玥将她拦腰抱起，旋转数圈。宇文玥第一次招人侍寝，在青山院里极为轰动。一大早锦烛赶去送汤。听到房外的动静，宇文玥特意与楚乔亲密搂抱，温柔宠溺地亲自喂她吃粥，锦烛出去后，宇文玥立马推开了楚乔，好像刚才温柔似水的不是他一样，冷言让她整理被她玷污的床铺。楚乔瞥了眼床上的落红，面露不屑，明明就是他故意弄上的。楚乔侍寝后还是身份低下的铁铃铛，比之锦烛这样银铃铛的大丫鬟还是差了很多。锦烛对楚乔嫉妒不已，小七、小八听不下去了，出言为楚乔抱不平。锦烛气而动起手来，楚乔随手就制住了她。碧水河畔，杨柳依依，楚乔坐在栈桥边，奋力地洗着衣服。燕洵牵马来到河边找她，调笑宇文玥为楚乔取的名字-星儿，正好与宇文玥的玥字相和，燕洵满脸揶揄，笑说宇文玥矫情。楚乔懒得和他计较，端起盆就要走。燕洵不依不饶，耍赖般的把自己的爱驹交给她牵着。楚乔的性子甚合燕洵心意，他特意去找宇文玥要讨了她去，否则就赖在青山院不走了。女奴们居住的小院里，楚乔的特殊待遇遭到以锦烛为首的部分女奴妒忌，连带着她的两位妹妹小七、小八也受到排挤，处处被为难。楚乔为妹妹出头，惹得锦烛满脸怒气，与她动起手来，甚至不惜暗箭伤人，千钧一发之际，宇文玥及时出手，才免得楚乔被伤。锦烛恶人先告状，假惺惺地说是在维护青山院的规矩。宇文玥长身玉立，脸色平静无波看不出喜怒，只说要将楚乔带回去惩罚。他们走后，锦烛的跟随者们趾高气昂，对小七、小八嘲讽更加变本加厉，仿佛宇文玥的态度已经说明了一切。而随宇文玥而去的楚乔，不想白白受到惩罚，她向宇文玥说明当时情况，表明自己只是看不惯弱者被欺负。宇文玥面色冷峻，告诉她强者为王，身为弱者没资格为人讨公道。楚乔心有不甘，请他指点何为强者。假山流水淙淙，走过水上蜿蜒的石块，宇文玥带楚乔进入密室。宇文玥让她掷石头，烛火晃动，乱箭齐发，楚乔一时应付不来，但渐渐地身手越来越快，闪躲越发及时。接下来的三个时辰，楚乔都要和乱箭、石子为伴。她不断被击中，但眼神却越发坚韧，要报仇，就要忍常人所不能忍</body></html>


5.5.2base 标签 基本的


base 可以设置整体链接的打开状态


base 写到 <head> </head> 之间


把所有的连接 都默认添加 target="_blank"




<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><base  target="_blank" /><!-- 把所有的连接 都默认添加 target="_blank" -->
</head>
<body>友情链接:<a href="http://www.baidu.com" target="_blank">百度</a><a href="http://www.baidu.com"target="_blank">新浪</a><a href="http://www.baidu.com" target="_blank">搜狐</a><a href="http://www.baidu.com" target="_self">谷歌</a>
</body>
</html>


课堂一练


1在HTML中，关于a标签说法不正确的是（C）


(A) a标签可以通过href属性跳转到另外一个页面


(B) a标签可以通过targer属性设置在是否在新窗口中打开


(C) a标签只能在当前页面设置锚点链接，让用户能够快速定位到目标内


(D) a标签可以通过href="#"设置一个空链接


2如果想跳转到当前页面里名为show的锚点，下列写法是正确的(B)


A < a href=".show">跳转</a>


B < a href="#show">跳转</a>


C < a href=" show">跳转</a>


D < a src=" #show">跳转</a>


3如果想跳转到同目录下的名为success.html文件里名为show的锚点，下列写法是正确的(A)


(A) < a href="success.html#show">跳转</a>


(B) < a href="#show">跳转</a>


(C) < a href="success#show">跳转</a> (D) < a src="success.html#show">跳转</a>


5.6特殊字符标签 （理解）




<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>&lt;p&gt;&lt;/p&gt; 是一个段落标签<p>&nbsp;&nbsp;&nbsp;&nbsp;我是文字</p>&yen;
<!-- 不能说的秘密 -->.<!-- header star -->.<!-- 快捷键 -->
</body>
</html>


5.7注释标签


在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：




<!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + / 


注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。


5.8列表标签


把…制成表,以表显示


容器里面装载着文字或图表的一种形式，叫列表。


列表最大的特点就是 整齐 、整洁、 有序


无序列表 ul （重点）


无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：




<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>......
</ul>


注意： <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。


1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

        2. <li>与</li>之间相当于一个容器，可以容纳所有元素。

        3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！


有序列表 ol （了解）


有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：




<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>......
</ol>


所有特性基本与ul 一致。


但是实际工作中， 较少用 ol img src="media/1.jpg" />


自定义列表（理解）


定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：




<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...
</dl>




<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>你爱的水果：<ul>   <li>橘子</li><li>橙子</li><li>酸梅</li><li>大白菜</li><li><div>榴莲</div><span></span></li></ul>考试成绩：<ol><li>张三</li><li>张三丰</li><li>张三丰丰</li></ol>城市：<dl><dt>北京</dt><dd>昌平区</dd><dd>海淀区</dd><dd>丰台区</dd><dd>朝阳区区</dd><dd>传智区</dd></dl>
</body>
</html>


6.路径(重点、难点)


实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。


根目录 当前目录


路径可以分为： 相对路径和绝对路径


相对路径


以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。


  1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
    2. 

  2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
    3. 

  3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。


绝对路径


绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的


“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。




<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><img src="https://www.baidu.com/img/bd_logo1.png" alt=""><img src="http://www.itcast.cn/images/logo.png" alt="">
</body>
</html>


课堂一练


1.在下面结构中，哪种写法可以在index页面中有输出img.gif


2在下面结构中，哪种写法可以在index页面中有输出1.jpg


(A)<img src=”../1/2/1.jpg” />


(B)<img src=”/1/2/1.jpg” />


(C)<img src=”1/2/1.jpg” />


(D)<img src=”1.jpg” />


3在下面结构中哪种写法可以在index页面中有输出img.gif


今日总结：




转载于:https://www.cnblogs.com/ltcz99/p/10847470.html
												


											

01 html和css （前端基础第一天）相关推荐
	

    
								
  1. 前端基础第一天：HTML常用标签知识点
		
    学习目标 理解: 相对路径三种形式 应用 排版标签 文本格式化标签 图像标签 链接 相对路径,绝对路径的使用 1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写 ...
    
		
    2. 
						
  2. 前端基础第一天项目 品优购
		
    品优购项目-上 目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化  ...
    
		
    3. 
						
  3. web前端基础——第一章
		
    目录 一.了解什么是HTML.CSS 1.什么是HTML.CSS? 2.如何去写代码?写到哪里呢? 二.宇宙第一编辑器VS Code 1.如何安装/使用插件? 2.学习编辑器基本使用. 三.Chrom ...
    
		
    4. 
						
  4. CSS前端基础知识梳理
		
    一.CSS介绍 (1)CSS:层叠样式表. (2)CSS(Cascading Style Sheets) 就是用来美化样式的!!! (3)CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于 ...
    
		
    5. 
						
  5. html 文档自动获取css,前端基础中css选择器，html文档 ,与javascrip中基本的获取
		
    1,Vscode自动刷新插件与格式化插件 应用搜索搜索liveserver,安装后.点击右下角Golive可以进入使用. 格式化插件prettier:首选项,设置,搜索format,勾选prettie ...
    
		
    6. 
						
  6. html+id选择器如何使用方法,id选择器_HTML+CSS前端基础知识教程_腾讯视频
		
    更多资料源码请加3252897743第1天 html   1.HTTP协议   2.html是纯文本3.html骨架4.DTD文档类型5.head标签6.body标签7.html基本语法8.h系列的标 ...
    
		
    7. 
						
  7. html导航教程视频,导航_HTML+CSS前端基础知识教程_腾讯视频
		
    更多资料源码请加3252897743第1天 html   1.HTTP协议   2.html是纯文本3.html骨架4.DTD文档类型5.head标签6.body标签7.html基本语法8.h系列的标 ...
    
		
    8. 
						
  8. css样式子绝父相,子绝父相_HTML+CSS前端基础知识教程_腾讯视频
		
    更多资料源码请加3252897743第1天 html   1.HTTP协议   2.html是纯文本3.html骨架4.DTD文档类型5.head标签6.body标签7.html基本语法8.h系列的标 ...
    
		
    9. 
						
  9. 前端基础第一天——HTML
		
    目录 什么是HTML? HTML 标签 1.html常用标签: 1.1标题标签 ​ 1.2段落标签 1.3换行标签 1.4文本格式化标签 1.5盒子标签 1.6图像标签 1.7目录文件夹和根目录 1. ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 漫画算法：5分钟搞明白红黑树到底是什么？
		
    2. 
						
  2. fiddler 在火狐(firefox)下无效的问题 ——Fiddler监听Firefox、Chrome中的http请求
		
    3. 
						
  3. JAVA实现从上往下打印二叉树（《剑指offer》）
		
    4. 
						
  4. 《Kali Linux渗透测试的艺术》—8章8.7节本章总结
		
    5. 
						
  5. svn汉化包安装无效的解决办法
		
    6. 
						
  6. CentOS 6.7安装Storm 0.9.7
		
    7. 
						
  7. PHP正则表达式——匹配多行
		
    8. 
						
  8. 嵌入式linux镜像,使用Openembedded定制嵌入式Linux镜像
		
    9. 
						
  9. PRML-系列一之1.5.5~1.5.6
		
    10. 
						
  10. ubuntu使用之-rime
		
    11. 
						
  11. python（源码包安装   基本使用   循环）
		
    12. 
						
  12. jni ndk_带有NDK的Android JNI应用程序
		
    13. 
						
  13. 使用Adobe Acrobat为PDF文件添加图章(仅图片)
		
    14. 
						
  14. 如何将几个变量相加减乘除（图文+数据集）【SPSS 075期】
		
    15. 
						
  15. centos php mbstring.so,CentOS安装php mbstring的扩展
		
    16. 
						
  16. 一盒两用！——破解电信IPTV机顶盒为普通安卓机顶盒
		
    17. 
						
  17. 计算机网络：令牌环网IEEE 802.5
		
    18. 
						
  18. android 半透明色值_最全的Android 颜色透明度
		
    19. 
						
  19. 迈普光彩分享 几个细节教你搭建好LED显示屏舞台
		
    20. 
						
  20. STM32CubeMX  GPIO模拟I2C读写M24C64
		
    21. 
		

	


热门文章
	

    
									
  1. Zookeeper原理及实战开发-余强-专题视频课程
			
    2. 
						
  2. 玩转“Redis轻量级数据库”之入门（上）
			
    3. 
						
  3. Jmeter 实现HTTPS双向认证
			
    4. 
						
  4. kdbx后缀文件打开
			
    5. 
						
  5. 如何看待4亿蓝领职业教育的切入点？| 职业教育系列报告（二）
			
    6. 
						
  6. C语言实现栈（附带题目讲解）
			
    7. 
						
  7. jade支持html,Jade ！HTML框架
			
    8. 
						
  8. 基于Android的短信应用开发（三）——读取手机短信
			
    9. 
						
  9. 两个月能学什么？零基础小白全网热门预训练模型梳理整合
			
    10. 
						
  10. 2012年3月5日有感
			
    11.