前端学记之html5-3

最新推荐文章于 2024-05-20 21:21:56 发布

victor_wk

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量207

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/victor_wk/article/details/78873080

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html5常用标签：
1、文档章节

<body></body>
<header></header>//章节头部
<nav></nav>//导航
<aside></aside>//与页面内容不相关的内容
<article></article>//独立的可重复嵌套的结构
<section></section>//文档中的区域或节
<footer></footer>//章节尾部
<hx></hx>

2、标题

<h1></h1>//大小最大
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>//最小

3、超链接

<a href="http://www.baidu.com" target="_self"></a>
<a href="#id"></a>
<a href="mainto:abcd@qq.com,abcdf@qq.com?cc=admin@qq.com&subject=feedback&body=body....."></a>

创建指向另一个文档的链接
创建一个文档内部的锚点,将页面移动到id所在的位置
链接到Email地址 ,可以默认进收件人、抄送人、主题、body内容

4、强调

<em></em>//语义上的强调，斜体
<strong></strong>//重要性的强调，粗体
<span></span>//无语义文字文本

5、换行

<br>

6、引用

<cite></cite>//作品等
<q></q>//文字
<code></code>//代码
<b></b>//粗体，不强调
<i></i>//术语，斜体

7、嵌入

<img src="cat.png" alt="cat">//alt提示
<iframe src="https://www.baidu.com"></iframe>//嵌入页面
<object type="application/x-shockwave-flash">
    <param name="move" value="http://pdfreader.swf">
    <param name="flashvars" value="http://book.pdf">
</object>
<embed></embed>

object方式src插件或外部资源，参数至与param中
embed方式

8、引入视频

<video autoplay controls loop poster="cat.png">
    <source src="move.mp4" type="video/mp4">
    <source src="move.webm" type="video/webm">
    <source src="move.ogg" type="video/ogg">
    <track src="video.srt" kind="subtitles" label="english">
    您的浏览器不支持video
</video>

controls显示视频控制器
poster显示视频缩略图
autoplay页面加载自动播放
loop自动重复播放

9、嵌入资源

<canvas></canvas>
<svg></svg>

canvas提供画布可自行绘制
svg高保真，高质量图

10、选择区域

<img src="cat.png" usemap="map1">
<map name="map1">
    <area shape="rect" coords="669,75,1075,682" href="https://www.baidu.com" target="_self">
</map>

shape区域形状 coords区域位置 href点击效果链接 target触发方式

11、表格

<table>
    <caption></caption>
    <thead>
    <tr>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th></th>
        <td></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td></td>
    </tr>
    </tfoot>
</table>

table申明表格
thead表格头纵向或横向
tfoot表格尾部
tr表格的每一行
td普通单元格

12、表单

<form>
<fieldset>
    <legend>照片选择</legend>
    <label for="file">选择照片</label>
    <input type="file" id="file">
</fieldset>
<fieldset>
    <legend>综合设置</legend>
    <div>选择尺寸:</div>
    <div>
        <input class="cb" type="checkbox" name="size" id="cb_0" value="5" checked>
        <label for="cb_0">5寸</label>
        <input class="cb" type="checkbox" name="size" id="cb_1" value="6">
        <label for="cb_1">6寸</label>
    </div>
    <div>选择相纸</div>
    <div>
        <input class="rd" type="radio" name="material" id="rd_0" value="fushi">
        <label for="rd_0">富士</label>
        <input class="rd" type="radio" name="material" id="rd_1" value="keda">
        <label for="rd_1">柯达</label>
    </div>
    <div>
        <label for="delivery">配送方式:</label>
        <select id="delivery">
             <option value="0">快递</option>
             <option value="1">EMS</option>
             <option value="2" selected>平邮</option>
        </select>
    </div>
    <div>
        <label for="description">商品描述:</label>
        <input class="txt" type="text" id="description" placeholder="hahahha">
    </div>
    <div>
        <label for="feedback">意见反馈:</label>
        <textarea name="feedback" id="feedback" rows="4" cols="3"></textarea>
    </div>
</fieldset>
</form>

form表单
fieldset分区
legend标题
input type类型：email,url,number,tel,search,range,color,date picker

13、组合容器

<div></div>//分区
<p></p>//段落
<ul></ul>//无序列表
<ol></ol>//有序列表
<dl></dl>//自定义列表
<pre></pre>//保留原有格式
<blockquote></blockquote>//大段落引用

14、常用实体字符
也可用#编码

 - `&nbsp;`空格
 - `&quot;` "
 - `&gt;` >
 - `&lt;` <
 - `&copy;` ©
 - `&amp;` &

victor_wk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学记之html5-3

html5常用标签： 1、文档章节<body></body><header></header>//章节头部<nav></nav>//导航<aside></aside>//与页面内容不相关的内容<article></article>//独立的可重复嵌套的结构<section></section>//文档中的区域或节<footer></footer>//章节尾部<hx></hx>2、标题
复制链接

扫一扫