学完后端还要学前端,在这之间还有中间件
景德海
html语言-----超文本标记语言
标记—即标签的意思
简单的格式—
用记事本新建一个txt文档,在文档中加入以下内容,然后修改后缀名为 html或者htm,之后用浏览器打开
<html>
<head>
helloworld
</head>
<body>
你好世界
</body>
</html>
被所包围有头和身子部分,然后用浏览器打开,一个简单的html页面就诞生了;
但是不能完全 用记事本或者notepad来编写,需要借助一切便捷工具来辅助开发----从dreamweaver,到hbuilder,等等一些辅助工具的开发极大的便利了程序员的开发效率;hbuider的下载
但是我还是习惯与vscode的使用毕竟 vscode功能更加强大一些;
简单的说一下html中标签的格式
有单标签和双标签
标签有很多,入门先掌握 基本的html格式
<html>
<!----><!--这是注释的格式-->
<head>
<title>这是网页标题</title>
<meta charset="utf-8"/><!--这是指定文件编码格式-->
<meta http-equiv="content-type"content="text/html; charset=UTF-8"/><!--
</head>
<body>
这是身子部分内容
</body>
</html>
这是网页基本要素,可以说每一个网页里面都会看有
下面的内容是head标签中可以包含的(只是部分内容)
<html>
<!--这是注释-->
<head>
<title>百度一下,你就知道</title>
<meta charset="utf-8"/><!--设置页面编码方式 html5版-->
<!--<meta http-equiv="content-type"content="text/html; charset=UTF-8"html4版-->
<!--
作者：@qq.com
时间：2021-09-15
描述：随便写的
-->
<!--设置页面自动刷新并可以指定跳转到的网页-->
<!--<meta http-equiv="refresh" content="3;"-->
<!--<meta http-equiv="refresh"content="1;https://cn.bing.com/?scope=web&FORM=ANNTH1"-->
<!--页面作者-->
<meta name="author"content="Gavin;123456@qq.com"
<!--设置页面搜索关键字和信息-->
<meta name="keywords"content="JAVA" />
<meta name="description"content="被缚的普罗米修斯" />
<!--link 标签表示引入外部资源-->
<!--<link rel="shortcut icon" href="https://baidu.com/favicon.ico" type="image/x-icon" />-->
<!--引入外部网页标题图标-->
<link rel="shortcut icon" href="https://cn.bing.com/sa/simg/favicon-2x.ico" type="image/x-icon" />
</head>
<body>
这是身子部分内容
</body>
</html>
再来一个----
<!DOCTYPE HTML>
<html>
<head>
<title>
百度一下,你就不知道
</title>
<meta name="refresh" content=""/>
<meta charset="UTF-8"/>
<link rel="shortcut icon" href="https://cn.bing.com/sa/simg/favicon-2x.ico" type="image/x-icon" />
<meta name="gavin" content="#0062CC" />
</head>
<body>
<title>
这是body标题
</title>
<!--引入多媒体文件--><!--图片大小设置一个即可按比例缩放-->
<img src="img/赤壁赋.jpg" width="300px" title="赤壁赋"/>
<img src="img/1234.jpg" width="300px" title="风景如画"/>
<img src="img/赤壁赋.jpg" width="300px" title="赤壁赋"/>
<img src="img/1234.jpg" width="300px" title="风景如画"/>
<img src="img/赤壁赋.jpg" width="300px" title="赤壁赋"/>
<h1><font color="#007AFF" size="7" face=楷体>赤壁赋©</font></h1>
<h2>苏轼</h2>
<p>   <font color=#2AC845 size=3,face=仿宋>七月既望，苏子与客泛舟，游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。<b><i><u>(冯 通：凭)</u></i></b></font></p>
<p>  <font color=darkorange size="4" face=微软雅黑>于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉；余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。</font></p>
<p>  <font color=deeppink size=3 face=新宋体 >正襟危坐，而问客曰：“何为其然也？”客曰：“‘月明星稀，乌鹊南飞。’此非曹孟德之诗乎？西望夏口，东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，而今安在哉？况吾与子渔樵于江渚之上，侣鱼虾而友麋鹿，驾一叶之扁舟，举匏樽以相属。寄蜉蝣于天地，渺沧海之一粟。哀吾生之须臾，羡长江之无穷。挟飞仙以遨游，抱明月而长终。知不可乎骤得，托遗响于悲风。”</p> </font>
<p>  <font color=lightsalmon size=4 face=微软雅黑>客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也，而又何羡乎！且夫天地之间，物各有主，苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭。是造物者之无尽藏也，而吾与子之所共适。”<u><i><b>(共适 一作：共食)</b></i></u></font>
</p>
<p>  <font color=#2AC845 size=3,face=仿宋>客喜而笑，洗盏更酌。肴核既尽，杯盘狼籍。相与枕藉乎舟中，不知东方之既白。</font></p>
</body>
</html>
引入多媒体文件----
<!--引入多媒体文件--><!--图片大小设置一个即可按比例缩放-->
<img src="img/赤壁赋.jpg" width="750px" title="赤壁赋" alt="图片加载失败"/>
<br />
<!--引入音频-->
<embed src="music/再见亦是泪.mp3"></embed>
<!--引入视频-->
<embed src="video/下雨了.mp4"></embed>
超文本标签
<a href="hello.html" target="_blank">这是一个超链接1</a>
<a href="">这是一个超链接2</a><!--跳转到当前页-->
<!--在父类页面打开-->
<a href="https://www.baidu.com" target="_parent">这是一个超链接3在父类页面打开</a><!--跳转到外部连接-->
<!--在自身页面打开-->
<a href="https://www.baidu.com" target="_self">这是一个超链接4</a><!--跳转到外部连接-->
<!--在空白页打开-->
<a href="https://www.baidu.com" target="_blank">这是一个超链接5</a><!--跳转到外部连接-->
<a href="http://www.baidu.com"><img src="img/1234.jpg"width=300px /> </a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>失落,并不一定难过--精品散文赏析 </title>
<meta name="Gavin" content="加油!!!"/>
<link rel="shortcut icon" href="https://cn.bing.com/sa/simg/favicon-2x.ico" type="image/x-icon" />
</head>
<body>
<!-- <embed src="music/从你的全世界路过.mp3"></embed>-->
<a href="#1F">赤壁赋</a>
<a href="#2F">归去来兮辞</a>
<a href="#3F">失落,并不一定难过</a>
<a name="1F"></a>
<h1 align="center"><font color="#F0AD4E" face="微软雅黑" size="7">赤壁赋 </font> </h1>
<h4 align="center"><a href="https://so.gushiwen.cn/authorv_3b99a16ff2dd.aspx" target="_self">苏轼</a> <a href="https://so.gushiwen.cn/shiwens/default.aspx?cstr=%e5%ae%8b%e4%bb%a3">〔宋代〕</a></h4>
<p align="left">   壬戌之秋，七月既望，苏子与客泛舟，游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，
凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。
<p align="left">   于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉；余音袅袅，不绝如缕。舞幽壑
之潜蛟，泣孤舟之嫠妇。</p>
<p align="left">   苏子愀然，正襟危坐，而问客曰：“何为其然也？”客曰：“‘月明星稀，乌鹊南飞。’此非曹孟德之诗乎？西望夏口，东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，
顺流而东也，舳舻千里，旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，而今安在哉？况吾与子渔樵于江渚之上，侣鱼虾而友麋鹿，驾一叶之扁舟，举匏樽以相属。寄蜉蝣于天地，渺沧海之一粟。哀吾生之须臾，羡长江之无穷。
挟飞仙以遨游，抱明月而长终。知不可乎骤得，托遗响于悲风。” </p>
<p align="left">   苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也，而又何羡乎！且夫天地之间，
物各有主，苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭。是造物者之无尽藏也，而吾与子之所共适。”
<p align="left">   客喜而笑，洗盏更酌。肴核既尽，杯盘狼籍。相与枕藉乎舟中，不知东方之既白。</p>
<hr width=100% align="center"/>
<a name="2F"></a>
<h1 name="2F" align="center"><font color=lawngreen face="微软雅黑"size="7">归去来兮辞</font></h1>
<h4 align="center"><a href="https://so.gushiwen.cn/authorv_07d17f8539d7.aspx" target="_self">陶渊明</a> <a href="https://so.gushiwen.cn/shiwens/default.aspx?cstr=%e9%ad%8f%e6%99%8b">〔魏晋〕</a></h4>
<p align="left">   余家贫，耕植不足以自给。幼稚盈室，瓶无储粟，生生所资，未见其术。亲故多劝余为长吏，脱然有怀，求之靡途。会有四方之事，诸侯以惠爱为德，家叔以余贫苦，遂见用于小邑。于时风波未静，心惮远役，彭泽去家百里，公田之利，足以为酒。故便求之。及少日，眷然有归欤之情。何则？质性自然，非矫厉所得。饥冻虽切，违己交病。尝从人事，皆口腹自役。于是怅然慷慨，深愧平生之志。犹望一稔，当敛裳宵逝。寻程氏妹丧于武昌，情在骏奔，自免去职。仲秋至冬，在官八十余日。因事顺心，命篇曰《归去来兮》。乙巳岁十一月也。
<p align="left">   归去来兮，田园将芜胡不归？既自以心为形役，奚惆怅而独悲？悟已往之不谏，知来者之可追。实迷途其未远，觉今是而昨非。舟遥遥以轻飏，风飘飘而吹衣。问征夫以前路，恨晨光之熹微。</p>
<p align="left">   乃瞻衡宇，载欣载奔。僮仆欢迎，稚子候门。三径就荒，松菊犹存。携幼入室，有酒盈樽。引壶觞以自酌，眄庭柯以怡颜。倚南窗以寄傲，审容膝之易安。园日涉以成趣，门虽设而常关。策扶老以流憩，时矫首而遐观。云无心以出岫，鸟倦飞而知还。景翳翳以将入，抚孤松而盘桓。
<p align="left">   归去来兮，请息交以绝游。世与我而相违，复驾言兮焉求？悦亲戚之情话，乐琴书以消忧。农人告余以春及，将有事于西畴。或命巾车，或棹孤舟。既窈窕以寻壑，亦崎岖而经丘。木欣欣以向荣，泉涓涓而始流。善万物之得时，感吾生之行休。
<p align="left">   已矣乎！寓形宇内复几时？曷不委心任去留？胡为乎遑遑欲何之？富贵非吾愿，帝乡不可期。怀良辰以孤往，或植杖而耘耔。登东皋以舒啸，临清流而赋诗。聊乘化以归尽，乐夫天命复奚疑！</p>
<hr width=100% align="center"/>
<a name="3F"></a>
<h1 name="3F" align="center"><font size="7" face="微软雅黑"color=darkorange >失落，并不一定难过</font></h1>
<!--<embed src="music/再见亦是泪.mp3"></embed>-->
<h4 align="center">作者: 于公谨啊<b><a href="http://www.meiwen.net.cn/article/170434.html" target="_blank">来源: 美文摘抄网</a></b>发表于2018-07-04被阅读4077次</h4>
<p align="left">  走过了许许多多的路，总是难掩心头的孤独；曾经面临着十字路口的犹豫，曾经面临着选择的踌躇；曾经看到美丽的风景，因为我并没有保持着清醒，所以就这样恍然入梦，就这样开始了朦胧；
然后就狠狠地摔倒在地上，留下想那些难以言喻的忧伤，还有那些难以言喻的衷肠。那些岁月的河流，从来就不可能会因为我的忧愁，就不再流淌，或者是不再心头留下惆怅。这让我发出着感慨，让我展现胸怀，让我留下着孤独和徘徊。</p>
<p align="left">  那些岁月，挂满了我的心血，本来就不想有任何的松懈，但是，却还是留下了日子里面的圆缺，还有那些日子里面的凛冽。经历了多少的风风雨雨，却还是有着自己的歌曲；那些脚下的旋律，总是
在不经意间就如细雨，留下着丝丝缕缕，缠绕在心头，让心留下了许许多多的疑惑。孤独的身影，就这样表现的不平静；那些凸显著岁月的安宁，却留下了心中的风情。而那些曾经的失落，总是和时光交错而过，却留下并不一定是难过。</p>
<p align="left">  岁月里面的迷离，总是会留下着许许多多的涟漪。而那些本来早已经蛰伏的记忆，却因为不经意的失意，就会重新开始涌动着涟漪。记忆里面的痕迹，弯弯曲曲并没有多少偏离，却让心不断地流动
着曾经的神秘。那些日子里面的痛，因为自己的情，而感觉到了撕心裂肺的疼。用时间的手，轻轻抚摸着心底的那一份忧愁；任何所有的伤口，就开始结痂，虽然还是有着挣扎，却有时候会觉得这是记忆里面花，也是岁月留下的面纱。
那些裸露在外面的失落，悠动着时间的轮廓；而抬头却看得了那些希望在前方闪烁，心中就会没有了任何的难过。</P>
<p align="left">  记忆的山峰，是人生的旅程，在不断起起伏伏中，向前延伸着，也像是心情在忐忑。那些曲曲折折，留下时光里面的选择。岁月的草，在时光的风里闪动着骄傲；那些记忆的树，在路边展现着孤独。
原来看上去是高不可攀的山峦，心中有着幽怨，有着畏惧，有着自己的思绪；现在回头看看的时候，脚下的路，就是曾经征服的山，在不断蜿蜒。只是下山的时候，想要做出的停留，却会不断跌倒，让
自己没有了骄傲，却听到了时光里面的嘲笑。那些经历的失落，就像是树木在不断落错，并没有一定的规律，却有着自己的秩序。</p>
<p align="left">  那些希望一直都像是山涧里面的河流，依附着天空的白云悠悠，在不断淅淅沥沥地动着，欢乐着，发出着动人的声音，显得清纯。阳光并没有多少温润，却可以让心中有着迷人的韵，在不断跳动，
不断涌动。那些过去的时光，留下了多少迷茫？那些懵懵懂懂的岁月，有着多少圆缺？而记忆的深浅，在不断向前绵延，不断留恋，不断地依恋。想要抽刀断水，想要迷醉，或者是想要沉睡，只是那些失落，却在不断闪烁，也不断开始交错。</p>
<p align="left">  并不需要多少眷顾，那些路，总是会不断邂逅，不断留在了心头。邂逅的是我，是寂寞，是沉默？是岁月邂逅了我？还是我邂逅了岁月？是失落邂逅了我，还是我邂逅了失落？而那些失落，却让
我并不难过，因为那些失落，让我变得执着，也变得成熟，也坚定了我的征途。 <hr width=100% align="center"/> </p>
<!--<u1 type="square">--><!--u1 列表是无序的-->
<u1 style="list-style:url(img/favicon.ico);">
<li>A</li>
<li>B</li>
<li>C</li>
</u1>
<!-- 有序列表--O1--type 设置有序的类型,start表示从哪里开始>
<ol type="I" start="1">
<li>JAVASE</li>
<li>ORACLE</li>
<li>MYSQL</li>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
表格标签
<!--表格边框线间距cellsapce,border表格边的粗细-->
<table border="1px" background="img/1234.jpg" cellspacing="0px">
<!--表格-->
<tr bgcolor="#EC971F">
<!--行-->
<th>id</th>
<!--列-->
<!--th特殊单元格-->
<th>name</th>
<th>gender</th>
<th>age</th>
</tr>
<tr bgcolor="#F0AD4E">
<td> 1000</td>
<td align="center">张三</td>
<td>男</td>
<td rowspan="3">19</td>
<!--列合并-->
</tr>
<tr bgcolor="#F0AD4E">
<td> 1000</td>
<td align="center">张三</td>
<td>男</td>
</tr>
<tr bgcolor="#F0AD4E">
<td align="center" colspan="2">张三</td>
<!--colspan行合并-->
<td>男</td>
</tr>
</table>
内嵌框架---->>>
<html>
<head>
<title>这是展示页面</title>
<meta charset="UTF-8"/>
</head>
<body>
<ul>
<li>
<a href='img/1234.jpg' target="图片展示"> 1234</a>
</li>
<li>
<a href='img/favicon.ico' target="图片展示"> favicon</a>
</li>
<li>
<a href='img/赤壁赋.jpg' target="图片展示"> 赤壁</a>
</li>
<li>
<a href='img/爱你中国.png' target="图片展示"> 爱你</a>
</li>
</ul>
<iframe with="800px" height="600PX" src="myhtml.html#1F"></iframe>
</body>
</html>
一些文本框---->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="qqqq" method="get">
<input type="text" name="user" placeholder="请输入账号"/><!--提交按钮--><br />
<input type="submit" value="提交"/><br />
<input type="search" name="search" value="你好" readonly="readonly"/>
<input type="submit" value="sousuo"/><br />
<input type="search" name="search" value="你好" disabled="disabled"/>
<input type="submit" value="sousuo"/><br />
</form>
<!--
作者：@qq.com
时间：2021-09-18
描述：通过name来进行控制到一个分组里,不同的值提交后用value来区分
checked="checked"---默认选中
-->
<form>
<input type="password" name="pwd" /><br />
<!--name名一样就是单选-->
<input type="radio" name="man" value=1 checked="checked"/>男 <input type="radio"name="man" value=0/>女
<input type="submit" value="tijiao"/><br />
<!--<input type="radio" name ="man"/>男 <input type="radio" name ="woman"/>女
<input type="submit" value="tijiao"/><br />-->
</form>
<form>
你学习的语言
<input type="checkbox" name="like" id="1" value="java" checked="checked"/>java
<input type="checkbox" name="like" id="2" value="C++" />C++
<input type="checkbox" name="like" id="3" value="C++" checked="checked"/>Python
<input type="checkbox" name="like" id="4" value="C+" />C+
<input type="submit" />
</form>
<form>
<!--
作者：.com
时间：2021-09-18
描述：input
-->
<input type="email" name="邮箱" id="email" placeholder="请输入邮箱地址" autofocus="autofocus" required="required"/>邮箱
<input type="url" name="网址" id="url" placeholder="请输入网址" required="required"/>网址
<input type="color" name="颜色" id="color" value="颜色" />颜色
<input type="number" name="数字" id="number" value="0" step="5" max="100" min="90" required="required"/>数字
1<input type="range" name="范围" id="range" value="0" min="0" max="10" step="2" required="required"/>10
请选择日期:<input type="date" name="日期" id="date" value="日期" required="required"/>
请选择时间:<input type="datetime-local" name="时间" id="时间" value="日期" required="required"/>
请选择月份:<input type="month" name="月份" id="月份" value="月份" required="required"/>
<!--
作者：@qq.com
时间：2021-09-18
描述：mutiple--多选 placehoder 默认提示 autofocus :自动获取焦点
-->
请选择城市:
<select name="city" multiple="multiple" required="required">
<option value="0"> ---请选择---</option>
<option value="1" selected="selected">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">烟台</option>
<option value="5">青岛</option>
</select>
<input type="submit" name="email" id="email" value="登录" />
</form>
</body>
</html>
css样式表------>
<html>
<head>
<title>百度一下,你就知道</title>
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
<meta charset="UTF-8"/>
<!--内敛样式-->
<h1 style="color: orangered;">这是一个标题</h1>
<!--
作者：1187342818@qq.com
时间：2021-09-18
描述：内部样式---head标签中加入一个style标签,再里面定位到需要修饰的元素,然后在{}里加入要修饰的元素
-->
<style type="text/css">
</head>
<body>
<h2 >这是一个标题</h2>
</body>
</html>
<html>
<head>
<title>百度一下,你就知道</title>
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
<meta charset="UTF-8"/>
<!--引入css样式表-->
<link type="text/css" rel="stylesheet" href="css/new_file.css" />
<!--内敛样式-->
<h1 >这是一个标题</h1>
<!--
作者：1187342818@qq.com
时间：2021-09-18
描述：内部样式---head标签中加入一个style标签,再里面定位到需要修饰的元素,然后在{}里加入要修饰的元素
-->
</head>
<body>
<h2 >这是一个标题</h2>
</body>
</html>
h1 {
color: red;
font: "bookman old style";
}
h2 {
color: green;
font: "楷体";
}
小练习—
元素选择器---->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
/* 基本选择器:元素选择器*/
h1{
color: mediumvioletred;
}
h2{
color:pink;
font-family: "agency fb";
}
i{
color: cornflowerblue;
}
/*
* 基本选择器中的
* 类选择器----
* 不同类型的标签使用相同的类型
*/
.myclass{
color:darkslateblue;
font: "微软雅黑";
}
/*
* id选择器---主要适用于获取唯一一个元素
*
*/
#myid{
color: plum;
font: "bodoni mt condensed";
}
优先级>id>class>元素选择器
</style>
</head>
<body>
<h1>这是一个标题</h1>
<h2>这是<i>一个倾斜</i>标题2</h2>
<h2 id="myid">这是测试标签体</h2>
<h2 class="myclass">测试用标签</h3>
<h4 class= "myclass">测试用标题</h4>
</body>
</html>
关系选择器—>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div与span</title>
<style type="text/css">
/*<!--关系选择器:后代选择器-->*/
div h1{
Color:red;
border: 1PX black solid;
}
/*<!--关系选择器:子代选择器-->*/
div>h1{
Color:red;
border: 1PX black solid;
}
span h1{
Color:green;
border: 1PX red solid;
}
</style>
</head>
<body>
<div>
<h1>GavinGavin</h1>
<h1>GavinGavin</h1>
<h1>GavinGavin</h1>
<h1>GavinGavin</h1>
<span id="1">
<h1>GavinGavin</h1>
<h1>GavinGavin</h1>
<h1>GavinGavin</h1>
<h1>GavinGavin</h1>
</span>
<h1>GavinGavin</h1>
<h1>GavinGavin</h1>
<h1>GavinGavin</h1>
<h1>GavinGavin</h1>
</div>
</body>
</html>
类似资料：