【HTML5基础语法】HTML基础语法
HTML5知识全集
一、html文件标签
二、文本标签
三、图片
四、视频与音频
五、超链接
六、表单
七、列表
八、表格
九、语义标签
十、特殊符号
一、html文件标签
1 <!-- 2 3 html的文件一般为一个树形结构： 4 每一个标签都有是一个结点，每一个标签一般都有一个开始标签和一个结束标签 5 有的标签是没有结束标签的，比如meta，这种标签就是叶子节点 6 在开始标签和结束标签中间的部分就是这个结点的所有子节点，在同一级的标签都是它的兄弟结点 7 8 例： 根节点的标签为html，html的子节点为head标签和body标签，这两个标签为兄弟节点...... 9 --> 10 11 <!-- 12 注释： 13 html中没有单行注释，只有多行注释 14 注释快捷键：ctrl+/,再按一下ctrl+/就可以取消注释 15 注释时习惯记一些辅助信息:不需要给用户显示出来,但是写代码时需要看到的一些信息,比如说"这是标题" 16 --> 17 18 <!-- 19 vscode中写标签的几个技巧： 20 1.写上一个标签之后，打上一个右括号，他就会自动帮我们把结束标签 21 2.(更方便)可以先不写做括号，直接写标签，会出现补全，如果当前是我们想要的，按一下tab会自动补全出来 22 --> 23 24 <!-- 25 在vscode中，一个基础版本的html，打上一个！再按一下Tab就可以自动补全出来html框架。这是vscode的功能 26 --> 27 28 <!DOCTYPE html> 29 <!--表示文件的类型，所有的网页都需要写上之一句，直接背过--> 30 31 <html> 32 33 <head> 34 <!-- 35 head标签：存配置文件(样式文件(css文件)、js文件、标题title、meta信息...)，在网页内看不见 36 --> 37 <meta charset="UTF-8"> 38 <!-- 存放编码形式 --> 39 <meta name="description" contest="自古逢秋悲寂寥 "> 40 <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 --> 41 <meta name="keywords" constest="算法，计算机，编程"> 42 <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 --> 43 <title>ggg</title> 44 <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 --> 45 <link rel="icon" href="/Learn1-html基础/images/logo.png"> 46 <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 --> 47 </head> 48 49 <body> 50 <!-- 51 body标签：存内容，在网页中能看见 52 --> 53 <h1>Hello World</h1> 54 <!-- 55 html中有很多标签，记几个常用的即可，其他的现用现查 56 标签有很多,但是不用记那么多,现用现查就行,绝大多数标签可以看成是span和div扩展出来的,写到最后可能就无脑div了 57 --> 58 59 </body> 60 61 </html>
二、文本标签
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 6 </head> 7 8 <body> 9 <!-- 10 标签有很多,记住几个常用的即可,其他现用现查就行。一般写网站应用写到最后可能就无脑div了，写网页可能还差点。 11 绝大多数标签可以看成是span和div扩展出来的。div也可以看成是从span上扩展出来的，绝大部分标签没有本质的区别，只不过是他们默认的css样式设置不一样 12 html作者相当于是把公共的需求拿出来变成了一个独立标签，即在div和span的基础上加上一些特殊的样式，给它标准化了。 13 --> 14 15 <!-- div标签： 16 作用：其实就是定义一堆代码块 17 优点：1）设置样式css时可以统一设置 18 2）便于js处理操作，js可以直接处理操作div 19 div其实就是逻辑把他们归为一类，打包在一起，方便进行整体操作 20 --> 21 <div>hello</div> 22 <div>world</div> 23 <!-- div为块状标签：可以认为默认带一个回车 --> 24 25 <span>hello</span> 26 <span>world</span> 27 <!-- span为行内标签：可以认为默认不带回车 --> 28 <!-- 还有img、video、audio也是行内标签 --> 29 30 <h1>hello world</h1> 31 <h2>hello world</h2> 32 <h3>hello world</h3> 33 <h4>hello world</h4> 34 <h5>hello world</h5> 35 <h6>hello world</h6> 36 <!-- 大小递减，粗细递减 --> 37 38 <p> 39 到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我再三劝他不必去；他只说：“不要紧，他们去不好！” 40 </p> 41 <p> 42 到南京时，有朋友约去游逛，勾留了一日； 43 第二日上午便须渡江到浦口，下午上车北去。 44 父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。 45 他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。 46 其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。 47 我再三劝他不必去；他只说：“不要紧，他们去不好！” 48 </p> 49 <!-- P标签就是一段段落,即在div的基础上加了一些两个限制，加了前后行间距(因为段落与段落之间会加一些行间距)--> 50 <!-- p标签和绝大多数html标签会把空格和换行过滤掉 --> 51 52 <!-- ><大于号小于号是在html是特殊字符，需要转义 --> 53 <pre> 54 #include <iostream> 55 using namespace std; 56 int main () 57 { 58 int a, b; 59 cin >> a >> b; 60 cout << a + b << endl; 61 return 0; 62 } 63 </pre> 64 <!-- pre标签与p标签的区别：pre标签会保留原文格式，是等宽字体，并且保留空格和换行 --> 65 <!-- 等宽字体：是指每一个字符的宽度是都是一样的，一般代码都是等宽字体 --> 66 67 <hr> 68 69 <p>#include <iostream><br> 70 using namespace std;<br> 71 int main () {<br> 72 int a, b;<br> 73 cin >> a >> b;<br> 74 cout << a + b << endl; <br> 75 return 0; <br> 76 } <br> 77 </p> 78 79 <hr> 80 <p> 81 到<i>南京</i>时，有朋友约去游逛，勾留了一日；<br> 82 <b>第二日</b>上午便须渡江到浦口，下午上车北去。<br> 83 父亲因为事忙，<del>本已说定不送我，</del>叫旅馆里一个熟识的茶房陪我同去。<br> 84 <ins>他再三嘱咐茶房，</ins>甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。<br> 85 其实我那年已二十岁， 北京已来往过两三次，是没有什么要紧的了。<br> 86 <mark>他踌躇了一会，</mark>终于决定还是自己送我去。我再三劝他不必去；他只说：“不要紧，他们去不好！” 87 </p> 88 <hr> 89 <!-- br标签也能实现换行，空格的话在文本内加&nbps; 想要加几个空格就加几个&nbps; --> 90 <!-- hr标签就是加一个水平线 --> 91 <!-- i标签是斜体 --> 92 <!-- b标签是加粗 --> 93 <!-- del标签是删除线 --> 94 <!-- ins标签是下划线 --> 95 <!-- strong标签也是加粗 --> 96 <!-- mark标签把标记的内容换背景色 --> 97 <!-- 这些标签本质上都是span(下滑)标签给加了不同的样式 --> 98 </body> 99 100 </html>
三、图片
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 <meta charset="UTF-8"> 7 <!-- 存放编码形式 --> 8 <meta name="description" contest="自古逢秋悲寂寥 "> 9 <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 --> 10 <meta name="keywords" constest="算法，计算机，编程"> 11 <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 --> 12 <title>ggg</title> 13 <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 --> 14 <link rel="icon" href="/Learn1-html基础/images/logo.png"> 15 <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 --> 16 </head> 17 18 <body> 19 <h1>Hello World</h1> 20 21 <img src="https://cdn.acwing.com/media/article/image/2022/03/01/1_3ec4c1cf99-mountain.jpg" alt=""> 22 <img src="/Learn1-html基础/images/mountain.jpg" alt=""> 23 24 <br> 25 <img width="300" src="/Learn1-html基础/images/mountain.jpg"> 26 <img height="100" src="/Learn1-html基础/images/mountain.jpg"> 27 <img width="50" height="100" src="/Learn1-html基础/images/mountain.jpg"> 28 29 <br> 30 <img width="250" height="100" src="/Learn1-html基础/images/mountain.jpg" alt="大山"> 31 <img width="250" height="100" src="/Learn1-html基础/images/mountainssssss.jpg" alt="大山"> 32 33 <!-- 34 img标签是行内标签，一行放不过来时就会自动换行(图片是一种特殊的文本) 35 img标签有四个属性：src、alt、height、width，其中src是必须要写的，alt建议也带上 36 src：设置图片的地址，可以用图片web链接地址，也可以用本地的图片的绝对路径(也可以看成是相对路径，从/开始写,/就是当前项目工程的根目录) 37 height：设置高度，单位是像素，如果只设置高度，会把宽度等比列缩放 38 width：设置宽度，单位是像素，如果只设置宽度，会把高度等比例缩放 39 alt：当图片无法显示时，会显示alt中的内容，alt中一般写这个图片表示什么含义 40 --> 41 </body> 42 43 </html>
四、视频与音频
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 <meta charset="UTF-8"> 7 <!-- 存放编码形式 --> 8 <meta name="description" contest="自古逢秋悲寂寥 "> 9 <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 --> 10 <meta name="keywords" constest="算法，计算机，编程"> 11 <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 --> 12 <title>ggg</title> 13 <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 --> 14 <link rel="icon" href="/Learn1-html基础/images/logo.png"> 15 <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 --> 16 </head> 17 18 <body> 19 <h1>Audios</h1> 20 21 22 <!-- 23 audio标签也是行内标签 24 audio标签有两种写法：在开始标签中要加上controls,controls是播放控制栏 25 1）使用src属性播放 26 2）利用source标签添加多个视频，按照顺序智慧出现一个视频。如果第一个无法播放，就播放第二个。 27 --> 28 29 <audio controls src="/Learn1-html基础/audios/bgm.mp3">无法播放</audio> 30 <audio controls src="/Learn1-html基础/audios/bgmmmmmm.mp3">无法播放</audio> 31 32 <br> 33 34 <audio controls> 35 <source src="/Learn1-html基础/audios/sound1.mp3" type="audio/mpeg"> 36 <!-- source标签一定要加上type属性，不知道填啥直接查,type就是填该资源的格式 --> 37 <source src="/Learn1-html基础/audios/sound2.mp3" type="audio/mpeg"> 38 </audio> 39 40 <br> 41 <audio controls> 42 <source src="/Learn1-html基础/audios/sound11111.mp3" type="audio/mpeg"> 43 <source src="/Learn1-html基础/audios/sound2.mp3" type="audio/mpeg"> 44 </audio> 45 46 <br> 47 48 49 <h2>videos</h2> 50 51 <!-- 52 video也是行内标签，video的使用与audio一样，不过可以设置视频在页面中显示的高度和宽度属性 53 controls为播放控制栏，不加没法播放 54 autoplay为自动播放，没法暂停 55 想要看细节去MDN查就可以了 56 --> 57 58 <video controls src="/Learn1-html基础/videos/video1.mp4"></video> 59 <video controls width="300" height="500" src="/Learn1-html基础/videos/video1.mp4"></video> 60 <video controls width="300" src="/Learn1-html基础/videos/video1.mp4"></video> 61 <br> 62 63 <video controls width="500"> 64 <source src="/Learn1-html基础/videos/video2.mp4" type="video/mp4"> 65 <source src="/Learn1-html基础/videos/video1.mp4" type="video/mp4"> 66 </video> 67 68 69 </body> 70 71 </html>
五、超链接
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 <meta charset="UTF-8"> 7 <!-- 存放编码形式 --> 8 <meta name="description" contest="自古逢秋悲寂寥 "> 9 <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 --> 10 <meta name="keywords" constest="算法，计算机，编程"> 11 <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 --> 12 <title>ggg</title> 13 <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 --> 14 <link rel="icon" href="/Learn1-html基础/images/logo.png"> 15 <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 --> 16 </head> 17 18 <body> 19 <h1>超链接</h1> 20 <!-- 21 超链接是a标签：点开超链接就会跳到一个新页面 22 1.href属性：写地址，两种写法。1）可以跳到其他网站但要注意加上协议https 2）可以跳到站内,即同一项目目录文件下的网页 23 2.target="_blank":在新标签页面中打开该页面 24 3.a标签是行内标签 25 4.开始标签和结束标签中一定要加内容，也可以加任意嵌套的标签，内容是显示在网页上能看到的(图片是一种特殊的文本) 26 --> 27 <a href="https://www.acwing.com/" target="_blank">AcWing</a> 28 <a href="/Learn1-html基础/html/1.2文本标签.html">文本标签</a> 29 30 <a href="https://www.acwing.com/" target="_blank"> 31 <img width="300" src="/Learn1-html基础/images/logo.png" alt="logo"> 32 </a> 33 34 35 </body> 36 37 </html>
六、表单
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 <meta charset="UTF-8"> 7 <!-- 存放编码形式 --> 8 <meta name="description" contest="自古逢秋悲寂寥 "> 9 <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 --> 10 <meta name="keywords" constest="算法，计算机，编程"> 11 <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 --> 12 <title>ggg</title> 13 <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 --> 14 <link rel="icon" href="/Learn1-html基础/images/logo.png"> 15 <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 --> 16 </head> 17 18 <body> 19 <h1>表单From</h1> 20 <!-- 21 表单以前用的比较多，现在用的少了。如果写web应用的话，一般直接用Ajax，Ajax就不用写显示表单了。 22 表单是方便跟后端服务器交互的功能。比如登录一个界面，传用户名密码。 23 表单中的标签都是行内标签，不换行 24 form即是表单标签，action属性中填的是地址，这个地址可以是一个后端函数，也可以是一个其他页面地址 25 input是输入标签，其中可以有很多属性，具体的去MDN中查就行了，记住几个常见的即可。 26 使用input时，一定要声明写上type属性，type属性中有很多样式值，表示不同类型的input输入标签，比如：text是写一个文本。 27 28 id的作用： 29 input标签使用时通常会绑定一些label标签结合使用，label是用来绑定某一个输入元素的，绑定时通过id来绑定，id在每一个页面中要唯一确定。 30 label中的for对应input中的每个id,而不是name 31 好处：这样label和input其实就是一个东西，绑在一块了。 32 33 name的作用： 34 提交之后会发现，网页链接后会有参数。url?参数名1(name)=参数值(填的值)&参数名2=参数值 35 url网址链接以一个?分隔,?之后的为参数，每一个参数都是参数名称=参数值的形式 36 会发现：name就是参数名称，填的值就是参数的值。所以传给后端的时候，就是把name和值对应起来通过url传给后端 37 这个参数是浏览器自己拼接自己做的,在本地看到是明文，如果使用的是https协议,传给服务器后端的是加密过的密文 38 name和id不一定一样，可以随便起。 39 40 maxlength：规定填写内容最大长度 41 minlength：规定填写最小长度 42 required:是否必填,用的时候直接加上加这个单词即可，加上必须填，不加可以不填 43 placeholder：当表单控件为空时，控件中显示的内容 44 45 46 button是按钮标签。 47 48 49 --> 50 51 <form action="https://www.acwing.com/"> 52 <!-- 53 action是全部要求输入提交之后访问某个函数，也可以访问某个链接 54 提交之后会自动跳转到这个链接页面 55 submit也有一个跳转的作用，跟直接点链接的区别是： 56 链接是直接跳到这个链接，而表单是先把数据交给服务器，服务器根据提交的数据再返回表单，多了向后端发数据的操作。 57 即一个是get()只获取数据，一个是post()可以修改数据 58 --> 59 60 <label for="usename">用户名</label> 61 <input type="text" placeholder="用户名" maxlength="10" required minlength="3" name="usename2" id="usename"> 62 <!-- 输入框的提示是浏览器自带的 --> 63 64 <br> 65 <label for="age">年龄</label> 66 <input type="number" name="age" id="age"> 67 68 <br> 69 <label for="email">邮箱</label> 70 <input type="email" name="email" id="email"> 71 <br> 72 <label for="email"></label> 73 <input type="email" placeholder="邮箱" name="email" id="email"> 74 75 <br> 76 <label for="password">密码</label> 77 <input type="password" name="password" id="password"> 78 79 <br> 80 <label for="file">上传文件</label> 81 <input type="file" name="file" id="file"> 82 83 <br> 84 <label for="cpp">cpp</label> 85 <input type="radio" name="ggg" value="cpp" id="cpp"> 86 <br> 87 <label for="java">java</label> 88 <input type="radio" name="ggg" value="java" id="java"> 89 <br> 90 <label for="cpp">python</label> 91 <input type="radio" name="123123" value="python" id="python"> 92 <!-- 93 注意：所有name完全一样的radio会构成一组，一组radio中最多只能选一个。 94 即所有名称name一样的radio是互斥的，只能选一个 95 比如:python跟cpp和java就构成了多选 96 --> 97 98 <br> 99 <label for="ggg">文本编辑框</label> 100 <textarea name="ggg" id="ggg" cols="50" rows="10"></textarea> 101 <!-- 表示一个多行纯文本编辑控件，常用于评论或反馈表单中的一段意见，cols和rows在这里初始化行数和列数，只是初始化不是固定死的 --> 102 103 104 <br> 105 <button type="submit">提交</button> 106 107 <!-- 108 在同一个form中，点击button会把form中所有的input里的内容提交，这个只是默认定义的，自己也可以用div+js实现 109 --> 110 111 112 </form> 113 114 115 <form action="https://www.acwing.com/"> 116 <label for="lang">语言</label> 117 <select name="lang" id="lang"> 118 <option value="">请选择</option> 119 <option selected value="cpp">cpp</option> 120 <option value="python">python</option> 121 <option value="java">java</option> 122 </select> 123 <!-- select是多选框,option是各个选项，加selected是默认选项，js可以访问这些属性 --> 124 125 <br> 126 <button type="submit">提交2</button> 127 </form> 128 129 </body> 130 131 </html>
七、列表
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 <meta charset="UTF-8"> 7 <!-- 存放编码形式 --> 8 <meta name="description" contest="自古逢秋悲寂寥 "> 9 <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 --> 10 <meta name="keywords" constest="算法，计算机，编程"> 11 <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 --> 12 <title>ggg</title> 13 <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 --> 14 <link rel="icon" href="/Learn1-html基础/images/logo.png"> 15 <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 --> 16 </head> 17 18 <body> 19 <h1>列表List</h1> 20 <!-- 21 列表是div的扩展，list有两种： 22 ul: unordered list 无序列表 23 ol: ordered list 有序列表 24 列表中内容的显示要用li标签括起来 25 --> 26 <ol>123</ol> 27 <ol> 28 <li>123</li> 29 </ol> 30 <ul> 31 <li>123</li> 32 </ul> 33 34 <ul> 35 <li>first item</li> 36 <li>second item</li> 37 <li>third item</li> 38 </ul> 39 <!-- 内容前面是点，样式中加了内边距 --> 40 41 <ol> 42 <li>Fee</li> 43 <li>Fi</li> 44 <li>Fo</li> 45 <li>Fum</li> 46 </ol> 47 <!-- 内容前面把点换成了123... --> 48 49 <!-- 50 列表的嵌套，ol与ul之间可以随意嵌套 51 列表中内容的显示要li括起来 52 可以发现：无序列表前面的符号每一级是有变化的，有序列表没有变化 53 --> 54 <ol> 55 <li> 56 知识点 57 <ul> 58 <li>1.1 vscode的安装与配置</li> 59 <li> 60 1.2 html基础标签 61 <ul> 62 <li>1.2.1 html文件结构</li> 63 <li> 64 <a href="https://www.acwing.com/file_system/file/content/whole/index/content/4084683/">1.2.2 65 文本标签</a> 66 </li> 67 <li>1.2.3 图片</li> 68 <li>1.2.4 音频与视频</li> 69 <li>1.2.5 超链接</li> 70 <li>1.2.6 表单</li> 71 <li>1.2.7 列表</li> 72 <li>1.2.8 表格</li> 73 <li>1.2.9 语义标签</li> 74 <li>1.2.10 特殊符号</li> 75 </ul> 76 </li> 77 <li>1.3 MDN官方文档</li> 78 </ul> 79 </li> 80 <li>作业</li> 81 </ol> 82 83 84 85 <!-- 86 dl列表，对应一些名词解释 ，有三个参数： 87 88 dl:定义这个列表 89 dt:title名称 不缩进 90 dd:describe描述 缩进 91 --> 92 <dl> 93 <dt>Name</dt> 94 <dd>Godzilla</dd> 95 <dt>Born</dt> 96 <dd>1952</dd> 97 <dt>Birthplace</dt> 98 <dd>Japan</dd> 99 <dt>Color</dt> 100 <dd>Green</dd> 101 <dd>Orange</dd> 102 </dl> 103 </body> 104 105 </html>
八、表格
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 <meta charset="UTF-8"> 7 <!-- 存放编码形式 --> 8 <meta name="description" contest="自古逢秋悲寂寥 "> 9 <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 --> 10 <meta name="keywords" constest="算法，计算机，编程"> 11 <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 --> 12 <title>ggg</title> 13 <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 --> 14 <link rel="icon" href="/Learn1-html基础/images/logo.png"> 15 <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 --> 16 </head> 17 18 <body> 19 <h1>表格table</h1> 20 <!-- 21 table现在在h5里面用的非常少了，布局一般都直接用div标签实现，除非真的要做一个表格才会用table。 22 (table表格很好写，所见即所得) 23 24 table用来定义表格： 25 有三部分构成： 26 caption标签：表示表格名称，可以不加 27 thead标签：头部区域，表头，默认加粗 28 tbody标签：数据区域 29 30 其中： 31 不管头部区域还是数据区域，其中每一行要用tr标签括起来，r是row行 32 头部区域中的每一个单元格用th表示 33 数据区域中的每一个单元格用td表示 34 35 其他的样式比如加粗、分割线、背景都可以在css中设置 36 37 --> 38 <table> 39 <caption>成绩单</caption> 40 <thead> 41 <tr> 42 <th>姓名</th> 43 <th>语文</th> 44 <th>数学</th> 45 <th>英语</th> 46 </tr> 47 </thead> 48 <tbody> 49 <tr> 50 <td>swl</td> 51 <td>100</td> 52 <td>100</td> 53 <td>100</td> 54 </tr> 55 <tr> 56 <td>小帅</td> 57 <td>90</td> 58 <td>90</td> 59 <td>95</td> 60 </tr> 61 </tbody> 62 </table> 63 64 65 </body> 66 67 </html>
九、语义标签
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 <meta charset="UTF-8"> 7 <!-- 存放编码形式 --> 8 <meta name="description" contest="自古逢秋悲寂寥 "> 9 <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 --> 10 <meta name="keywords" constest="算法，计算机，编程"> 11 <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 --> 12 <title>ggg</title> 13 <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 --> 14 <link rel="icon" href="/Learn1-html基础/images/logo.png"> 15 <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 --> 16 </head> 17 18 <body> 19 <h1>语义标签</h1> 20 <!-- 21 语义标签其实就是替代了常见的一些加上class意义的div，因为div只有语法上的作用，没有实际的含义意义 22 即以下两种写法是等价的，直接看语义标签，不需要看div的class就知道它是什么含义。 23 24 h5中的语义标签让我们在写代码的时候更加简洁，而且让标签更具有实际的含义 25 语义标签在使用的时候并没有硬性的规定，即任何你认为是标题的区域都可以用header，只要符合你的需求即可，按照你认为的意思来写即可 26 27 --> 28 <div class="header"></div> 29 <div class="nav"></div> 30 <div class="content"></div> 31 <div class="footer"></div> 32 33 <header></header> 34 <nav></nav> 35 <section></section> 36 <article></article> 37 <footer></footer> 38 <figure> 39 <figcaption></figcaption> 40 </figure> 41 42 <!-- 比如想做一个我的收藏的界面 --> 43 44 <header> 45 <h3>我的收藏</h3> 46 <ul> 47 48 <li><a href="/eidt.html">编辑</a></li> 49 <li><a href="/contact.html">联系我</a></li> 50 <li><a href="/about.html">关于我</a></li> 51 </ul> 52 </header> 53 <hr> 54 55 <section> 56 <h4>图片</h4> 57 <figure> 58 <img width="100px" src="/Learn1-html基础/images/logo.png" alt="logo"> 59 <figcaption>logo</figcaption> 60 </figure> 61 <figure> 62 <img width="100" src="/Learn1-html基础/images/mountain.jpg" alt="山"> 63 <figcaption>山</figcaption> 64 </figure> 65 </section> 66 <hr> 67 68 <section> 69 <h4>文章</h4> 70 <article> 71 <h5>背影</h5> 72 <p> 73 到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三劝他不必去；他只说，“不要紧，他们去不好！” 74 </p> 75 <p> 76 我们过了江，进了车站。我买票，他忙着照看行李。行李太多了，得向脚夫行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可，但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好坐位。他嘱我路上小心，夜里警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们只是白托！而且我这样大年纪的人，难道还不能料理自己么？唉，我现在想想，那时真是太聪明了！ 77 </p> 78 </article> 79 <article> 80 <h5>春</h5> 81 <p> 82 盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。 83 </p> 84 <p> 85 小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。 86 </p> 87 </article> 88 </section> 89 <hr> 90 91 <footer> 92 ©版权所有 swl 起始-2022 93 </footer> 94 95 </body> 96 97 </html>
十、特殊符号
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 <meta charset="UTF-8"> 7 <!-- 存放编码形式 --> 8 <meta name="description" contest="自古逢秋悲寂寥 "> 9 <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 --> 10 <meta name="keywords" constest="算法，计算机，编程"> 11 <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 --> 12 <title>ggg</title> 13 <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 --> 14 <link rel="icon" href="/Learn1-html基础/images/logo.png"> 15 <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 --> 16 </head> 17 18 <body> 19 <h1>特殊符号</h1> 20 <!-- 21 在html中，当我们需要用到一些特殊符号字符的时候，需要用转义字符来表示 22 --> 23 24 #include <iostream> 25 <br> 26 27 #include <iostream> 28 & 29 " 30 ® 31 © 32 ™ 33 34 <!-- 35 写web应用和直接写html页面的区别： 36 写web时js会更多一些，操作的逻辑会更加复杂。主要是写页面以展示图文为主，应用的话一般以交互为主。侧重点不同。 37 写页面的话大部分时间在写html和css，如果写应用的话，大部分时间在写js 38 --> 39 40 41 </body> 42 43 </html>
