devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

[html]网页结构以及常见标签用法

作者：Cpp五条 | 2024-04-09 07:26:28

赞

踩

[html]网页结构以及常见标签用法

哎，我服了，明明之前学了html的，但时间一长我就忘记了，本来flask学到视图了，但涉及到了html我觉得还是需要重新回顾一下,,,,,,

web开发技术栈一共有3门语言。分别是：

  • HTML：译作超文本标记语言，负责通过标签来表达网页的页面结构。

    开发者要遵循结构标准，就需要使用HTML来开发网页的内容与结构，需要遵循HTML语法。

  • CSS：译作层叠样式表标记语言，负责通过属性标记来表达网页的外观效果。

    开发者要遵循外观标准，就需要使用CSS来设计或修改网页的外观效果，需要遵循CSS语法。

  • javascript: 简称js，负责通过编程代码来表达网页的行为特效。

    开发者要遵循行为标准，就需要使用javascript来编写网页的动态特效以及数据交互能力，需要遵循javascript ECMA语法。

HTML网页的基本结构
  1. <!DOCTYPE html>--表示接下来的内容都是html的内容，让浏览器按html语法进行解析
  2. <html lang="en">--整个网页的标签，代表网页的开始
  3.  <head>  --head代表网页的头部
  4.  	<title>我的网页标题</title>
  5.  	<meta charset="utf-8">
  6.  </head>
  7.  <body>--这里是网页的主体，允许用户进行查看
  8.  	
  9.  </body>
  10. </html> --网页的结尾
标签名类型描述
<!DOCTYPE html>单标签告诉浏览器接下来所有的内容是HTML代码， 需要使用HTML解析器来识别。
<html></html>双标签告诉浏览器，这对html标签里面的内容就是网页内容。
<head></head>双标签告诉浏览器，这是html网页的头部信息，例如：网页标题，编码类型，网页关键字等....
<body></body>双标签告诉浏览器，这是html网页的正文内容。
<title></title>双标签属于head的子标签，告诉浏览器，这是html网页的网页标题。
<meta charset="UTF-8" />单标签告诉浏览器，这是一个utf-8编码的网页。

语法

HTML中的语法有2种：标签、注释。

注释

不会被用户所看到，但是可以在浏览器中，通过鼠标右键->查看网页源代码，让开发人员查看

<!--这就是注释，哎，前面那个我嫌麻烦就没这样子做-->
标签

标签[Tag]，表示HTML网页内容的一个最基本的组织单元，类似语文里面的标点符号，标签的作用就是告诉浏览器当前标签中的内容是有什么作用，要以什么格式进行展示的。

标签从书写结构上分2种：

  • 单标签，格式：<标签名> 或者 <标签名 />。
  • 双标签。格式：<标签名>标签内容</标签名>。

标签从组织结构上分2种：内容标签和结构标签。

  • 内容标签：主要包含和展示内容的，部分标签可以包含其他的内容标签。
  • 结构标签：主要用于包含其他标签，一般结构标签内部不会直接包含网页内容[文本、图片、视频、音频等]。

单标签

只有1个标签名的标签，就是单标签。书写格式：

  1. <标签名>
  2. <标签名 />
  3. <标签名 属性名="属性值"/>

常见的单标签

标签名描述
<meta>元信息标签
<link>css外观样式的外链引入标签，类似python中的import
<img>图片标签
<input>输入框标签
<br/>换行标签，浏览器默认是不识别HTML源码文件中的换行与空格的，所以需要使用br标签告诉浏览器在什么位置需要换行。
<hr>分割线标签，代表分割内容的一条横线，代表前面的内容已经结束了，横线下方的内容与上方内容没有关联。

双标签

  1. <标签名></标签名>
  2. <标签名 属性名="属性值" 属性名></标签名>

常见的双标签

标签名描述
<h1></h1>网页的一级标题
<h2></h2>网页的二级标题
...
<h6></h6>网页的六级标题
<p></p>网页的段落
<a></a>网页超链接
<div></div>块级结构标签
<span></span>行级结构标签
<form></form>表单标签，表示网页的一个提供给用户输入数据的表单
<ul></ul>无序列表结构标签，表示网页的一个内容列表
<li></li>列表项目标签
<table></table>表格标签，表示网页的一个表格

