超文本标记语言，描述网页语言
超：超链接 从一个页面跳转到另一个页面
文本：
标记：文本变成超文本，就需要各种标记符号
语言：每一个标记的写法、读音、使用规则、构成
web标准 w3c(万维网)
基础语法
<起始标签>标签体(内容）</结束标签>............双标签
<input />...........单标签 推荐
<input>
html标签可以互相嵌套
属性：给标签添加附加信息
属性名=“属性值“
disabled="disabled"
基础代码
01-骨架
<!DOCTYPE html> *<!-- 文档声明 -->* <html lang="en"> <head> <meta charset="UTF-8"> UTF-8：万国码 <title>Document</title> </head> <body> *<!-- 注释快捷键：ctrl+/ -->* 我是一段文字 </body> </html>
02-标题标签
<!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> <!-- h1~h6 逐级减小 独占一行--> <h1>我是一个标题</h1> <h2>我是一个标题</h2> <h3>我是一个标题</h3> <h4>我是一个标题</h4> <h5>我是一个标题</h5> <h6>我是一个标题</h6> </body> </html>
03-段落标签
<!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> <!-- 段落标签 <p> --> <p>有人曾经说过，我们赚得所有钱都比不过我们所拥有的知识。在生活中，如果想成为真正厉害的人，我们必须首先学会观察那些成功者的行为和思维。必须首先了解对方的认知，思考对方的底层思维密码，这是提高我们做事能力的重要途径。 人的一生中，有很多事情是无法改变的。与其自怨自艾，不如学会放手，顺势而为。也许可以得到更好的结果。 真正的厉害从不需要证明和表现，就像一座高山，即使寂静，也会受到无数人的崇拜。因此我们没有必要到处去展示自己，我们只需要保持这三种状态： </p> <p>1、顺应时代 真正成功的人首先要明白如何顺应潮流，这是变得杰出的关键。要成为一个有实力的人，不是要证明自己有多能干，而是要理解自己的渺小和时代潮流，这远比个人的努力重要得多。 每个人都逃不过时代对我们的限制，因此生活中，只有了解了什么是时代潮流，才能顺势而为，事半功倍。 </p>
04-文本格式化标签
<!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> <p>有人曾经说过，我们赚得所有钱都比不过我们所拥有的知识。在生活中，如果想成为真正厉害的人，我们必须首先学会观察那些成功者的行为和思维。必须首先了解对方的认知，思考对方的底层思维密码，这是提高我们做事能力的重要途径。 人的一生中，有很多事情是无法改变的。与其自怨自艾，不如学会放手，顺势而为。也许可以得到更好的结果。 真正的<del>厉害从不</del>需要证明和表现，就像一座高山，即使寂静，也会受到无数人的崇拜。因此我们没有必要到处去展示自己，我们只需要保持这三种状态： </p> <p>1、顺应时代 <strong>真正成功</strong>的人首先要明白如何顺应潮流，这是变得杰出的关键。要成为一个有实力的人，不是要证明自己有多能干，而是要理解自己的渺小和时代潮流，这远比个人的努力重要得多。 每个人都逃不过时代对我们的限制，因此生活中，只有了解了什么是时代潮流，才能顺势而为，事半功倍。 </p> <p> <b> 2、顺应本心</b> <em>生活中一些人</em>喜欢随遇而安，随大流，不用过多的努力平安生活即可，有些人则认为，要变得强大，成为人上人，要与时间赛跑，要与众不同。你是属于哪一种呢？ 就像<i>早睡和熬夜</i>一样，这两种生活习惯并不是绝对的好或坏。也许对大多数人来说，早睡更好，但由于一些努力挣钱的加班族来说，显然熬夜挣钱是更好的选择。但其实最重要的是遵守你的内心选择和习惯。 x<sub>2</sub> x<sup>2</sup> </p> <!-- 原价：<ins>999</ins> 下划线 --> 原价：<s>999</s> 现价：99 </body> </html>
05-换行标签及水平线标签
<!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> <!-- <br />换行 --> <h3>欢迎加入前端</h3> <hr /> Lorem ipsum dolor sit amet consectetur adipisicing elit<br />. Quos eaque natus asperiores labore perspiciatis aperiam, minima placeat sunt distinctio ad temporibus culpa nisi ex blanditiis quia quasi! Harum, esse quis!<br /> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure veritatis accusantium fugit voluptatem suscipit sint cum obcaecati libero itaque alias harum nihil autem expedita sapiente, id dicta aspernatur laudantium? Repellat. Veritatis atque nam ut nesciunt deleniti et, voluptates deserunt ipsam quia necessitatibus alias, aliquam inventore, magnam vitae maxime maiores odit ipsa rem explicabo enim debitis similique optio? Ducimus, voluptas quasi. Quidem nemo non illum fugit vero esse perspiciatis, aspernatur corrupti excepturi aut culpa amet eum voluptatem adipisci minima omnis! Magni unde nisi fuga fugiat, dolorem vitae reiciendis ullam mollitia dicta. Officiis, dolorum non. Temporibus sunt cumque necessitatibus reprehenderit nisi? Illum ipsum dolores quisquam voluptatem nihil. Ullam provident excepturi ex voluptatum molestiae? Veniam, consectetur assumenda? Assumenda, dignissimos! Quo veniam facere tenetur! Labore a natus inventore enim totam perspiciatis, debitis corporis perferendis voluptas dolores. Itaque aut eos eius ducimus! Itaque, velit sequi, assumenda facere voluptates quasi laudantium et, dicta mollitia nisi a? Incidunt in hic saepe illo atque sint iusto, explicabo vitae deserunt vel ut nesciunt, esse libero! Similique delectus adipisci aperiam repellat quasi modi, voluptatibus quibusdam ea amet quis excepturi? Iusto. Saepe eum ipsam fugiat adipisci dicta quisquam. Voluptates consequuntur sapiente quia nulla voluptas soluta corrupti? Quod cupiditate beatae reiciendis enim ut deserunt maxime placeat minima dolores minus, expedita ipsum quia! Dolores quidem aspernatur amet dolore nobis nesciunt incidunt similique repellat sequi asperiores blanditiis officiis repellendus consequuntur a illum eum recusandae, error saepe possimus ad voluptatibus earum. Voluptate illum porro labore! Quam, assumenda ex libero optio atque hic dignissimos quis eius qui ad quae dolore ab quibusdam nihil vitae asperiores iste illum excepturi eligendi vel fugit non? Quia vero minima sit. Eligendi obcaecati modi tempore quibusdam fugiat quasi necessitatibus nemo, sequi labore accusantium hic cum commodi quos! Error facilis autem tenetur architecto, nemo eius nesciunt voluptate minima dicta iusto consequuntur mollitia? </body> </html>
06-图片
<!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> <!-- src 指向图片地址的 alt：图片地址发生错误时，用来对图片进行提示的 title：鼠标悬停时，显示的文字 align:设置图片与文字的对齐方式的--> <img src="../灰太狼.jpg" alt="我是灰太狼" title="我要去抓羊了" width="500px" border="20px" align="center"> </body> </html>
07-路径
<!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> <!-- 相对路径 ../返回上一级 ./ 当前级 / --> <img src="../灰太狼.jpg" align="center">磁带库农村的课程的教材你 <img src="./bg03.jpg"> <img src="image/wemeet image_20230720114006722.png" alt=""> <img src="https://pic.rmb.bdstatic.com/bjh/down/c46803ebd51d7a67d1e395344d1b6e60.jpeg?x-bce-process=image/watermark,bucket_baidu-rmb-video-cover-1,image_YmpoL25ld3MvNjUzZjZkMjRlMDJiNjdjZWU1NzEzODg0MDNhYTQ0YzQucG5n,type_RlpMYW5UaW5nSGVpU01HQg==,w_50,text_QOWnmuWwj-acqOWQlg==,size_50,x_38,y_38,interval_2,color_FFFFFF,effect_softoutline,shc_000000,blr_2,align_1" alt=""> </body> </html>
08-视频
<!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> <video src="images/video.mp4" controls="controls" loop="loop" autoplay muted></video> </body> </html>
09-音频标签
<!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> <audio src="images/music.mp3" controls loop></audio> </body> </html>
10-超链接
<!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> <!-- target 控制链接打开方式 --> <a href="./11-超链接2.html" target="_blank">点击我进行跳转</a> <a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_8781526532986121071%22%7D&n_type=-1&p_from=-1" target="_blank">去百度</a> </body>` </html>
11-超链接2
<!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> <img src="images/cat.gif" alt=""> </body> </html>
12-锚链接
<!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> <!-- id 身份证号 一个元素只能有一个id 同一网页内，id不能相同 --> <a href="#one">去h1那里</a> <p>戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。 本书自1936年问世以来，销量已达9000万册，被译成58种文字，成为全球最持久的畅销书之一，稳居成功励志类图书榜首。被称为“世界成功学第一书”、“世界上最畅销、最经典、最实用的为人处世参考书” 此书之所以永不过时，就在于卡耐基先生对人性的深刻认识，以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功，只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读，它必将助你获取成功所必备的那85%的能力。 《人性的弱点》一个人变得不想说话，也不愿跟人来往，往往意味着三件事</p>
13-练习
<!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> <h2>今日搜索热词</h2> <hr /> <p> <h4>1、阿卡贝拉</h4> 阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： <a href="./09-音频标签.html">阿卡贝拉《千与千寻》</a> </p> <p> <h4>2、翻唱</h4> “翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： <a href="./08-视频.html">有一种悲伤（翻唱）-《A Kind of Sorrow》</a> </p> </body> </html>
14-特殊字符
<!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> <p>姓名： 缑欣</p> <!-- <p><</p> < --> <p>></p> <!-- <p> </p> --> <p>¥</p> <p>©</p> </body> </html>
15-有序列表
<!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> 你喜欢的食物是： <ol type="A"> <li>椒麻鸡 <a href="#">去百度</a> <img src="images/cat.gif" alt=""> </li> <li>榴莲</li> <li>螺蛳粉</li> </ol> </body> </html>
16-无序列表
<!DOCTYPE html> <html lang="en"> <head> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 你喜欢的明星是： <ul type="square"> <li>梁朝伟</li> <li>蔡徐坤</li> <li>黄子韬</li> <li>周杰伦</li> </ul> </body> </html>
17-自定义列表
<!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> <dl> <dt>线下门店</dt> <dd>web之家</dd> <dd>服务网点</dd> <dd>web之家</dd> </dl> </body> </html>
18-框架
<!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>
这个时候他们会变得有些沉默，但是这并不是代表他们没有社交的能力，而是他们不想再逢场作戏。
<!-- <iframe src="https://www.taobao.com" frameborder="1" width="800px" height="600px"></iframe>
<iframe src="./08-视频.html" frameborder="1" width="800px" height="600px"></iframe> -->
<a href="https://www.taobao.com" target="nn">点击我进入淘宝</a>
<iframe name="nn" frameborder="0" width="800px" height="400px"></iframe>
</body>
</html>
19-表单
<!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="#"> <!-- placeholder 提示词 --> 用户名：<input type="text" name="userName" autocomplete="off" placeholder="请输入正确的用户名："> 密码：<input type="password" name="one" maxlength="6"> <br> <input type="radio" name="r1" value="女" checked>女 <input type="radio" name="r1" value="男">男 <br> 爱好： <input type="checkbox" name="love" value="sing" checked>爱唱歌 <input type="checkbox" name="love" value="dance">爱跳舞 <input type="checkbox" name="love" value="打豆豆">爱打豆豆 <select name="xiala" id="" multiple> <option value="西安">西安</option> <option value="成都" selected>成都</option> <option value="南京">南京</option> </select> <!-- maxlength 最大长度 --> <textarea name="jianjie" id="" cols="30" rows="10" maxlength="20"></textarea> <br> <input type="file" name="wenjian" id="" multiple> <!-- <input type="button"> 普通按钮 --> <input type="submit" value="tijaio"> <br> <input type="email" name="number" id=""> <input type="date" name="" id=""> <input type="time" name="" id=""> <input type="color" name="" id=""> <button>提交</button> </form> </body> </html>
20-label标签
<!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="#">
<!-- 1、 -->
<label for="sing">爱唱歌</label><input type="checkbox" name="love" id="sing">
<!-- 2 -->
<label> 爱跳舞<input type="checkbox" name="love" id=""></label>
</form>
</body>
</html>
21-表格标签
<!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> <!-- rows --> <body> <!-- table：cellspacing:单元格与的单元格之间的间距 width:设置宽度 height：设置高度的（thead、tfoot不改变） 只是高度的底线--> <!-- tr\tbody\tfoot属性一样 --> <table border="1px" cellspacing="0" width="800px" height="500px"> <caption>学生信息</caption> <thead height="200px" align="center" valign="middle"> <tr> <th width="">姓名</th> <th>性别</th> <th>年龄</th> <th>民族</th> <th>政治面貌</th> </tr> </thead> <tbody height="400px" align="center" valign="middle"> <tr> <td>张三</td> <td>男</td> <td>18</td> <td>翰</td> <td>团员</td> </tr> <tr> <td>白华林</td> <td>男</td> <td>21</td> <td>汉</td> <td>团员</td> </tr> <tr> <td>张毅</td> <td>男</td> <td>18</td> <td>翰</td> <td>团员</td> </tr> <tr> <td>张三</td> <td>男</td> <td>18</td> <td>翰</td> <td>团员</td> </tr> </tbody> <tfoot align="center"> <tr> <td></td> <td></td> <td></td> <td></td> <td>共计：4人</td> </tr> </tfoot> </table> </body> </html>
22-单元格合并
<!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> <table border="1" width="400px" height="400px" cellspacing="0" bgcolor="blue"> <tr bgcolor="pink"> <td rowspan="2"></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="3"></td> <td></td> </tr> </table> </body> </html>
23-无语义标签
<!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> <!-- <p></p> <h1></h1> <a href="#"></a> --> <!-- div 独占一行 --> <div>我是一个盒子<a href="#">v发v发v</a></div> <div>我是一个盒子</div> <div>我是一个盒子</div> <h1>ncdcjdc</h1> cnjcj <!-- span 一行多个 --> <span>我是一个小容器</span> <span>我是一个小容器</span> <span>我是一个小容器</span> <span>我是一个小容器</span> </body> </html>
24-元素显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
width: 300px;
height: 300px;
background-color: pink;
}
img {
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<!-- 元素显示模式：
块元素：独占一行，宽、高、内外边距可以设置 div h1~h6 li
行内元素：一行多个，宽高、内外边距设置无效 span a
行内块元素：可以一行多个，还可以设置宽高、内外边距 img
-->
<div>我是块元素</div>
<span></span>
<a href="#">去百度</a>
<a href="#">去百度</a>
<a href="#">去百度</a>
<a href="#">去百度</a>
<img src="../../day1/灰太狼.jpg">
<img src="../../day1/灰太狼.jpg">
<img src="../../day1/灰太狼.jpg">
</body>
</html>
25-h5新标签
<!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> <nav> </nav> <header> </header> <article> <section></section> </article> <footer> </footer> <details> <summary>点击我查看详情</summary> 你小子，被骗了 </details> </body> </html>
26-全局属性
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- id: 同一个页面id值不能重复 一个元素只能有一个id名 除了: body html head script style --> <div id="box1"></div> <a href="#" id="a1"></a> <!-- class: 分类 配合层叠样式表 一个网页中可以有多个类名相同的元素，一个元素可以有多个类名 --> <div class="box1 box2"></div> <div class="box1 box3"></div> <div class="box1 box4"></div> <div class="box1 box5"></div> <a href="#" class="a1"></a> <!-- title ：鼠标悬停时，提示词--> <img src="../../day1/灰太狼.jpg" alt="" title="我是一个灰太狼"> <div title="你中奖了，小可爱~">我是盒子</div> <a href="#" title="恭喜你，上天了">去云端</a> <!-- tabindex : 正数 负数 0 --> <input type="text" name="ux" id=""> <a href="#"> dicdncd </a> <div title="你中奖了，小可爱~" tabindex="1">我是盒子</div> <div title="你中奖了，小可爱~" tabindex="2">我是盒子</div> <!--spellcheck:拼写检查 true false --> <input type="text" spellcheck="false"> <!-- accesskey：设置快捷键的属性 谷歌浏览器里：配合alt按键，才能完成 --> <form action="#"> <input type="text" name="user" id=""> <button accesskey="l">提交</button> </form> <!-- autocapitalize 启动大小写--> <!-- contenteditable：设置元素中内容是否可以更改 true false--> <div contenteditable="true">我是一个不允许编辑的盒子</div> <!-- dir --> <div dir="rtl">我是一个不允许编辑的盒子</div> <!-- hidden --> <div hidden>我是一个不允许编辑的盒子cdcdcd</div> <a href="#" hidden>cdjcdj</a> </body> </html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
