html基础
1、基础
1.1、html历史
HTML5新特性
工具
editplus,vscode等等
1.2、HTML基本语法
元素
属性
doctype
meta
1.3、必备元素的解释
1.4、实体符号
<!DOCTYPE html>
<html lang="en">
<head>
<!--
meta主要是设置网页的原数据的，原数据不是给用户算的
charset 指定网页的字符集
name：指定数据的名称
content：指定数据的内容
keywords 表示网站的关键字
可以同时指定多个关键字，关键字使用,隔开
description：用于指定网站的一个描述，会显示在搜索引擎中的搜索结果
title标签会作为搜索引擎中的文字显示超链接
-->
<meta name="keywords" content="HTML5前端 ，css,javascript">
<meta name="description" content="这是一个很不错的网站">
<!--
<meta http-equiv="refresh" content=3;url="https://wwww.baidu.com">
将页面重定向到另一个网站,3秒后跳转到百度
-->
<meta charset="UTF-8">
<meta http-equiv="refresh" content=3;url="https://wwww.baidu.com">
<title>实体</title>
</head>
<body>
<!-- 在HTML中多个空格会被浏览器解析为一个空格
空格
>:大于号
<:大于号
©:版权符号
-->
<p>今天是个好天气</p>
<p>今天是 好天气</p>
</body>
</html>
1.5、行内元素，标题元素,文本元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 在网页中HTML主要是用来负责网页的结构
所以我们关注的应该是标签的语义，而不是它的样式
标签标题：
h1~h6重要性递减，h1最重要，h6最不重要
h1在网页的标签中的重要性仅次于title标签，一般使用一个页面中只会有一个h1
一般情况下只会用h1~h3,h4~h6很少用
在页面中独占一行的元素被称为 块元素（block element）
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<!-- p标签表示一个页面中的表示一个段落 p也是一个块元素 -->
<p>p标签表示一个页面中的表示一个段落</p>
<p>p标签表示一个页面中的表示一个段落</p>
<!-- hgroup标签用来为标题分组，可以将一组相关的标题同时放在group标签里 -->
<hgroup>
<h1>将进酒</h1>
<h2>李白</h2>
</hgroup>
<!-- em标签表示语音语调的一个加重
在页面中不会独占一行的叫做行内元素（inline element）
-->
<p>今天天气<em>真不错!</em></p>
<!-- stong标签表示重要的内容强调 -->
<p>你今天写<strong>作业了吗</strong></p>
鲁迅
<!-- blockquote表示一个长引用 -->
<blockquote>
这句话我从来没说过
</blockquote>
<!-- q标签表示一个短引用，行内元素 -->
子曰<q>学而时习之</q>
</body>
</html>
文本
<!doctype html>
<html>
<head>
<title>HTML的基本标签</title>
</head>
<body>
<!--换行标记，br标签是一个独目标记-->
hello
world!
hello <br>world!
<!--横线，独目标记-->
<hr>
<!--color和width都是hr标签的属性-->
<hr color="red" width="50%">
<!--语法太松散了。-->
<hr color='green' width=30%>
<!--预留格式-->
<pre>
for(int i = 0; i < 10; i++){
System.out.println("i = " + i);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup>
10<sub>m</sub>
<!--字体标签-->
<font color="red" size="50">字体标签</font>
</body>
</html>
拓展： div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中的div和span</title>
</head>
<body>
<!--
1、div和span是什么？有什么用？
* div和span都可以称为“图层”
* 图层的作用是为了保证页面可以灵活的布局。
* 图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
* div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
3、div和span的区别？
div独自占用一行（默认情况下）
span不会独自占用一行。
-->
<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>
<span id="span1">我是一个SPAN标签</span>
<span id="span2">我是一个SPAN标签</span>
<div id="div3">
<div>
<div>test</div>
</div>
</div>
</body>
</html>
2、列表
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 列表
文具
铅笔
尺子
橡皮
HTML中也有列表，分为有序列表，无序列表，定义列表三种
有序列表用ol,
无序列表用ul,
li事列表项
定义列表用dl
使用dt来表示定义的内容
使用dd表示对内容进行解释说明
平常用的最多的就就是ul
-->
</body>
<ul> <!--ul的type属性，disc,circel,square 分别为其前面的样式-->
<li>抽烟</li>
<li>喝酒</li>
<li>打麻将</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>自定义内容给进行解释说明</dd>
</dl>
</html>
3、图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息。
-->
<!-- 向当前页面引入一个外部图片，使用img标签引入外部图片
img图片是一个自结束的标签，
img这种元素属于替换元素 （在块元素和行内元素之间，具有两种元素的特点）
属性：、
src指定外部图片的路径，用法和超链接一样
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时是使用
搜索引擎会根据alt中的内容来识别图片
width:指定图片宽度（单位是像素）
height:图片的高度
如果宽度和高度中只修改了一个，则另一个会等比例缩放
注意：
一般在pc端，不建议改变图片的大小，需要大的图片就裁多大
但在移动端经常使用缩放 （大图缩小）
图片的格式：
jpeg:(jpg) 支持的颜色丰富，不支持透明效果，不支持动图,一般用来现实照片
gif: 支持的颜色少，支持简单透明，支持动图， 颜色单一的图片，动图
png 支持的颜色丰富，支持复杂透明，不支持动图， 颜色复杂 ，复杂透明图片（为网页而生）
webp： 这种格式，谷歌新推出的专门表示网页中的图片的一种格式，它有上面三种图片的有点，而且文件也比较小
缺点是：兼容性不好，老版本的兼容会出问题
base64 :-将图片使用base64进行编码，这样可以将图片转为字符，通过字符的形式来引入图片
-一般都是一些需要和网页一起加载图片才会使用base64(图片加载特别快，使用场景比较少)，方法搜索一个base64转换的网站
效果一样的用小的，效果不一样，用效果好的
-->
<img src="../../img/img/1.gif" alt="松鼠">
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1583422391&di=7d023da346330d3e1ad79fe3e03caa88&src=http://newimg.mingxing.com/upload/thumb/2016/01-31/0-9XpBfl.jpg" alt="迪丽热吧">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1079275175,985741979&fm=26&gp=0.jpg" alt="迪丽热巴">
</body>
</html>
背景颜色、图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--
bgcolor : 设置背景色
background : 设置背景图片
以上的设置都是对背景进行设置。
-->
<body bgcolor="red" background="img/bd_logo1.png">
</body>
</html>
4.超链接
HTML中的id属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中元素的id属性</title>
</head>
<body id="mybody">
<!--
1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
2、注意：表单提交数据的时候，只和name有关系，和id无关。
3、id有什么用？
javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更方便。
4、HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript主要就是对这棵DOM树上的节点进行增删改的。
DOM(Document)树。
-->
<form id="myform">
<input type="text" id="username" name="username"/>
<input type="password" id="userpwd" name="userpwd"/>
<!--id就是节点的身份证号码，不能重复。-->
<!--
<input type="text" id="username" />
-->
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接 热链接</title>
</head>
<body>
<!--
超链接的特点：
有下划线
鼠标停留在超链接上面显示小手形状。
点击超链接之后还能跳转页面。
-->
<a href="http://www.baidu.com">百度</a>
<a href="http://news.baidu.com/">百度新闻</a>
<a href="http://www.jd.com/">京东商城</a>
<a href="http://www.tmall.com/">天猫</a>
<a href="http://www.126.com/">126邮箱</a>
<br><br>
<!--
href：hot references 热引用
href属性后面一定是一个资源的地址。
href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。
-->
<a href="007-背景颜色和背景图片.html">007</a>
<!--图片超链接-->
<a href="https://www.hao123.com/">
<img src="img/hao123.png" width="120px"/>
</a>
<!--
超链接有一个target属性：
可取值：
_blank : 新窗口
_self ： 当前窗口（默认就是这种方式。）
_top ： 顶级窗口
_parent ： 父窗口
可选值：
_self 默认值，在当前页面中打开超链接
_blank 打开新的窗口显示网页
国内用_self用的较多
-->
<!--图片超链接，在超链接里嵌套图片元素-->
<a href="https://www.hao123.com/" target="_self">
<img src="img/hao123.png" width="120px"/>
</a>
<!-- 在开发中我们可以使用#作为超链接路径的占位符 -->
<a href="#button">去底部</a>
<br>
<a href="#second">去薛蟠那一行</a>
<br>
<!-- 还可以使用Javascript:；作为href的属性，点击以后什么都不会发生 -->
<a href="javascript:;">点我什么用都没有</a>
<a href="https://www.baidu.com" target=_blank>targer=_blank</a>
<!-- 如果页面内容非常多，应该有一个回到顶部的按钮，也可以用超链接 -->
<br>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
<p>红楼梦》开篇以神话形式介绍作品的由来，说女娲补天之石剩一块未用，弃在大荒山无稽崖青埂峰下。茫茫大士、渺渺真人经过此地，施法使其有了灵性，携带下凡。不知过了几世几劫，空空道人路过，见石上刻录了一段故事，便受石之托，抄写下来传世。辗转传到曹雪芹手中，经他批阅十载、增删五次而成书。
书中故事起于甄士隐。元宵之夜，甄士隐的女儿甄英莲被拐走，不久葫芦庙失火，甄家被烧毁。甄带妻子投奔岳父，岳父卑鄙贪财，甄士隐贫病交攻，走投无路。后遇一跛足道人，听其《好了歌》后，为《好了歌》解注。经道人指点，士隐醒悟随道人出家。
贾雨村到盐政林如海家教林黛玉读书。林如海的岳母贾母因黛玉丧母，要接黛玉去身边。黛玉进荣国府，除外祖母外，还见了大舅母，即贾赦之妻邢夫人，二舅母，即贾政之妻王夫人，年轻而管理家政的王夫人侄女、贾赦儿子贾琏之妻王熙凤（凤姐），以及贾迎春、贾探春、贾惜春和衔玉而生的贾宝玉。宝黛二人初见有似曾相识之感，宝玉因见表妹没有玉，认为玉不识人，便砸自己的通灵宝玉，惹起一场不快。
贾雨村在应天府审案时，发现英莲被拐卖。薛蟠与母亲、妹妹薛宝钗一同到京都荣国府住下。宁国府梅花盛开，贾珍妻尤氏请贾母等赏玩。
贾宝玉睡午觉，住在贾珍儿媳秦可卿卧室，梦游太虚幻境，见“金陵十二钗”图册，听演“红楼梦曲”，与仙女可卿云雨，醒来后因梦遗被丫环袭人发现，二人发生关系。
沦落乡间务农的京官后代王狗儿让岳母刘姥姥到荣国府找王夫人打秋风。凤姐给了二十两银子。宝钗曾得癞头和尚赠金锁治病，后一直佩带。黛玉忌讳“金玉良缘”之说，常暗暗讥讽宝钗、警示宝玉。
贾珍之父贾敬放弃世职求仙学道，贾珍在家设宴为其庆生。林如海得病，贾琏带黛玉去姑苏，其族弟贾瑞调戏凤姐，被凤姐百般捉弄而死。秦可卿病死。
贾政长女贾元春加封贤德妃，皇帝恩准省亲。荣国府为了迎接这大典，修建极尽奢华的大观园，又采办女伶、女尼、女道士，出身世家、因病入空门的妙玉也进荣府。
元宵夜，元春回娘家待了一会儿，要宝玉和众姐妹献诗。宝玉和黛玉两小无猜，情意绵绵。书童茗烟将《西厢记》等书偷进园给宝玉，宝玉和黛玉一同欣赏。宝玉庶弟贾环嫉妒宝玉，抄写经书时装失手弄倒蜡烛烫伤宝玉，王夫人大骂赵姨娘。赵姨娘又深恨凤姐，便请马道婆施魔法，让凤姐、宝玉中邪。癞和尚、跛道人擦拭通灵玉、救好二人。
黛玉性格忧郁，暮春时节伤心落花，将它们埋葬，称为“花冢”，并作《葬花吟》。恰巧宝玉路过听到，深喜知心。王夫人丫环金钏与宝玉调笑，被王夫人赶出投井而死，宝玉结交琪官，贾政大怒，将其打得半死。袭人向王夫人进言，深得王夫人欢心，被王夫人看作心腹，并决定将来袭人给宝玉做妾。大观园中无所事事，探春倡导成立诗社，并各人起了名号。第一次咏白海棠，蘅芜君薛宝钗夺魁；第二次作菊花诗，潇湘妃子林黛玉压倒众人。
林黛玉和贾宝玉
林黛玉和贾宝玉
刘姥姥二进荣国府，贾母在大观园摆宴，把她作女清客取笑，刘姥姥便以此逗贾母开心。贾母又带刘姥姥游大观园各处。在栊翠庵，妙玉招待黛玉、宝钗饮茶，宝玉也得沾光。由于行酒令黛玉引了几句《西厢》曲文，被宝钗察觉，并劝解她，二人关系好转。黛玉模仿《春江花月夜》写出《秋窗风雨夕》，抒发自己的哀愁。
贾赦垂涎贾母丫环鸳鸯，让邢夫人找贾母。鸳鸯不肯，贾母也不愿意，斥责邢夫人。贾赦母子关系更加不好。
<p id="second"> 薛蟠在一次宴席上调戏柳湘莲，被柳毒打，柳怕报复逃往他乡，薛蟠无脸也外出经商。其妾香菱（即英莲）到大观园学诗。薛宝琴、李绮、李纹等几家亲戚的姑娘来到，大观园中作诗、制灯谜，空前欢乐热闹。
袭人因母病回家，晴雯夜里受寒伤风发高烧。贾母给宝玉一件孔雀毛织的雀金裘，不慎烧个洞，街上裁缝不能修补。宝玉要为舅舅庆寿，晴雯带重病连夜补好。贾府戏班解散，芳官成为宝玉丫鬟，宝玉为其庆生，众姊妹抽花签行酒令，黛玉为芙蓉花，宝钗为牡丹花。贾敬吞丹丧命。
尤氏因丧事繁忙，请母亲和妹妹尤二姐、尤三姐来帮忙。贾琏见二姐貌美，要作二房，偷居府外。二姐和贾珍原有不清白，贾琏知道贾珍想把三姐玩弄，尤三姐将珍、琏大骂，三姐意中人为柳湘莲，贾琏外出办事，路遇薛蟠、柳湘莲。贾琏为柳提媒，柳答应。到京城后，柳先向三姐之母交订礼，遇宝玉闲谈尤氏一家而起疑，又去索礼退婚，尤三姐自刎，柳出家。
凤姐知道贾琏偷娶之事，便将计就计装贤惠，将二姐接进府。请贾母等应允。贾琏回来，因办事好，贾赦又赏一妾。凤姐借妾手逼得尤二姐吞金自杀。
黛玉做桃花诗，众人议重开诗社，改海棠社为桃花社。史湘云填柳絮词，黛玉邀众填柳絮词。众人放风筝，欲放走晦气，黛玉风筝线断，众人齐将风筝放飞。
傻大姐在园中拾到一个绣有春宫画的香囊，王夫人大怒，在王善保家的撺掇下抄检大观园。探春悲愤，认为抄家是不祥之兆。后又因王善保家的掀她衣服，大怒并扇王善保家的一耳光。
贾府中秋开夜宴，</p>贾母邀大家一起到凸碧山庄赏月，众人击鼓吃酒。黛玉见贾府中许多人赏月，贾母犹叹人少，不似当年热闹，不觉对景感怀。湘云过来陪她，二人来到凹晶溪馆联诗，湘云联寒塘渡鹤影，黛玉对冷月葬花魂，湘云赞黛玉诗句新奇，妙玉听见亦夸赞，将刚二人的诗誊写出来并结了尾。
晴雯被王夫人以勾引宝玉为由，被撵抱恨而死。贾宝玉无可奈何，听小丫头说晴雯当了芙蓉花神后写《芙蓉女儿诔》祭她，后竟成黛玉谶语。薛蟠娶妻夏金桂后，在夏挑唆下，薛毒打香菱，薛姨妈不准，夏金桂和婆婆吵闹。薛蟠无法在家。只得外出。
迎春出嫁，宝玉心中伤感。贾政逼宝玉上课。袭人来潇湘馆探口风，婆子说了些造次之话，黛玉甚觉刺心，惊噩梦染上重病。元妃身体欠安，贾母、贾政等前往宫内探视。贾宝玉、妙玉走近潇湘馆，听得黛玉抚琴悲秋之音，后琴弦崩断，宝玉疑惑，妙玉从中预感到黛玉“断弦”的命运。宝玉见晴雯补过的雀金裘，心中悲伤并祭奠她。
红楼梦《枉凝眉》
红楼梦《枉凝眉》
黛玉听到宝玉定亲的消息，千愁万感，把身子一天天糟蹋起来，杯弓蛇影，一日竟至绝粒。侍书与雪雁说宝玉亲事未定，老太太要亲上作亲，黛玉听了病情转好。贾母知黛玉心事，主张娶钗嫁黛，王夫人、凤姐附和。金桂暗恋薛蝌，与宝蟾借送酒戏之。贾政、王夫人商量娶宝钗的事，宝玉来到潇湘馆，黛玉与其参禅。怡红院海棠冬天开放，贾母办酒席赏花。宝玉丢玉，全家忙乱，请妙玉扶乩。
元妃薨逝，贾家悬赏寻玉。宝玉变疯傻，老太太要给宝玉冲喜，凤姐献掉包计。黛玉从傻大姐那里得知宝玉娶亲后迷失本性，黛玉咳血病重，焚烧诗稿。宝玉、宝钗成亲。宝玉欲死，宝钗说黛玉已死，宝玉昏死做噩梦。贾府人去潇湘馆哭黛玉。
贾母祷天宽宥儿孙。主上宣旨革去贾赦、贾珍世职，发配边疆，贾政袭贾赦的世职。雨村落井下石，包勇醉骂雨村。王夫人将家事交凤姐办理。贾母拿出银两给宝钗过生日，宝玉中途退席经潇湘馆闻鬼哭。宝玉梦黛玉而不得，错把柳五儿当作晴雯。
贾母病重。迎春被孙绍祖折磨致死，史湘云丈夫得了暴病。贾母寿寝，凤姐办理丧事，可办事力诎，失去人心。鸳鸯自尽殉主。何三引贼盗来贾府，妙玉为贼所抢不知所终。赵姨娘中邪被折磨死。刘姥姥哭贾母，凤姐欲将巧姐托付给她。宝玉找紫鹃表白心思。凤姐死，王仁混闹给凤姐大办丧事，平儿帮贾琏筹钱。甄应嘉进京拜会贾政。贾宝玉与甄宝玉貌象而异，宝玉斥之禄蠹。
宝玉病重，和尚送来通灵宝玉，宝玉死而复生。宝玉二历幻境，看淡儿女情长。贾琏看望贾赦，将女儿托于王夫人。惜春出家修行，紫鹃陪伴。宝钗劝勉宝玉，与之辩论赤子之心。贾政回京行至毗陵，雪中见宝玉随僧道而去。香菱难产而死，袭人嫁蒋玉菡。贾雨村遇甄士隐，归结红楼梦。 [2]</p>
<a id="button" href="#">回到顶部</a>
<!-- id属性，id就是一个标识就像身份证一样指定id后，给href="#id"就可以直接定位到id所在位置 -->
</body>
</html>
<!--
超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构的系统：每一个请求都会对应一个响应。
用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便。
-->
5.表格
<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<br><br><br><br><br><br><br><br>
<center><h1>员工信息列表</h1></center>
<hr>
<!--
border="1px" 设置表格的边框为1像素宽度。
width 宽度
height 高度
-->
<!--
<table border="1px" width="300px">
-->
<table align="center" border="1px" width="60%" height="150px">
<!--align对齐方式-->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td align="center">z</td>
</tr>
</table>
</body>
</html>
合并
<!doctype html>
<html>
<head>
<title>表格单元格合并，以及th标签</title>
</head>
<body>
<!--注意事项：
1、row合并的时候，删除“下面的”单元格
2、col合并的时候，对删除哪个没有要求。
-->
<table border="1px" width="50%">
<tr>
<!--
<td>员工编号</td>
<td>员工薪资</td>
<td>部门名称</td>
-->
<!-- th 标签也是单元格标签，比td多的是居中、加粗。-->
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td colspan="2">d</td>
<!--
<td>f</td>
-->
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。</title>
</head>
<body>
<table border="1px" width="50%">
<!--头-->
<thead>
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
</thead>
<!--体-->
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td colspan="2">d</td>
</tr>
</tbody>
<!--脚-->
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>
6.表单(最重要的)
6.1 、action和method的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单form</title>
</head>
<body>
<!--
1、表单有什么用？
收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
2、怎么画一个表单？
使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：
action属性用来指定数据提交给哪个服务器。
action属性和超链接中的href属性一样。都可以向服务器发送请求（reque st）
5、http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给：
192.168.111.3机器上的8080端口对应的软件。
-->
<form action="http://192.168.111.3:8080/oa/save">
<!-- 画一个提交按钮，这个按钮可以提交表单-->
<!-- 画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。-->
<!-- 对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。-->
<input type="submit" value="登录"/>
<!--这是一个普通按钮，不具备提交表单的能力。-->
<input type="button" value="设置按钮上显示的文本"/>
</form>
<a href="http://www.baidu.com">百度</a>
<!--这个按钮和普通的超链接没什么太大的区别。（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。）-->
<form action="http://www.baidu.com">
<input type="submit" value="百度" />
</form>
<br>
<br>
<form action="http://localhost:8080/jd/login">
用户名<input type="text" /><br>
密码<input type="password" /><br>
<input type="submit" value="登录" />
</form>
<!--
表单是以什么格式提交数据给服务器的？
http://localhost:8080/jd/login?username=abc&userpwd=111
格式：action?name=value&name=value&name=value&name=value&name=value...
W3C的HTTP协议规定的，必须以这种格式提交给服务器。
重点强调：表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。
文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
当name没有写的时候，该项不会提交给服务器。
但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。java代码得到的是：String username = "";
-->
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd" /></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录" />
<input type="reset" value="清空" />
</td>
</tr>
</table>
</form>
<!--submit必须放到form标签内部-->
<input type="submit" value="登录" />
<!--必须放到form标签内部-->
<input type="reset" value="清空" />
<form></form>
</body>
</html>
6.2 input标签
6.3提交文件和隐藏域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file控件</title>
</head>
<body>
<form action="http://localhost:8080/oa/save">
<!--file控件：文件上传专用
input type="file" name="files"。-->
<input type="file" name="files" />
<input type="button" vlaue="上传" name="upload">
<!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。-->
<input type="hidden" name="userid" value="111" />
用户代码<input type="text" name="usercode" />
<input type="submit" value="提交" />
<input type="submit" value="提交" hidden/>
<!--
readonly和disabled相同点：都是只读不能修改。
但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交。）
-->
用户代码<input type="text" name="usercode" value="110" readonly />
<br>
用户姓名<input type="text" name="username" value="zhangsan" disabled />
<br>
<input type="submit" value="提交数据" />
</form>
</body>
</html>
6.4下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表支持多选</title>
</head>
<body>
<!-- multiple="multiple" 支持多选的 size设置显示条目数量。-->
<select multiple="multiple" size="2">
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
</body>
</html>
6.5用户注册表单（重要）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册的表单</title>
</head>
<body>
<!--
用户注册：
用户名
姓名
密码
确认密码
性别
兴趣爱好
学历
简介
form表单method属性：
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。
method属性不指定，或者指定get，这种情况下都是get。
只有当method属性指定为post的时候才是post请求。
剩下所有的请求都是get请求。
post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来。
POST提交的数据还是：name=value&name=value&name=value.....
-->
<form action="http://localhost:8080/jd/register">
用户名
<input type="text" name="username"/>
<br>
密码
<input type="password" name="userpwd" />
<br>
确认密码
<input type="password"/>
<br>
性别
<input type="radio" name="gender" value="1" />男
<input type="radio" name="gender" value="0" checked/>女 <!--单选按钮的value必须手动指定-->
<br>
兴趣爱好
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink" checked/>喝酒
<input type="checkbox" name="interest" value="fireHair" checked/>烫头
<br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option> <!--默认选中-->
<option value="ss">硕士</option>
</select>
<br>
简介 <!--文本域，文本域没有value属性，用户填写的内容就是value-->
<textarea rows="10" cols="60" name="introduce"></textarea>
<br>
<input type="submit" value="注册" />
<input type="reset" value="清空" />
</form>
<!--超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。-->
<!--超链接是get请求。不是post请求。-->
<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
</body>
</html>
<!--
http://localhost:8080/jd/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman
-->
6.6 、表单验证
简单验证和一些input元素：
<!-- 邮箱验证 -->
<p>
邮箱：<input type="email" name="email">
</p>
<!-- URL 会自动提示，提交时带验证-->
<p>
URL: <input type="url" name="email">
</p>
<!-- 数字 -->
<p>
数量：
<input type="number" max="100" min="0" step="1">
</p>
<!-- 滑块 -->
<p>
滑块：<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!-- 增强鼠标的可用性 -->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<input type="submit">
简单验证2：
正则表达式百度搜索即可，随用随查。
以上三个都是为简单的表单验证，实际中我们使用JavaScript来进行表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 提示输入信息-->
<p>
姓名：<input type="text" name="name" id="" placeholder="请输入用户名">
</p>
<p>
<!-- 输入提交时，空的不会给提价）-->
<p>
密码：<input type="password" name="name" id="" required>
</p>
</p>
<!-- 自定义邮箱验证 （正则）-->
<p>
邮箱：<input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<input type="submit">
</form>
</body>
</html>
7.页面元素
结构元素
分组元素
页面交互元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 布局手段主要用div,没有语义就是表示一个区块，目前来收我们主要用的布局方式就是div -->
<div></div>
<!--span是一个行内元素没有任何一个，一般用于在网页选中文字 -->
<span></span>
<!--
布局标签结构化的语义标签
这些用的不多，了解即可
-->
<!-- header表示网页的头部，
main表示网页的主体部分
footer表示网页的底部
nav表示网页中的导航
article表示文章
aside表示与主体相关的其他内容（ 侧边栏）
section表示一个独立的区块，上面的标签都不能使用时用section
-->
<header></header>
<main></main>
<footer></footer>
<nav><!-- 里面可以嵌套无序列表--></nav>
<article></article>
<aside></aside>
<section></section>
</body>
</html>
8.音视频与内联框架
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
可以在自己的网页中引入其他的网页
<!-- 内联框架，iframe。用于当前 页面引入一个其他的页面
src指定要引入的网页路径
frameborder指定内联框架的边框的有无，0没有，1表示有，用的比较少
-->
<h1>hello</h1>
<iframe src="https://www.qq.com"width="800" height="600" frameborder="0"></iframe>
<!--也可以利用超链接跳转内联网页-->
<iframe src="" name ="hello" width="800" height="600" frameborder="0"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
audio标签用来向页面中引入一个 外部的音频文件
音视频文件引入的时候，默认情况下不允许用户自己控制播放停止
属性：
controls:允许用户控制播放，不需要给值的一个属性
autoplay:如果设置了autopaly,音频打开页面时会自动播放
但是目前来说大部分浏览器不会自动对音乐进行播放
loop从头播放，循环播放
embed标签用来老版本的音视频导入
video :用来导入视频
-->
<audio src="../../音视频/audio.mp3" controls autoplay loop></audio>
<!-- 除了src指定外部路径外，还可以通过source来指定路径 -->
<audio controls >
<source src="../../音视频/audio.mp3">
<!-- 如果不支持的话会显示文字 -->
<source src="../../音视频/audio.ogg">
<embed src="../../音视频/audio.mp3" type="audio/mp3" width="100" height="100">
<!-- 如果版本兼容的话embed就不会显示了 -->
</audio cotrols>
<video controls>
<source src="../../音视频/flower.webm">
<source src="../../音视频/flower.mp4">
</video>
<iframe src="//player.bilibili.com/player.html?aid=77217003&cid=132017557&page=26" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>
总结
重点掌握表单和表单应用与验证
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
