web前端 第一天总结
案例1：标准的html骨架
<!DOCTYPE html> <!--声明文档 html5 --> <html lang="en"> <head> <meta charset="utf-8"> <title>我是最棒的</title> </head> <body> 今天是第一天学习前端 </body> </html>
lang表示语言 <head></head>表示头部标签 <body></body>表示主体标签
案例2:快速生成+注释 (使用前提:vscode文件后缀名必须是.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 注释 :对代码进行解释 ctrl+/--> <!-- 在英文输入法下按!之后回车,即可快速生成html骨架--> 这是今天的第一课哦 </body> </html>
案例3:标题标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题标签</title> </head> <body> <!-- 标题标签 h1-h6逐渐变小 独占一行--> <h1>我是标题</h1> <h2>我是标题</h2> <h3>我是标题</h3> <h4>我是标题</h4> <h5>我是标题</h5> <h6>我是标题</h6> </body> </html>
h1-h6为标题元素标签 随着数字递增字体逐渐变小 特征:独占一行
案例4:段落标签 <p></p>
<!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>此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 </p>《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 </body> </html>
每段与每段之间会出现空行
案例5:换行标签与水平线标签
<!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 /> 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。<br/> 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 </body> </html>
<hr/>表示水平线标签 <br/>表示换行标签 (不产生空行)
案例6:文本格式化标签
<!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>戴尔·卡耐基被誉为美国<strong>“成人教育之父”</strong>，他所著的<b>《人性的弱点》</b>汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。</p> <p>此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如<em>卡耐基</em>所言：“一个人的成功,只有15%归结于他的专业知识。还有<i style="color: pink;">85%</i>归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 </p>《人性的弱点》<ins>"身带穷气，一看便知"</ins>：<u>犯了这些事情，贵人之气会减少</u> <del>2999</del> 9.9<br /> <s>11.0 </s> 11.0 </body> </html>
<strong></strong>和<b></b>都表示加粗标签
<em></em>和<i></i>都表示斜体标签
<ins></ins>和<u></u>都表示下划线标签
<del></del>和<s></s>都表示删除线标签
案例7:无语义标签
<!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> <!--容器，独占一行 多用于布局--> <div> nkdscldscdscdcnkdcds <img src="../images/dog.gif" alt=""> </div> <div> nkdscldscdscdcnkdcds </div> <div> nkdscldscdscdcnkdcds </div> <!-- span一行可存在多个 --> <span>a</span> <span>a</span> <span>a</span> </body> </html>
案例8:图片标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <!-- src指向图片位置 alt:图片地址发生错误时，用来提示的字 title:鼠标经过时，显示的文字 border 边框 width：宽度 height：高度 --> <img src="../images/dog.gif" alt="我是一只最好看的猫咪" title="我是一只狗" height="700px" border="20"> <img src="C:\Users\21195\Desktop\7-5\day1\images\dog.gif"> <img src="https://img1.baidu.com/it/u=3113560374,3342883877&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt=""> </body> </html>
图片路径可写相对路径和绝对路径
案例9:视频标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频标签</title> </head> <body> <!-- width="1800px" height="50px" controls:控件 autoplay：自动播放 muted:静音播放 poster：等待加载时的显示图片 --> <video src="./images/video.mp4" controls autoplay muted poster="./images/map.jpg"></video> </body> </html>
视频标签要添加controls
案例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> <audio src="./images/music.mp3" controls muted autoplay loop></audio> </body> </html>
loop表示播放完毕后循环播放
案例11:链接标签
<!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> <!-- 默认当前窗口打开 --> <a href="http://www.xianoupeng.com/" target="_blank">去鸥鹏</a> <a href="https://www.baidu.com" target="_blank">去百度</a> <a href="./09-视频.html">去看小视频了</a> <a href="https://www.baidu.com"><img src="./images/dog.gif"></a> <a href="http://www.xianoupeng.com"><img src="./images/cat.gif"></a> </body> </html>
target="_blank"表示新建一个窗口打开链接,如果不添加,则在默认本窗口打开链接
链接可写相对路径和绝对路径,同时也可点击图片进入链接
案例12:锚链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>锚链接</title> <style> body { font-size: 20px; } </style> </head> <body> <a href="#one">个人经历</a> 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br /> <!-- id属性------身份证号 --> <div id="one">个人经历</div> 此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。 《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少 </body>
通过锚链接 <a href="#one">个人经历</a> 锁定id为one的内容
案例13:小练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <h1>今日搜索热词</h1> <hr /> <h3>1、阿卡贝拉</h3> <p>阿卡贝拉 (意大利: Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例:<a href="./14-mp3.html">翻唱</a></p> <h3>2、翻唱</h3> <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频列举:<a href="./15-mp4.html">有种悲伤</a></p> </body> </html>
案例14:mp3链接
<!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></audio> </body> </html>
案例15:mp4链接
<!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></video> </body> </html>
案例16:有序列表
<!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 li--> 喜欢的食物 <ol type="a"> <li>榴莲</li> <li>臭豆腐</li> <li>鲱鱼罐头</li> <li>奶茶泡饭</li> </ol> </body> </html>
type：设置后代表li前面的顺序数字是什么类型的，比如是1，2，3这种还是A，B，C这种
- 1（默认）：列表显示1，2，3依次
- a：列表显示a,b,c依次
- A：列表显示A,B,C依次
- i：罗马数字
- I：大写的罗马数字
案例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> 你喜欢的明星是？ <ul type="circle"> <li>丁真</li> <li>法外狂徒张三</li> <li>华晨宇</li> <li>罗翔</li> </ul> </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> <dl> <dt> 你们喜欢的明星是？ <dd> 张三 </dd> <dd> 李四 </dd> <dd> 王二 </dd> </dt> </dl> </body> </html>
dl定义列表 dt自定义列表项目 dd定义自定列表项的描述
案例19:iframe框架
<!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" width="900px" height="600px"></iframe> --> <iframe src="https://www.baidu.com" width="900px" height="600px"></iframe> <a href="https://www.taobao.com" target="nn">去淘宝</a> <iframe name="nn" frameborder="0" width="800px" height="200px"></iframe> </body>
案例20:特殊字符
<!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> <div> < > <br /> 我最喜欢的大明星是 法外狂徒张三 31° </div> </body> </html>
注意:在特殊符号结尾需要加上;
附图:
浙公网安备 33010602011771号