常见标签使用

标题和段落

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <!-- HTML中的标签是HTML语法提供的，所以每一个标签都是固定标签名 -->
  9.     <h1>h1标题:常用于网站的logo，网站标题</h1>
  10.     <h2>h2标题:常用于网站的板块标题、栏目标题</h2>
  11.     <h3>h3标题:常用于网站的板块标题、栏目标题</h3>
  12.     <h4>h4标题:常用于网站的附加板块标题，或者文章的标题</h4>
  13.     <h5>h5标题:更小级别的标题，基本用不到</h5>
  14.     <h6>h6标题:更小级别的标题，基本用不到</h6>
  15.     <p>p->段落：Hyper Text Markup Language</p>
  16. </body>
  17. </html>
标签的属性

标签的作用就是用于展示内容，但是内容有时候并非文本，而且文本的展示需要附加一些额外效果时，就需要使用标签的属性来声明。不管是什么标签，都有属性[Attribute]。标签的属性有两种：

  • 普通属性：

    属性与属性值使用 = 号关联 ，属性值使用单引号或双引号圈住，建议使用双引号。

  • 布尔属性：

    只有属性名，没有属性值。当标签里面写上这个属性名，则其值就是True，标签没有属性名，则为False

  1. <!DOCTYPE html>
  2. <html lang="en"> <!-- lang 就是HTML标签的属性，代表当前网页的默认语言language：en表示 english -->
  3. <head>
  4.     <meta charset="UTF-8"> <!-- charset，是meta元信息标签的属性，表示当前网页的编码是utf-8 -->
  5.     <title>Title_python学习网页</title>
  6. </head>
  7. <body>
  8.     <!-- 双标签的属性 -->
  9.     <!--
  10.     align：文本的水平对齐方式：left左[默认值],center中,right右
  11.     title：表示当前标签的补充提示，当用户把鼠标放在当前标签上方则自动title属性的值
  12.     -->
  13.     <h1 align="left" title="提示文本">h1标题:常用于网站的logo，网站标题</h1>
  14.     <h2 align="center" title="用于提示而已">h2标题:常用于网站的板块标题</h2>
  15.     <h3 align="right">h3标题:常用于网站的板块标题</h3>
  16.     <h4>h4标题</h4>
  17.     <h5>h5标题</h5>
  18.     <h6>h6标题</h6>
  19.     <p align="center" title="用于提示而已">p->段落：Hyper Text Markup Language</p>
  20.  
  21.     <!-- 单标签的属性：单标签是没有内容的，所以需要依赖于属性来展示对应的内容 -->
  22.     <img src="./goods.png"> <!-- src就是用于展示图片的内容 -->
  23.     <input type="number">   <!-- 输入框标签[数值输入框]，number表示只允许当前输入框中只能输入数值 -->
  24.     <input type="password"> <!-- 输入框标签[密码输入框]，password表示当前输入任何内容都是密码，所以不会展示出来  -->
  25.     <input type="text">     <!-- 输入框标签[单行文本输入框]，text表示只允许用于输入一行内容内容，不能回车换行 -->
  26.     <input type="datetime-local"> <!-- 时间输入框，只需要用户输入时间日期 -->
  27. </body>
  28. </html>

换行、分割、超链接

  1. <!DOCTYPE html>
  2. <html lang="en"> <!-- lang 就是HTML标签的属性，代表当前网页的默认语言language：en表示 english -->
  3. <head>
  4.     <meta charset="UTF-8"> <!-- charset，是meta元信息标签的属性，表示当前网页的编码是utf-8 -->
  5.     <title>Title_python学习网页</title>
  6. </head>
  7. <body>
  8.     <h1>将进酒</h1>
  9.     <a href="https://baike.baidu.com/item/将进酒">李白</a>
  10.     <p>君不见黄河之水天上来，奔流到海不复回。<br>
  11.     君不见高堂明镜悲白发，朝如青丝暮成雪。<br><br>
  12.     人生得意须尽欢，莫使金樽空对月。</p>
  13.     <hr>
  14.     <h2>译文</h2>
  15.     <p>你难道没有看见吗？那黄河之水犹如从天上倾泻而来，波涛翻滚直奔大海从来不会再往回流。<br>
  16.     你难道没有看见，在高堂上面对明镜，深沉悲叹那一头白发？早晨还是黑发到了傍晚却变得如雪一般。<br>
  17.     人生得意之时就要尽情的享受欢乐，不要让金杯无酒空对皎洁的明月</p>
  18. </body>
  19. </html>

