结果在WPS里，无法粘贴过来
<br> | 换行 |
<hr> | 水平线 |
<div> | 节(一个框框包裹,自动换行) |
<span> | 节(不换行) |
<b> | 粗体文字 |
<i> | 斜体文字 |
<em> | 强调文字 |
<strong> | 粗体文字 |
<small> | 小号字体文字 |
<sup> | 上标文字 |
<sub> | 下标文字 |
<bdo> | 文本显示方向 <bdo dir=”ltr”>从左向右排列</bdo> <bdo dir=”rtl”>从右向左排列</bdo> |
①代码示例：
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><b>你好</b><br><strong>你好</strong></body></html>
结果如下：
②代码示例
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><bdo dir="ltr">从左向右排列</bdo><br><bdo dir="rtl">从右向左排列</bdo></body></html>
结果如下：
示例代码：
<a href=”www.baidu.com” target=””>我是链接</a>
target属性值：
_self | 自身窗口打开 |
_blank | 新窗口打开 |
_top | 顶层窗口打开 |
_parent | 父窗口打开 |
<ul>无序列表
<ol>有序列表
有序列表属性：
start | 1/A | 从第n个开始 |
type | 1 | 用数字标明序号 |
A/a | 用字母标明序号 | |
I/i | 用罗马字母标明序号 |
示例代码：
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><ul> <li>语文</li> <li>数学</li> <li>外语</li> <li>物理</li></ul><hr><ol start="3" type="A"> <li>语文</li> <li>数学</li> <li>外语</li> <li>物理</li></ul></body></html>
结果如下：
示例代码：
<img src=”图片地址” alt=”提示信息” height=”图片高度” width=”图片宽度”/>
<table>的子标签：
<caption> | 表格标题 |
<thead> | 表格头 |
<tfoot> | 表格尾 |
<tr> | 行 |
<td> | 格 |
<table>的border属性可以设置边框，学css 时再研究不迟。
示例代码：
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><table border="1"> <caption>XXX统计表</caption> <thead> <tr> <td>姓名</td> <td>学号</td> <td>年龄</td> <tr> </thead> <tr> <td>小明</td> <td>123456</td> <td>20</td> <tr> <tr> <td>小华</td> <td>654321</td> <td>19</td> <tr> <tr> <td>小明</td> <td>147258</td> <td>20</td> <tr> <tfoot> <tr> <td colspan="3">@2019.1.21版权归沉沉影视所有</td> <tr> </tfoot></table></body></html>
结果如下：
<td>的属性：
属性 | 作用 | 示例 |
colspan | 合并列 | colspan=”3” |
rowspan | 合并行 | rowspan=”2” |
①示例代码：
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><table border="2"> <tr> <td colspan="2">TD1和TD2</td> <td>TD3</td> </tr> <tr> <td>TD4</td> <td colspan="2">TD5和TD6</td> </tr> <tr> <td colspan="3">TD7和TD8和TD9</td> </tr></table></body></html>
结果如下：
②示例代码：
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><table border="2"> <tr> <td rowspan="2">TD1,TD4</td> <td colspan="2">TD2和TD3</td> </tr> <tr> <td>TD5</td> <td>TD6</td> </tr><tr> <td>TD7</td> <td>TD8</td> <td>TD9</td> </tr></table></body></html>
结果如下：
①contentEditable:是否可编辑。
可编辑：<div contentEditable=”true”>
②hidden：隐藏标签
隐藏：<div hidden=”true”>
③spellcheek：检测是否为空提示，true或false
<article>文章标签子标签：
<header> | 标题 <hgroup>组织多个标题 |
<footer> | 脚注 |
<section> | 段落，对页面内容分块 |
<nar> | 导航条 |
<aside> | 边栏 |
<mark> | 标记 |
示例代码：
<html><meta?http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><article> <header>文章标题</header> <section><mark>这是第一段</mark>这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段 这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段 这是第一段这是第一段这是第一段这是第一段这是第一段 这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段 </section> <section><mark>这是第二段</mark>这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段 这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段 这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段 </section> <section><mark>这是第三段</mark>这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段 这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段 这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段这是第三段 这是第三段这是第三段这是第三段 </section> <footer>所有解释权归沉沉影视所有@2019.01.23</footer> <aside> <h2>页面导航</h2> <nar><a href="">返回首页</a></nar> <nar><a href="">关于我们</a></nar> </aside> </article></body></html>
结果如下：
标签 | 属性 | 介绍 |
<meter> （计数仪表） | value | 当前值 |
max | 最大值 | |
min | 最小值 | |
high | 指定范围最大值 | |
low | 指定范围最小值 | |
<progress> (进度条) | max | 最大值 |
value | 当前值 |
<from>标签属性
action | 请求 |
method | 提交方式 |
enctype | 字符集 |
name | 唯一名称 |
target | 打开URL的方式 |
<input>标签属性
属性 | 属性值 | 介绍 |
checked | checked | 被选中 |
disabled | disabled | 禁止选中 |
maxlength |
| 最大字符数 |
readonly | readonly | 不允许用户修改 |
type | text | 单行文本域 |
password | 密码框 | |
hidden | 隐藏域 | |
radio | 单选框 | |
checkbox | 多选框 | |
color | 颜色选择器 | |
data | 日期选择器 | |
time | 时间选择器 | |
datetime | UTC日期时间选择器 | |
week | 第几周文本框 | |
month | 月份选择器 | |
邮箱 | ||
tel | 电话 | |
url | 链接地址 | |
number | 数字 | |
range | 拖动条 | |
file | 文件上传域 | |
image | 图像域 | |
submit | 提交按钮 | |
button | 无操作按钮 | |
reset | 重置表单按钮 | |
autofocus | autofocus | 自动获取焦点 |
placeholder | 提示文字 | Input框提示信息 |
formaction | action值 | 可以设置多个按钮用来提交表单，一个formaction的值对应一个action |
required | required | 必填，否则提示 |
pattern | 正则表达式 | 输入内容必须符合正则表达式 |
示例代码：
<html><meta?http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><form> <input name="uaer" type="text" placeholder="请输入用户名"><br> <input name="pass" type="password" autofocus="autofocus" placeholder="请输入密码"><br> <input name="login" type="submit" value="登入" formaction="login"><br> <input name="reg" type="submit" value="注册" formaction="regist"><br></from></body></html>
结果如下：
<select>的子标签<option>的属性
属性 | 属性值 | 介绍 |
disabled | disabled | 禁止选择 |
selected | selected | 选中状态 |
multiple | multiple | 允许多选 |
size |
| 显示多个列表项 |
<textarea>属性
clis | 文本域宽度 |
rows | 文本域高度 |
①音频标签示例：
<audio src=”” controls=”controls”>您的浏览器不支持audio元素</audio>
如果浏览器不支持就提示：您的浏览器不支持audio元素
②视频标签示例：
<video src=”” controls=”controls”>您的浏览器不支持video元素</video>
如果浏览器不支持就提示：您的浏览器不支持video元素
audio和video标签属性：
属性 | 属性值 | 介绍 | audio | video |
autoplay | autoplay | 自动播放 | 支持 | 支持 |
controls | controls | 显示播放控制条 | 支持 | 支持 |
loop | loop | 循环播放 | 支持 | 支持 |
preload | auto | 预加载 | 支持 | 支持 |
metadata | 只预加载字节、第一帧、播放列表、持续时间 | 支持 | 支持 | |
none | 不加载 | 支持 | 支持 | |
poster | 图片地址 | 封面 |
| 支持 |
width |
| 视频宽度 |
| 支持 |
height |
| 视频高度 |
| 支持 |
