WEB前端学习笔记-HTML
发布时间
阅读量：
阅读量
**
001-我的第一个html文件.html
> <!--头-->
> <head>
> <!--网页标题，显示在网页左上角-->
> <title>网页的标题</title> </head>
>
>
>
>
>
>
>
>> 网页的主题内容，欢迎学习HTML! </body> </html>
>
>
>
>
>**
002-HTML的基本标签.html
HTML的基本标签
1.流水知音，惜花惜人 第二十三回 《西厢记妙词通戏语 牡丹亭艳曲警芳心》—— 节选：那一日正当三月中浣，早饭后，宝玉携了一套《会真记》，走到沁芳闸桥边桃花底下一块石上坐着，展开《会真记》，从头细玩。正看到“落红成阵”，只见一阵风过，把树头上桃花吹下一大半来，落的满身满书满地皆是。宝玉要抖将下来，恐怕脚步践踏了，只得兜了那花瓣，来至池边，抖在池内。那花瓣浮在水面，飘飘荡荡，竟流出沁芳闸去了 。回来只见地下还有许多，宝玉正踟蹰间，只听背后有人说道：“你在这里做什么？”宝玉一回头， 却是林黛玉来了，肩上担着花锄，锄上挂着花囊，手内拿着花帚。【庚辰侧批：一幅采芝图，非葬花图也。】宝玉笑道：“好，好，来把这个花扫起来，撂在那水里。我才撂了好些在那里呢。”林黛玉道：“撂在水里不好。你看这里的水干净，只一流出去，有人家的地方脏的臭的混倒，仍旧把花遭塌了。那畸角上我有一个花冢，如今把他扫了，装在这绢袋里，拿土埋上，日久不过随土化了，岂不干净。”
2.感花伤己，葬花词吟 第二十七回 《滴翠亭杨妃戏彩蝶 埋香冢飞燕泣残红》结尾 和第二十八回 《蒋玉菡情赠茜香罗 薛宝钗羞笼红麝串》开头 ——节选：宝玉因不见了林黛玉，便知她躲了二，想了一想，索性迟两日，等她的气消一消再去也罢了。因低头看见许多凤仙石榴等各色落花，锦重重的落了一地，因叹道：“ 这是她心里生了气，也不收拾这花儿来了。待我送了去，明儿再问着他。”说着，只见宝钗约着他们往外头去。 宝玉道：“我就来。”说毕，等他二人去远了，便把那花兜了起来， 登山渡水，过树穿花，一直奔了那日同林黛玉葬桃花的去处来。将已到了花冢，犹未转过山坡，只听山坡那边有呜咽之声，一行数落着，哭的好不伤感。宝玉心下想道：“这不知是哪房里的丫头，受了委屈，跑到这个地方来哭。”一面想，一面煞住脚步，听她哭道是： 花谢花飞花满天，红消香断有谁怜？ 游丝软系飘春榭，落絮轻沾扑绣帘。 闺中女儿惜春暮，愁绪满怀无释处； 手把花锄出绣帘，忍踏落花来复去？ 柳丝榆英自芳菲，不管桃飘与李飞； 桃李明年能再发，明年闺中知有谁？ 三月香巢已垒成，梁间燕子太无情！ 明年花发虽可啄，却不道人去梁空巢也倾。 一年三百六十日，风刀霜剑严相逼； 明媚鲜妍能几时，一朝飘泊难寻觅。 花开易见落难寻，阶前闷杀葬花人； 独把花锄泪暗洒，洒上空枝见血痕。
杜鹃无语正黄昏，荷锄归去掩重门； 青灯照壁人初睡，冷雨敲窗被未温。 怪奴底事倍伤神？半为怜春半恼春。 怜春忽至恼忽去，至又无言去不闻。
昨宵庭外悲歌发，知是花魂与鸟魂？ 花魂鸟魂总难留，鸟自无言花自羞； 愿奴胁下生双翼，随花飞到天尽头。 天尽头，何处有香丘？
未若锦囊收艳骨，一抔净土掩风流； 质本洁来还洁去，强于污淖陷渠沟。 尔今死去侬收葬，未卜侬身何日丧？ 侬今葬花人笑痴，他年葬侬知是谁？
试看春残花渐落，便是红颜老死时。 一朝春尽红颜老，花落人亡两不知！
> <!--标题字：是HTML预留的格式，和word中的标题字相同-->
> <h1>标题字</h1>
> <h2>标题字</h2>
> <h3>标题字</h3>
> <h4>标题字</h4>
> <h5>标题字</h5>
> <h6>标题字</h6>
>
> <!--换行标记,br标签是一个独目标记-->
> hello
> world
>
> hello<br>world!
>
> <!--横线，独目标记-->
> <hr>
>
> <!--color和width都是hr标签的属性-->
> <!--语法极其松散-->
> <hr color="red" width="50%">
> <hr color=green width='50%'>
>
>
> <!--预留格式-->
> <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>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>003-HTML的实体符号.html
实体符号
bC
> b<a>c
>
>
> abc deg<br> a bc <!--空格 -->
>
>
>
>
>
>
>
>004-HTML的表格.html
表格
员工信息列表
> <!--
> 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>e</td>
> <td>f</td>
> <td>g</td> </tr> <tr>
> <td>x</td>
> <td>y</td>
> <td>z</td> </tr> </table>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>005-HTML的表格-单元格合并以及th标签.html
表格单元格合并，以及th标签
> <!--
> 注意事项：
> 1、row合并的时候，删除下面的单元格
> 2、col合并的时候，对删除哪个没有要求
> -->
> <table border="1px" width = "50%">
> <!-- <tr>
> <td>员工编号</td>
> <td>员工薪资</td>
> <td>员工名称</td>
> </tr> -->
> <!--th 标签也是单元格标签，比td多的是居中，加粗--> <tr>
> <th>员工编号</th>
> <th>员工薪资</th>
> <th>员工名称</th>
> </tr> <tr>
> <td>1</td>
> <td>2</td>
> <td>3</td> </tr> <tr>
> <td>4</td>
> <td>5</td>
> <td rowspan='2'>69</td> </tr> <tr>
> <td colspan='2'>78</td>
>
> </tr>
> </table>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>006-HTML的表格-thead tbody tfoot.html
thead tbody
tfoot在table中不是必须的，只是这样做便于后期的JS代码的编写
> <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>
> </tbody>
> <!--脚--> <tfoot>
> <tr>
> <td>4</td>
> <td>5</td>
> <td rowspan='2'>69</td>
> </tr>
>
> <tr>
> <td colspan='2'>78</td>
> </tr>
>
> <tr>
> <td>1</td>
> <td>2</td>
> <td>3</td>
> </tr> </tfoot>
> </table> </body> </html>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>007-背景颜色和背景图片.html
> <title>背景颜色和背景图片</title> </head> <!--
> bgcolor:设置背景色
> background：设置背景图片
> 以上的设置都是对背景进行设计
> --> <body bgcolor="red" background="img/BG1.png"> </body> </html>
>
>
>
>
>
>
>
>
>008-图片.html
> <title>图片img</title> </head> <body> <!--
> 1、设置图片高度宽度的时候，只设置宽度，高度会进行等比例缩放
> 2、img标签就是图片标签
> 3、src属性是图片的路径
> 4、width设置宽度 height设置高度
> 5、title设置鼠标悬停时显示的信息
> 6、alt设置图片加载失败时显示的提示信息
> --> <img src ="img/BG1.png"width="100px" title="我是一张小图片"alt="图片找不到了"/> <br><br><br> <img src="img/BG1.png"
>
>
>
>
>
>
>
>
>
>
>
>/>
009-超链接或热链接.html
超链接
热链接
百度
百度新闻
> <!--
> 图片超链接
> -->
> <a href="https://www.hao123.com">
> <img src="img/hao123.png"width="100"/>
> </a>
>
> <!--
> 超链接有一个target属性：
> 可取值：
> _blank :新窗口
> _self :当前窗口(默认就是这种方式)
> _top ：顶级窗口
> _parent：父窗口
> -->
>
> <a href="https://www.hao123.com"target="_blank">
> <img src="img/hao123.png"width="100"/>
> </a> </body> </html> <!-- 超链接的作用：
> 通过浏览器可以向服务器发送请求
> 浏览器向服务器发送数据(请求：request)
> 服务器向浏览器发送数据(响应：response)
>
> B/S架构的系统：每一个请求都会对应一个响应。
>
> B--------请求------S
> S--------响应------B
>
> 用户点击超链接和用户在浏览器地址栏上直接输入url，有什么区别》
> 本质上没有区别，都是向服务器发送请求
>
> 从操作上讲，超链接更加方便。
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>–>
010-列表.html
列表
-
水果
1. 桃子
2. 苹果
3. 西瓜 -
蔬菜
-
甜点
<ul type="circle">
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>天津</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>011-表单form.html 表单form
<form action="http://192.168.111.3:8080/oa/save">
<!--画一个提交按钮，这个按钮可以提交表单-->
<!--画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力-->
<!--对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息-->
<input type="submit" value="注册" />
<!--这是一个普通按钮，不具备提交表单的能力-->
<input type="button" value="设置按钮上显示的文本" />
</form>
<!--这个按钮和普通的超链接没有什么太大的区别
超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时还可以携带数据
-->
<form action="https://www.baidu.com">
<input type="text" />
<input type="submit" value="百度" />
</form>
<br>
<br>
<!--
表单是以什么格式提交数据给服务器的？
http://localhost:3306/jd/login?username=123&userpwd=132
格式： action？name=value&name=value&name=value.......
HTTP协议规定，必须以这种格式提交给服务器
重点强调:表单项写了name属性的，一律会提交给服务器，不想提交这一项就不要写name属性
-->
<form action="hhtp://localhost:3306/jd/login">
用户名<input type="text" /><br>
密码<input type="password" /><br>
<input type="submit"value="登录" />
</form>
<form action="http://localhost:3306/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、reset必须放到form表单内部
-->
<form></form>
</body>012-用户注册的表单.html 用户注册的表单 用户名
密码
确认密码
性别 男 女 兴趣爱好 唱 跳 rap 篮球
学历 高中 大专 本科 硕士
简历
</form>
</body>013-下拉列表支持多选.html 下拉列表支持多选 河北省 河南省 山东省 山西省 ## 014-file控件 file控件
<form action="http://localhost:3306/oa/save">
<!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器-->
<input type="hidden" name="userid" value="111" />
用户代码<input type="text" name="usercode" />
<input type="submit" value="提交" />
</form>
</body>015-readonly和disabled.html readonly和disabled 用户代码
用户姓名
016-input控件的maxlength属性.html maxlength ## 017-HTML中元素的id属性.html HTML中元素的id属性 ## 018-HTML中的div和span.html HTML中的div和span
全部评论 (0)
还没有任何评论哟~