超链接用法

超链接有2种常用用法：页面跳转、下载文件。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <!--页面跳转: 如果href的值是网络地址，可以跳转到跳转到指定的网页-->
  9.     <a href="http://www.baidu.com">跳转到百度</a>
  10.     <!--页面跳转: 如果href的值是本地地址，则可以跳转到本地的内部网页 -->
  11.     <a href="ces.html">跳转到本地页面</a>
  12.     <!-- 下载资源：当href的值是一个浏览器无法直接展示的内容格式时，浏览器会自动下载当前路径对应的内容 -->
  13.     <a href="./html.chm">点击下载手册</a>
  14.     <!-- 下载资源：当href的值是一个浏览器可以直接识别并展示的内容格式时，用户可以鼠标右键，对当前href的数值的内容进行另存为下载 -->
  15.     <a href="./goods.png">点击下载图片[鼠标右键,另存为]</a>
  16. </body>
  17. </html>

实际上页面跳转也是属于下载文件。因为用户能在浏览器里面看到的所有内容，实际上都是经过浏览器下载到本地，用户才能看到的。我们可以通过 F12 -> 打开开发者工具 -> network（网络）       或者右键检查找到网络也可以进行查看

列表标签

列表是一种结构标签，可以让网页的内容形成列表格式。

列表标签在HTML中提供提供了4种：

  1. 无序列表（UnorderList，ul）就是没有序号的，内容不分先后的列表。

  2. 有序列表（OrderList，ol）

  3. 定义列表（DefineList，dl）

  4. 菜单列表（Menu）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <!--
  9.     无序列表, unordered list，简写: ul
  10.     列表的单项  list item 简写：li
  11.     -->
  12.     <ul type="circle">
  13.         <li>列表的第一项</li>
  14.         <li>列表的第二项</li>
  15.         <li>列表的第三项</li>
  16.     </ul>
  17.  
  18.     <!--
  19.     有序列表, ordered list，简写：ol
  20.     列表的单项  list item   li
  21.     -->
  22.     <ol>
  23.         <li>列表的第一项</li>
  24.         <li>列表的第二项</li>
  25.         <li>列表的第三项</li>
  26.     </ol>
  27.  
  28.     <!--
  29.     和任何一个双标签一样，标签内部可以嵌套的标签来使用。
  30.     -->
  31.     <ul>
  32.         <li>
  33.             <p>第一章：开端</p>
  34.             <ul>
  35.                 <li>第一节：下山</li>
  36.                 <li>第二节：命案</li>
  37.                 <li>第三节：奇遇</li>
  38.                 <li></li>
  39.                 <li></li>
  40.             </ul>
  41.         </li>
  42.     </ul>
  43.  
  44.     <dl>
  45.        <dt>赵本山</dt>
  46.        <dd>春晚常驻选手，国内一线大品牌</dd>
  47.        <dd>乡村爱情故事，二人转，小品</dd>
  48.        <dt>小明</dt>
  49.        <dd>国内所有小朋友的同学，每次都从教室里面滚出去的哪一个。</dd>
  50.     </dl>
  51.  
  52.     <menu>
  53.         <li>首页</li>
  54.         <li>商品分类</li>
  55.         <li>购物狂欢节</li>
  56.         <li>会员中心</li>
  57.     </menu>
  58. </body>
  59. </html>

几种列表标签中最常用的只有**ul**，当然也有新版本的menu标签。其他的2种标签（ol与dl），基本不使用。

表单标签

是HTML中最终的标签之一，主要是提供了输入框或按钮等标签提供给用户进行交互输入数据。将来表单可以提交到指定服务端程序中进行数据处理。

form标签

属性描述
action设置当前表单的表单数据处理应用程序的url地址，默认值是当前url地址。
method设置当前表单的HTTP提供方式，默认是get。
get，以查询字符串的格式，把表单数据附加在url地址栏上提交数据
post，以数据包格式，把表单数据附在HTTP网络请求体中提交数据
enctype

