HTML学习

最新推荐文章于 2024-12-16 16:52:23 发布

qq_42129395

最新推荐文章于 2024-12-16 16:52:23 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_42129395/article/details/108640887

<abbr>显示字母缩写
代码：

<body>
The   <abbr title="apple pen">AP</abbr>  was  myself.
</body>

显示：
将鼠标放在“AP”上会显示“apple pen”

The AP was myself.

<map><area></map>图片到图片映射
代码：

<div>
<img src="img/孟医师图片.jpg" usemap="#yingshe"/>
<map name="yingshe">
    <area    alt="home"  shape="default"  href="home.html">
</map>
</div>

img中的usemap属性为映射的目标名
map为映射的地址标签其name属性为映射地址名
area必须在map中
（alt为图片加载不出时在图片位置显示的文字
shape为图片对应映射区域的形状：

default 为全部
rect为矩形 coodrs设置映射区域位置0,0,140,100 前两位为左上角坐标，后两位为右下角坐标
ploy为多边形
circle为圆形 coodrs设置映射区域位置30,60,25 前两位为圆心坐标，最后一位为半径

href为映射区域点击后跳转的页面）

<aside> 用于article的外部说明部分
代码：

The   <abbr title="apple pen">AP</abbr>  was  myself.
<aside>
    <h4>myself</h4>
    <p>Myself is very funny.</p>
</aside>

显示：

myself
Myself is very funny.

<audio>播放音频
代码：

<audio controls>
    <source src="img/horse.ogg">
</audio>

显示：
audio的播放种类：

controls 用户控制播放暂停
autoplay 音频在就绪之后马上播放
loop 当音频结束后重新开始播放
muted 音频输出为静音
preload 当网页加载时饮品是否默认被加载以及如何被加载（auto metadata none）

<base>设置默认地址-基准URL
<bdo><bdi>文字设置
bdo必须设置文字的顺序属性名：dir 属性：ltr（从左到右） rtl（从右到左）
代码：

<bdo>这段<bdi>文字</bdi>时倒放的</bdo>

显示：

这段 文字(两只独秀） 时倒放的

<button>按钮
代码：

<button type="button" onclick="alert('你好，世界!')">点我!</button>

显示：

<caption>带标题的表格
每个表格只能有一个标题。
代码：

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

显示：Monthly savings为表的标题

<cite>标签定义作品的标题
代码：

<div><p>这是我的代表作<cite>《小白杨 》</cite></p></div>

显示：（《小白杨》倾斜）

这是我的代表作《小白杨 》

<col><colgroup> 设置表格的样式

<col>用于设置表格中每一列的样式

代码：

<table border="1">
<colgroup>
<col span="2" style="background-color:red">  
<col style="background-color:yellow">
</colgroup>
<caption>表头</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<th>李红</th>
<th>2岁</th>
<th>女</th>
</tr>
<tr>
<th>张明</th>
<th>3岁</th>
<th>男</th>
</tr>
</table>

显示：
姓名、年龄两列的背景样式为红色，性别一列背景样式为黄色。

<datalist>下拉列表的内容设置
代码：

<div>
    <input list="colors" name="color">
    <datalist id="colors">
        <option value="bule"></option>
        <option value="yellow"></option>
        <option value="red"></option>
        <option value="pink"></option>
        <option value="gry"></option>
        <option value="green"></option>
    </datalist>
</div>

显示：
下拉列表选择颜色，，id与list设置的名字必须完全相同。

<dl><dt><dd>
dl：项目列表；dt：项目名称；dd：项目描述
代码：

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

显示：

Coffee
    Black hot drink
Milk
    White cold drink

<del><ins>显示删除的和新增的记录
代码：

<p>这段文字是<del>蓝色</del><ins>黑色</ins>的</p>

显示：
在这里插入图片描述

<fieldset><legond> 独立信息
代码：

<div>
    <form>
        <fieldset>
            <legend>药品信息：</legend>
            药品名：<input type="text"><br>
            厂家：<input type="text"><br>
            规格：<input type="text"><br>
            剂型：<input type="text"><br>
            单价：<input type="text"><br>
            有效期：<input type="text"><br>
            入库日期：<input type="text"><br>
        </fieldset>
    </form>
</div>

显示
在这里插入图片描述
14. <figure><figcaption> 设置图注
代码:

<div>
    <figure>
        <img src="img/药店消息.jpg" width="300" height="282" >
        <figcaption >药店图标</figcaption>
    </figure>
</div>

显示：为图片设置图注