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>