设置当前表单提交的数据格式，默认值是application/x-www-form-urlencoded。
application/x-www-form-urlencoded：以普通表达数据格式提交
multipart/form-data：以多种数据格式提交
text/plain：以纯文本数据格式提交

表单项标签

类型用法描述
单行文本框<input type="text" name="" value="" placeholder="">name：设置输入框的值的变量名称，用于服务端接受数据。
value：设置输入框的默认值。
placeholder：设置输入框的提示内容。
密码框<input type="password" name="" value="" placeholder="">只允许输入单行密码，属性描述同上
单行文本框（数值框）<input type="number" name="" value="" placeholder="">只允许输入数值内容，属性描述同上。
就版本浏览器中不支持时会被默认为text单行文本框。
单行文本框（日期输入框）<input type="date" name="">只允许输入日期格式内容，属性描述同上。
低版本浏览器中不支持时会被默认为text单行文本框。
单行文本框（时间输入框）<input type="time" name="">只允许输入时间格式内容，属性描述同上。
低版本浏览器中不支持时会被默认为text单行文本框。
单行文本框（日期时间输入框）<input type="datetime-local" name="">只允许输入日期时间格式内容，属性描述同上。
低版本浏览器中不支持时，会被默认为text单行文本框。
文件上传框<input type="file" multiple name="">multiple：布尔属性，允许一次性上传多个文件。
其他属性描述同上。
单选框<input type="radio" name="" value="">用于提供一组多个选择让用户选一个选项的按钮组。
多个单选框必须name值相同才能为一组。
同一组单选框中的value值必填，而且值要唯一。
多选框<input type="checkbox" name="fav" value="1">用于提供一组多个选择让用户选多个选项的按钮组。
多个多选框必须name值相同才能为一组。
同一组多选框中的value值必填，而且值要唯一。
下拉列表框<select name="">
<option value="选项1值">选项1</option>
<option value="选项2值">选项2</option>
<option value="...">...</option>
<option value="选项n值">选项n</option>
</select>		属性描述同上。
多行文本框/文本域<textarea name="" cols="" rows=""></textarea>cols：设置多行文本框默认列数[宽度]
rows：设置多行文本框默认行数[高度]
注意：多行文本框标签中的任意内容都会被原样记录。
提交按钮<input type="submit" value="提交">value：表示当前按钮的提示文本。
用于提交表单数据到action属性对应的地址中。
普通按钮<input type="button" value="">属性描述同上，主要用于配合js完成网页特效。
普通按钮<button></button>普通按钮，中间可以显示图片或文本。
主要用于配合js完成网页特效。
重置按钮<input type="reset" value="重置">点击以后，会把当前表单中用户输入的所有内容进行还原到页面刚刷新状态。
隐藏域输入框<input type="hidden" name="" value="">隐藏域输入框的作用是附带一些默认数据提交给服务端，但是不希望用户看到。

表单项常用属性

