Loading... 来自：柠檬有时不酸 ## HTML5中常用的自结束标签： 1. `<br>`：表示换行。 2. `<hr>`：表示水平线。 3. `<img>`：用于插入图像。 4. `<input>`：用于创建输入字段，如文本框、复选框等。 5. `<meta>`：用于设置网页的元数据，如编码方式、关键词等。 6. `<link>`：用于引入外部样式表和其他文档。 **需要注意的是，尽管这些标签可以在不写闭合标签的情况下使用，但为了和其他浏览器兼容，建议在闭合标签中加上斜杠（**`<br />`、`<hr />`、`<img />`、`<input />`、`<meta />`、`<link />`）。 ``` <!--标签一般成对出现--> <!--根标签下有两个子标签，分别为<head>,<body>,其子标签皆为根标签的后代--> <!-- <head>标签內的内容打开网页时，显示的标签名--> <html><!--该标签为根标签（成对），网页中有且只有一个，其他网页的内容都要写在根标签里面--> <head><!--为根标签的子标签--> <title>这是我的第二个网页</title> </head> <body><!--该标签存的是网页可见的内容--> <h1>这是我的第二个网页</h1> <h2>zheshi</h2><!--标题1-6号分大小--> <!--自结束标签不用成对出现--> <meta> <img> <input> <p>段落的内容</p> <!--与标题标签对比，若无标题和段落之分，在网页上显示的内容为一横排--> </body> </html> ``` ## 标签的属性 ``` <body> <!-- 属性，在标签中（开始标签或结束标签）还可以设置属性 属性是一个名值对（x=y) 属性用来设置标签中的内容如何显示 属性不能瞎写，应该根据文档中的规定来写， 有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来 设置属性的标签中可以同时设置多个属性，且属性和其他属性间也要用空格隔开 --> <h1>这是我的<font color="blue" size="3">第三个</font>标签</h1> <!--属性名和标签名之间要用空格隔开，且只能写在开始标签中--> </body> ``` ## 网页的基本结构 **文档声明，字符集，进制** ``` <!doctype html><!--声明放在根标签前,网页最开头,不算网页内容--> <html><!--html的根标签（元素），网页中的所有内容都要写在根元素的里面--> <head><!--head标签帮助浏览器或搜索引擎来解析网页--> <meta charset="utf-8"><!--可以通过meta标签来设置网页的字符集，避免乱码问题--> <!--meta标签主要用于设置网页中的一些元数据， 元数据不是给用户看的 charset 指定网页的字符集 name指定的数据的名称 content 指定的数据的内容 keywords 表示网站的关键字，可以同时指定多个关键字， 关键字间使用，号隔开 description 用于指定网站的描述 <meta name="description" content="京东jd,com-专业的综合网上购物商城"> --> <title>网页的基本结构</title><!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容--> </head> <body><!--网页中所有可见的内容都应该写在body里，表示网页的主题，该标签是html的子元素--> <!-- 迭代 网页的版本（HTML4 XHTML2.0 HTML5...) 写的网页是HTML5版本的语法（但是浏览器不知道你写的哪个版本） 文档声明（doctype) -文档声明用来告诉浏览器当前网页的版本 -html5的文档声明 <!doctype html> <!Doctype HTML> 进制： 十进制 --满10进1--单位数字10个（0-9） 二进制(计算机底层的进制) --满2进1--单位数字2个（0-1） --所有的数据在计算机底层都会以二进制的形式保存 --可以将内存想象成一个有多个小格子组成的容器， 每个小格子中可以存储一个1或一个0 一个小格子表示一位（bit)(八位等于一个字节) 计算机最小操作单位--字节 八进制（很少用） --满8进1--单位数字8个（0-7） 十六进制（一般显示一个二进制数字时，都会转换成十六进制） --满16进1--单位数字16个（0-9-a-f) 字符编码 eg.明天->110000110110(编码) 110000110110->明天(解码) --所有数据在计算机中存储时都是以二进制的形式存储的，文字也不列外。 所以一段文字在存储到内存中时，都需要转换成二进制编码 当我们读取这段文字时，计算机会将编码转换为字符，供我们读取 --编码 --将字符转换为二进制码的过程称为编码 --解码 --将二进制码转换为字符的过程称为解码 --字符集(charset) -编码和解码采用的规则称为字符集 --乱码问题： --如果编码和解码所采用的字符集不同就会出现乱码问题 --常见的字符集： ASCII ISO88591 GB2312//国内可用 GBK//上一个的拓展 UTF-8 万国码，世界各地都可以用，在我们开发时使用的字符集都为UTF-8 --> </body> </html> ``` ## 块/行内元素及布局标签简介 **1.块元素（block element)：在网页中一般通过块元素对页面进行布局。** ** 行内元素（inline element)：行内元素用来包裹文字。** **注意:** ** 一般情况下会在块元素中放行内元素，而不会在行元素中放块元素——块元素中基本什么都能放，p元素中不能放任何的块元素** ** 浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。** ** 比如：** ** 标签写在了根元素外部** ** p元素中嵌套了块元素** ** 根元素中出现了出head和body以外的子元素** ** ....** **2.布局标签（结构化语义标签）** ** header 表示网页的头部** ** main表示网页的主题部分（一个页面中只会有一个main)** ** footer 表示网页的底部** ** nav 表示网页中的导航** ** aside表示和主题相关的其他内容（侧边栏）** ** article 表示文章** ** section 表示一个独立的区块，上边的标签都不能表示时使用section** ** ****div**没有语义，就用来表示一个区块，目前来讲div是我们主要的布局元素 ** span行内元素，没有任何的语义，一般用于在网页中选中文字** ## 部分标签介绍 ### 标题标签 ``` <!-- 标题标签： h1-h6一共有六级标题 从h1-h6重要性递减，h1最重要，h6最不重要 h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1 一般情况下标题标签只会使用到h1-h3,h4-h6很少用 标题标签都是块元素 在页面中独占一行的元素称为块元素（block element） --> ``` ### P标签 ``` <p>在p标签中的内容就表示一个段落</p> <!--p标签也是一个块元素--> ``` ### hgroup标签 ``` <!-- hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup --> <hgroup> <h1><font color="blue" size="40">回乡偶书</font></h1> <h2>其一</h2> </hgroup> ``` ### em、strong、blockquote、q ``` <!-- em标签用于表示语音语调的一个加重 在页面中不会独占一行的元素称为行内元素（inline element) --> <p>今天天气<em>真</em>不错！</p> <p>你今天<strong>必须</strong>要完成作业</p> sb say: <blockquote><!--长引用--> 我重来没有说过这句话！ </blockquote> I can say <q>there is nothing</q> <!--短引用--> ``` ### img标签 ``` <body> <!-- 图片标签用于当前页面中引入一个外部图片 使用img标签来引入外部图片，img标签是一个自结束标签 img这种元素属于替换元素（介于块和行内元素之间，具有两种元素的特点） 属性： src属性指定的是外部图片的路径（路径规则和超链接是一样的） alt图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所识别 width图片的宽度（单位是像素） height图片的高度 宽度和高度中如果只修改了一个，则另一个会等比缩放 注意： 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大 但是在移动端，经常需要对图片进行缩放（大图缩小） 图片格式： jpeg(jpg) --支持的颜色比较丰富，不支持透明效果，不支持动图 --一般用来显示照片 gif --支持的颜色较少，支持简单透明，支持动图 --颜色单一的图片，动图（标识） png --支持的颜色丰富，支持复杂透明，不支持动图 --颜色丰富，复杂透明图片（专为网页而生） webp --这种格式是谷歌推出的专门用来表示网页中的图片的格式 --它具备其他图片格式的所有优点，而且文件还特别小 --兼容性不好，其他浏览器可能不能正常显示图片 base64 -将图片使用base64编码，这样可以将图片转化为字符， 通过字符的形式来引入图片 -一般都是一些需要和网页一起加载的图片才会使用base64 直接在浏览器上搜索base64进行图片与代码的转换，可加快访问速度 效果一样的用小的 效果不一样，用效果好的 --> <img src="../picture/相片/p12.jpg" alt="莲" style=""> <!-- <img src="加图片网址">引入外部图片 --> </body> ``` ### 列表 ``` <body> <!-- 列表（list) 1.铅笔 2.尺子 3.橡皮 在html中也可以创建列表，html列表有三种类型 1.有序列表 2.无序列表 3.定义列表 有序列表：使用ol标签来创建有序列表 使用li表示列表项 无序列表：使用ul标签来创建无序列表 使用li表示列表项 定义列表：使用dl标签来创建一个定义列表 使用dt来表示定义的内容 使用dd来对内容进行解释说明 可以列表嵌套列表 --> <ol> <li>结构</li> <li>表现</li> <li>行为</li> </ol> <ul> <li>结构</li> <li>表现</li> <li>行为</li> </ul> <dl> <dt>机构</dt> <dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd> </dl> <ul> <li>aa <ul> <li>aa <ol> <li>aa</li> <li>bb</li> <li>cc</li> </ol> </li> <li>bb</li> <li>cc</li> </ul> </li> <li>bb</li> <li>cc</li> </ul> </body> ``` ### 超链接a ** 1.超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置，使用a标签来定义超链接。** **属性：****href**指定跳转的目标路径，值可以是一个外部网站的地址，也可以是一个内部页面的地址。 **2.相对路径： 当我们需要跳转到一个服务器内部的页面时，一般我们会使用相对路径，** ** 相对路径都会使用****.**或**..**开头 ** ./ ../** **./可以省略不写，如果不写./也不写../则就相当于写了./** ** ./表示当前文件所在的目录** **3.超链接的其它用法** ** target属性，用来指定超链接打开的位置** ** 可选值：** ** \_self 默认值 在当前页面中打开超链接** ** \_blank 在一个新的页面中打开超链接<!--可能会打开很多页面标签** **4.** ``` <a href="#">这是一个新的超链接</a> ``` ``` <a href="javascript:;">新的超链接</a> ``` ``` <body> <span class="external-link"><a class="no-external-link" href="https://www.baidu.com" target="_blank"><i data-feather="external-link"></i>baidu</a></span><!--外部--> <br><br><!--换行--> <a href="demo5.html">liebiaowenjian</a><!--内部，，跳转的地址与该代码文件在同一个目录下--> <br> <a href="./demo5.html">超链接</a> <br><br> <a href="./demo5.html" target="_blank">超链接</a> <br><br> <a href="#bottom">去底部</a> <a href="#p3">去第三段</a> <br><br> <p>在这个世界上，一星陨落，黯淡不了星空灿烂，一花凋零，荒芜不了整个春天。</p> <p>盈盈月光，我掬一杯最清的；落落余辉，我拥一缕最暖的；灼灼红叶，我拾一片最热的；萋萋芳草，我摘一束最灿的；漫漫人生，我要采撷世间最重的——毅力。</p> <p id="p3">花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风景要远观，才能美好；有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。</p> <p>静静的心里，都有一道最美丽的风景。尽管世事繁杂，此心依然，情怀依然；尽管颠簸流离，脚步依然，追求依然；尽管岁月沧桑，世界依然，生命依然。守住最美风景，成为一种风度，宁静而致远；守住最美风景，成为一种境界，悠然而豁达；守住最美风景，成为一种睿智，淡定而从容。带着前世的印记，心怀纯净，身披霞带，踏一水清盈，今生，寻美好而来。</p> <p>即使青春是一株大地伟岸的树，但我明白，一株独秀永远不是挺拔，成行成排的林木，才是遮风挡沙的绿色长城。即使青春是一叶大海孤高的帆，但我明白，一叶孤帆很难远航，千帆竞发才是大海的壮观。</p> <p>爱心是一片照射在冬日的阳光，使贫病交迫的人感到人间的温暖；爱心是一泓出现在沙漠里的泉水，使濒临绝境的人重新看到生活的希望；爱心是一首飘荡在夜空的歌谣，使孤苦无依的人获得心灵的慰藉。</p> <p>爱，有的时候不需要山盟海誓的承诺，但她一定需要细致入微的关怀与问候；爱，有的时候不需要梁祝化蝶的悲壮，但她一定需要心有灵犀的默契与投合；爱，有的时候不需要雄飞雌从的追随，但她一定需要相濡以沫的支持与理解。</p> <p>快乐=物质/欲望。这是美国经济学家萨缪尔森提出的快乐方程式。从经济学的观点看，物质消费越大，欲望越小，快乐就越大，正应了中国人的一句古话“知足常乐”。反之，如果一个人的物质消费有限，而欲望无穷大，将会怎样呢？路瓦栽夫人有那么多“梦想”，又有那么多“陶醉”，她怎么能不痛苦、伤心呢？</p> <p>生命不是一篇"文摘"，不接受平淡，只收藏精彩。她是一个完整的过程，是一个"连载"，无论成功还是失败，她都不会在你背后留有空白；生命也不是一次彩排，走得不好还可以从头再来，她绝不给你第二次机会，走过去就无法回头。</p> <p>春蚕死去了，但留下了华贵丝绸；蝴蝶死去了，但留下了漂亮的衣裳；画眉飞去了，但留下了美妙的歌声；花朵凋谢了，但留下了缕缕幽香；蜡烛燃尽了，但留下一片光明；雷雨过去了，但留下了七彩霓虹。</p> <p>我们常常为一些事情感到纠结和烦恼，有的烦恼可以化解，有的烦恼是无法从根本上消除，唯一能够转变的就是我们自己的心态，另外就是让时光来冲淡这一切。人生的历程就是一个从不知到知，从否定到肯定，如此不断反复循环。无论怎样，都要给自己微笑，给自己信心。你微笑，世界也会给你笑脸。</p> <p>站在历史的海岸漫溯那一道道历史沟渠：楚大夫沉吟泽畔，九死不悔；魏武帝扬鞭东指，壮心不已；陶渊明悠然南山，饮酒采菊……他们选择了永恒，纵然谄媚诬蔑视听，也不随其流扬其波，这是执著的选择；纵然马革裹尸，魂归狼烟，只是豪壮的选择；纵然一身清苦，终日难饱，也愿怡然自乐，躬耕陇亩，这是高雅的选择。在一番选择中，帝王将相成其盖世伟业，贤士迁客成其千古文章。</p> <p>心的本色该是如此。成，如朗月照花，深潭微澜，不论顺逆，不论成败的超然，是扬鞭策马，登高临远的驿站；败，仍滴水穿石，汇流入海，有穷且益坚，不坠青云的傲岸，有“将相本无主，男儿当自强”的倔强。荣，江山依旧，风采犹然，恰沧海巫山，熟视岁月如流，浮华万千，不屑过眼烟云；辱，胯下韩信，雪底苍松，宛若羽化之仙，知退一步，海阔天空，不肯因噎废食。</p> <p>守候着自己的世界，或忙或累，或喜或悲，都是一种充实。闲时，静坐一隅，执盏遐思，过去的、现在的、未来的，喜的、悲的...什么都可以去想。或许，美好的东西，本就不该遗忘，怀念也好，思念也罢，用心感受，何尝不是一种幸福？每个人，肩上的背囊，都装满了自己的故事，或伤或痛，不懂卸载，当压的自己，连呼吸都是一种痛的时候，才学会拐弯。有些人，一转身，便走成了背影，有些事，一轮回，便旧成了曾经；学会宽恕自己，原谅错误，想要的，努力去争取；想忘的，时间会帮你。</p> <p>如果说友谊是一颗常青树，那么，浇灌它的必定是出自心田的清泉；如果说友谊是一朵开不败的鲜花，那么，照耀它的必定是从心中升起的太阳。</p> <p>当流年的风，或喜或悲，从指尖滑过，转角街头的灯火阑珊，已在光阴的扉页上泛黄，生命的旅程中，没有什么不会在岁月中老去。携一缕暖意，让心没有疏离与荒凉，把那些千回百转的念，凝结成心香，尘封收藏。最好的放下，不是刻意的去忘记，而是让彼此安然。温一盏岁月的暗香，在平静中回味，那些浅浅淡淡的过往，便是岁月留给我们的风景。行一程山水，书一抹眷恋，任走过心间的那缕清韵，在记忆中飞扬。铺一张素笺，将斑驳零散的欢愉，细细描绘，于心之一隅，妥帖安放。寻一处清幽，让那千回百转的念，开成一朵心花，在风中流转。</p> <p>请相信，走过流年的山高水长，总有一处风景，会因为我们而美丽；总有一个笑脸，是为我们而绽放；总有一份遇见，唯美了整个曾经；总会有一个人知你冷暖，懂你悲欢；所有相遇的千回百转，为的是来到世上，遇到那个懂你的人；所有的过往，都值得我们珍惜；所有的经历，都是一种懂得，懂得，是生命中最美的缘。</p> <p>斑驳的旧时光里，总有一些或深或浅温暖人心的馨香，让人舍不得遗忘。潮湿的过往，不经意间邂逅了谁的眼眸；文字里泛舟，又与谁的倩影不期而遇？淡淡的墨香中，谁在翩然靠近，袅袅娜娜，直抵心间？一切，都那么美，那么惆怅，这不仅仅是文字的描摹，其外还有收藏着的心思与情感。的确，光阴里曾经明媚或暗淡的过往，总是伴着美丽的忧伤与成长的阵痛；日渐淡薄的往昔，也总能或多或少的在心里留下一丝清雅的执念。收藏，是因为骨子里是个守旧的人；收藏，更是因为心里有值得铭记的感动。今生，心为笔，写下满笺素心浅事，不求浮华，但求安然；今生，心作尘，用绵长的时光，写下一份浅淡，缓缓落墨，轻轻收笔。</p> <p>静，是一种美，一种情怀。水中的月光，静静，倒影了岁月的旖旎；岸边的垂柳，悄悄，婉约了柔美的心情；飘摇的水草，默默，摇曳了风的微笑。旅途中，静静面对风的忧伤，雨的惆怅；思念中，静静面对月的遥远，夜的寂寞；泪光中，静静面对心的呼唤，心的等待。静，是一首婉约的词，一副柔美的画，一卷深情的书。</p> <p>如果说生命是一座庄严的城堡，如果说生命是一株苍茂的大树，如果说生命是一只飞翔的海鸟。那么，信念就是那穹顶的梁柱，就是那深扎的树根，就是那扇动的翅膀。没有信念，生命的动力便荡然无存；没有信念，生命的美丽便杳然西去。</p> <p>微笑着，去唱生活的歌谣，不要埋怨生活给予了太多的磨难，不必抱怨生命中有太多的曲折。大海如果失去了巨浪的翻滚，就会失去雄浑；沙漠如果失去了飞沙的狂舞，就会失去壮观。人生如果仅去求得两点一线的一帆风顺，生命也就失去了存在的意义。</p> <p>成熟是一种明亮而不刺眼的光辉，一种圆润而不腻耳的音响，一种不需要对别人察颜观色的从容，一种终于停止了向周围申诉求告的大气，一种不理会哄闹的微笑，一种洗刷了偏激的淡漠，一种无须声张的厚实。</p> <!-- 可以直接将超链接的href属性设置为#，这样点击超链接以后 页面不会发生跳转，而是转到当前页面的顶部位置 id属性（唯一不重复） 每一个标签都可以添加一个一个id属性 id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性 --> <br><br> <!--在开发中可以将#作为超链接的展位符使用--> <a href="#">这是一个新的超链接</a> <!--可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生--> <br><br> <a href="javascript:;">新的超链接</a> <br><br> <a id="bottom" href="#">回到顶部</a> <br>-------------------------------------------------------------------------------------------------------<br> <img src="../picture/相片/p17.jpg" alt="天空蔚蓝色" style=""> </body> ``` ### 内联框架 ``` <body> <!-- 内联框架，用于向当前页面中引入一个其他页面 src 指定要引入的网页的路径 frameborder指定内联框架的边框 --> <iframe src="https://www.qq.com" width="800" height="900" frameborder="1"></iframe> <h1>hello</h1> </body> ``` ### audio/video ``` <body> <!-- audio 标签用来向页面中引入一个外部的音频文件 音频文件引入时，默认情况下不允许用户自己控制播放停止 属性： controls 是否允许用户控制播放 autoplay 音频文件是否自动播放 -如果设置了autoplay,则音乐在打开页面时会自动播放 但是目前来讲大部分的浏览器都不会自动对音乐进行播放 loop音乐是否循环播放 --> <h1>音乐会</h1> <p>二十四溪月1</p> <audio src="../3yinpin/Vk - 二十四溪月.mp3"controls autoplay>二十四溪月</audio> <p>典狱司1</p> <audio src="../3yinpin/音频怪物 - 典狱司.mp3" controls loop>典狱司</audio> <br><br> <p>典狱司2</p> <!--除了通过src来指定外部文件的路径以外，还可以通过source来指定文件--> <audio controls> 对不起，您的浏览器不支持播放音频！请升级浏览器！ <source src="../3yinpin/音频怪物 - 典狱司.mp3"> <!--音频格式mp3、ogg 当一些浏览器不支持mp3格式的音频时，添加不同格式的音频 eg.<source src="../3yinpin/音频怪物-典狱司.ogg"> 可以提高浏览器的兼容性 在<audio>标签內，浏览器先逐条执行<source>标签所在的语句直至被浏览器编译为止 若<source>语句都不能执行，则显示<audio>标签内，<source>标签外的文字 --> </audio> <br>测试IE8<br> <embed src="../3yinpin/Vk - 二十四溪月.mp3" type="audio/mp3" width="500" height="200"> <!-- <embed>标签可以放在与<source>标签的位置，mp3/ogg/embed几乎包含了所有的浏览器 故不用写文字“对不起，您的浏览器不支持播放音频！”--> <!-- 使用video标签来向网页中引入一个视频 使用方式和audio基本一样的 --> <body/> ``` 最后修改：2023 年 11 月 02 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