属性名描述
name表示当前表单项的值的变量名，用于提供服务端获取本次提交的数据项。
value表示当前表单项的值，如果值在代码中提前设置了，则为默认值
type表示input框的类型
disabled布尔属性，设置当前输入框是否被禁用
maxlength设置当前输入框[textarea，input]中最大输入内容的长度。
multiple设置允许文件上传框选择上传多个文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单</title>
  6. </head>
  7. <body>
  8.     <!-- 表单/
  9.     <form>    表单标签，告诉浏览器，form内部的所有输入标签都是表单的内容，后面一并提交。
  10.          action  表单数据提交的服务器地址
  12.     <input>   输入标签/输入框/输入按钮
  13.          type 设置输入框的类型
  14.               text      告诉浏览器，当前input属于单行文本框
  15.               password  告诉浏览器，当前input属于密码框
  16.               file      告诉浏览器，当前input属于上传文件框
  17.               submit    告诉浏览器，当前input输入提交表单的提交按钮
  18.               radio     告诉浏览器，当前input属于单选框
  19.               checkbox  告诉浏览器，当前input属于多选框
  20.               reset     告诉浏览器，重置当前表单的数据
  21.     <select>  下拉列表
  22.           option    告诉浏览器，这是下拉列表中的其中一个选项
  23.     textarea  多行文本框
  24.           cols  设置框的列数[宽度]
  25.           rows  设置框的行数[高度]
  27.     -->
  28.     <h2>登录表单</h2>
  29.     <form action="">
  30.         登录帐号：<input type="text"><br><br>
  31.         登录密码：<input type="password"><br><br>
  32.         <input type="submit" value="登录">
  33.     </form>
  34.  
  35.     <h2>百度搜索</h2>
  36.     <form action="http://www.baidu.com/s">
  37.         <input type="text" name="wd">
  38.         <input type="submit" value="百度一下">
  39.     </form>
  40.  
  41.     <h2>注册表单</h2>
  42.     <form action="">
  43.         账户：<input type="text" name="username"><br><br>
  44.         密码：<input type="password" name="password"><br><br>
  45.         邮箱：<input type="emai" name="email"><br><br>
  46.         姓别：<label><input type="radio" name="sex" value="1">男</label>
  47.              <label><input type="radio" name="sex" value="0">女</label> <br><br>
  48.         爱好：
  49.              <label><input type="checkbox" name="lve" value="swimming">游泳</label>
  50.              <label><input type="checkbox" name="lve" value="pc_game">电脑游戏</label>
  51.              <label><input type="checkbox" name="lve" value="card">卡牌游戏</label>
  52.              <label><input type="checkbox" name="lve" value="wark">爬山</label>
  53.         <br><br>
  54.         所在城市：
  55.             <select name="province">
  56.                 <option value="">广东</option>
  57.                 <option value="">广西</option>
  58.                 <option value="">湖南</option>
  59.                 <option value="">湖北</option>
  60.                 <option value="">河南</option>
  61.                 <option value="">河北</option>
  62.                 <option value="">北京</option>
  63.                 <option value="">天津</option>
  64.                 <option value="">重庆</option>
  65.                 <option value="">上海</option>
  66.             </select>
  67.             <select name="city">
  68.                 <option value="">广州</option>
  69.                 <option value="">佛山</option>
  70.                 <option value="">深圳</option>
  71.             </select>
  72.         <br><br>
  73.         备注：<br>
  74.         <textarea name="remark" cols="60" rows="10"></textarea><br><br>
  75.         <input type="submit" value="提交">
  76.         <input type="reset" value="重置">
  77.     </form>
  78. </body>
  79. </html>
表格标签

表格系列标签主要是可以数据以表格的格式展示出来。但是现在table表格已经很少使用了，而是改成div+css实现更漂亮的表格。

标签描述
<table></table>表示网页的一个表格，内部一般直接嵌套的是tr标签。
<tr></tr>表示表格的一行，内部直接嵌套的只能是td或者th标签。
<td></td>表示表格的一个单元格，也可以是一列，可以包含其他标签或内容。
<th></th>表示表格的表头的一个单元格，可以包含其他标签或内容。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <!--基础单元格-->
  9.     <table border="1">
  10.         <tr>
  11.             <td>1行1列</td>
  12.         </tr>
  13.     </table>
  14.  
  15.     <!-- 第二个：多行的表格 -->
  16.     <table border="">
  17.         <tr>
  18.             <td>1行1列</td>
  19.             <td>1行2列</td>
  20.         </tr>
  21.         <tr>
  22.             <td>2行1列</td>
  23.             <td>2行2列</td>
  24.         </tr>
  25.     </table>
  26.     <!-- 第三个：有表头的表格 -->
  27.     <table border="0" align="center" width="300px;">
  28.         <tr>
  29.             <th>ID</th>
  30.             <th>姓名</th>
  31.             <th>年龄</th>
  32.             <th>性别</th>
  33.         </tr>
  34.         <tr>
  35.             <td>001</td>
  36.             <td>小龟龟</td>
  37.             <td rowspan="2">13</td>
  38.             <td>男</td>
  39.         </tr>
  40.         <tr>
  41.             <td>002</td>
  42.             <td>小红红</td>
  43.             <td>女</td>
  44.         </tr>
  45.         <tr>
  46.             <td>003</td>
  47.             <td colspan="3">17的小男孩</td>
  48.         </tr>
  49.     </table>
  50. </body>
  51. </html>

合并单元格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <table width="800" border="1">
  9.         <tr>
  10.             <!-- colspan 表示当前单元格[td,th]占据2列 -->
  11.             <th colspan="2">form标签属性说明</th>
  12.         </tr>
  13.         <!-- tr>th*2 -->
  14.         <tr>
  15.             <th>属性</th>
  16.             <th>描述</th>
  17.         </tr>
  18.         <tr>
  19.             <td>action</td>
  20.             <td>设置当前表单的表单数据处理应用程序的url地址，默认值是当前url地址。</td>
  21.         </tr>
  22.         <!-- tr>td*2 -->
  23.         <tr>
  24.             <!--设置当前单元格，占据3行的空间  -->
  25.             <td rowspan="3">method</td>
  26.             <td>设置当前表单的HTTP提供方式，默认是get。</td>
  27.         </tr>
  28.         <tr>
  29.             <td>get，以<b>查询字符串</b>的格式，把表单数据附加在url地址栏上提交数据</td>
  30.         </tr>
  31.         <tr>
  32.             <td>post，以<b>数据包</b>格式，把表单数据附在HTTP网络请求体中提交数据</td>
  33.         </tr>
  34.         <tr>
  35.             <td rowspan="4">enctype</td>
  36.             <td>设置当前表单提交的数据格式</td>
  37.         </tr>
  38.         <tr>
  39.             <td>application/x-www-form-urlencoded：默认值，以普通表达数据格式提交</td>
  40.         </tr>
  41.         <tr>
  42.             <td><b>multipart/form-data</b>：以多种数据格式提交</td>
  43.         </tr>
  44.         <tr>
  45.             <td>text/plain：以纯文本数据格式提交</td>
  46.         </tr>
  47.     </table>
  48. </body>
  49. </html>

表格嵌套

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <table width="1680" align="center">
  9.         <tr>
  10.             <td>
  11.                 <table align="center" width="1024">
  12.                     <tr>
  13.                         <td><a href="">奥运首页</a></td>
  14.                         <td><a href="">中国军团</a></td>
  15.                         <td><a href="">赛程赛果</a></td>
  16.                         <td><a href="">奖牌榜</a></td>
  17.                         <td><a href="">诸强</a></td>
  18.                     </tr>
  19.                 </table>
  20.             </td>
  21.         </tr>
  22.         <tr>
  23.             <td>
  24.                 <table width="100%" border="1">
  25.                     <tr>
  26.                         <td width="300">
  27.                             <table>
  28.                                 <tr>
  29.                                     <td>全部赛程</td>
  30.                                     <td width="20%">更多 > </td>
  31.                                 </tr>
  32.                                 <tr>
  33.                                     <td colspan="2">
  34.                                         <ul>
  35.                                             <li>中国对日本</li>
  36.                                             <li>韩国对日本</li>
  37.                                             <li>朝鲜对日本</li>
  38.                                             <li>俄罗斯对日本</li>
  39.                                         </ul>
  40.                                     </td>
  41.                                 </tr>
  42.                             </table>
  43.                         </td>
  44.                         <td>
  45.                             <img src="goods.png" width="100%" height="250" alt="">
  46.                         </td>
  47.                         <td width="450">右</td>
  48.                     </tr>
  49.                 </table>
  50.             </td>
  51.         </tr>
  52.     </table>
  53. </body>
  54. </html>
媒体标签
  1. img    图片
  2. audio  音频
  3. video  视频
标签常见格式描述
<img src="" alt="">png，jpg/jpeg，gif(动态图片格式)，svg，webp，tiff图片
<audio controls autoplay>
<source src="">
</audio>		mp3，mpeg，ogg，wma，aac，ogv音频
<video width="" controls autoplay src=""></video>mp4，mpeg，ogg，ogv，mov，flv，视频

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>我的网页标题</title>
  6.     </head>
  7.     <body>
  8.         <!-- 图片 -->
  9.         <img src="../素材/1.png" width="400px" height="400px">
  10.  
  11.         <!-- 音频-->
  12.         <audio controls>
  13.             <source src="../素材/horse.ogv" type="audio/ogg">
  14.         </audio>
  15.         <!-- 视频 -->
  16.         <video width="600px" controls autoplay src="../素材/movie.ogv"></video>
  17.     
  18.     </body>
  19. </html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/391147
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号