搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 一纸旧时光 > HTML 5一篇就够

HTML 5一篇就够

一纸旧时光 2021-01-14

简述

user@Debian:~/Vue3Project$ yarn dev # 运行测试服务器,就可以在浏览器内访问应用了

Vue.js 会自动将编写好的 Vue 组件挂载到 HTML 模板中的<div id="app"></div>标签下。

打开 Vue 组件,可以看到 Vue 组件分为三区块 template、script 和 style,分别对应 HTML、JavaScript 和 CSS。

Q:HTML 是什么?
A:HTML 全称 HyperText Markup Language,是用于描述网页结构的超文本标记语言,最新版本为 HTML 5。

Q:CSS 是什么?
A:CSS 全称 Cascading Style Sheets,层叠样式[1]表,用于描述网页样式,最新版本为 CSS 3。

Q:HTML5 和 CSS3 的版本标准由谁制定?
A:W3C 万维网联盟(World Wide Web Consortium)说了算,以确保网页在任何浏览器内均可正常显示。

HTML5

HTML 是通过标签[2]来描述网页结构的,大多数的 HTML 元素都有一个开头标签和一个结尾标签,唯一区别就是结尾标签有个/

HTML 模板详解

<!-- HTML5版本声明标签 -->
<!DOCTYPE html>
<!-- 文档标签,标明默认语言 -->
<html lang="en">
    <!-- 头部标签,书写页面信息 -->
    <head>
        <!-- 元数据标签,标明文档字符集 -->
        <meta charset="UTF-8" />
        <!-- 视口,标明文档初始宽度和缩放值 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>文档标题</title>
    </head>

    <!-- 主体标签,描述网页结构 -->
    <body>
    </body>
</html>

常用标签

可以直接写在<body></body>标签里,也可以写在 Vue 组件的 template 中。

<!-- 注释 -->

<h1>主标题</h1> <h2>副标题</h2> <h3>三级标题</h3>
<h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>

<p>段落</p>

<!-- 块元素 -->
<div>
    <span>行内元素</span>
</div>

<!-- 换行符 -->
<br />
<!-- 分割线 -->
<hr />

<center>居中</center>

<i>倾斜</i> <b>加粗</b>
<em>强调</em> <strong>严正强调</strong>
<s>删除</s> <del>这个也是删除</del>

<u>下划线</u>

<sup>上标</sup> <sub>下标</sub>
<big>变大</big> <small>变小</small>

HTML5 新增部分语义化[3]标签

<!-- 主体 -->
<main>
    <!-- 头部 -->
    <header>
        <nav>导航</nav>
    </header>

    <!-- 文章 -->
    <article>
        <time datetime="2020-02-02">2020/02/02</time>
        <section>章节</section>
    </article>
    <footer>脚注</footer>
</main>

媒体类标签

<!-- 图表 -->
<figure>
    <!-- alt属性可以在图片加载失败时显示,也可以被屏幕阅读器读取 -->
    <img
        src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
        alt="百度一下,你就知道"
    />

    <figcaption>图表名</figcaption>
</figure>

<!-- 音频 -->
<audio controls>
    <!-- type支持video/ogg、video/mp4、video/webm、audio/ogg、audio/mpeg -->
    <source
        src="http://lhttp.qingting.fm/live/1739/64k.mp3"
        type="audio/mpeg"
    />

</audio>

<!-- 视频,poster属性为视频封面-->
<video
    src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi10ultra/index_08.mp4"
    autoplay="autoplay"
    muted="muted"
    loop="loop"
    poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
>
</video>

<!-- target可取_blank和_self,分别表示是否新建窗口打开链接-->
<a href="#" target="_blank">超链接</a>

列表类标签

<ul>
    <li>无序列表</li>
</ul>
<ol>
    <li>有序列表</li>
</ol>
<!-- 自定义列表 -->
<dl>
    <dt>自定义名词</dt>
    <dd>自定义描述</dd>
</dl>

表单类标签

<!-- action指向提交数据服务器地址,method表明请求方法 -->
<form action="https://www.baidu.com/" method="post">
    <!-- 表单域边框 -->
    <fieldset>
        <legend>表单域标题</legend>

        <!-- 输入框,placeholder是占位文本 -->
        <input type="text" placeholder="姓名" required tabindex="0" />

        <!--
            单选框和复选框常与label标签连用,for指向所关联的选项id
            选框的name表明相关选项集合归属,value表示表单数据传递值,checked表示默认勾选
        -->

        <label for="developer">开发者</label>
        <!-- 单选框 -->
        <input type="radio" id="developer" value="developer" name="identity" />
        <label for="user">用户</label>
        <input type="radio" id="user" value="user" name="identity" />

        <label for="eat"></label>
        <!-- 复选框 -->
        <input type="checkbox" id="eat" value="eat" name="hobby" checked />
        <label for="drink"></label>
        <input type="checkbox" id="drink" value="drink" name="hobby" />

        <!-- 下拉菜单 -->
        <select name="country" id="country">
            <option value="China">China</option>
            <option value="Foreign">Foreign</option>
        </select>

        <textarea name="textarea" id="textarea" cols="30" rows="10">
            文本框
        </textarea>

        <!-- 按钮,accesskey指定快捷键聚焦 -->
        <button type="submit" accesskey="b">提交</button>
    </fieldset>
</form>

表格类标签

<table>
    <caption>表格标题</caption>

    <!-- 表头 -->
    <thead>
        <th>列一表头</th>
        <th>列二表头</th>
    </thead>

    <!-- 表身 -->
    <tbody>
        <!-- 表行 -->
        <tr>
            <td>列一</td>
            <td>列二</td>
        </tr>
        <tr>
            <td>列一</td>
            <td>列二</td>
        </tr>
    </tbody>
</table>

? Ask More...

[1]

层叠样式: 子元素继承父元素样式,样式如有冲突,后写的会屏蔽之前的。

[2]

标签: 支持多层嵌套。

[3]

语义化: 可望文生义,便于理解。

- END -


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《HTML 5一篇就够》的版权归原作者「一纸旧时光」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注一纸旧时光微信公众号

一纸旧时光微信公众号:gh_985741a65dfa

一纸旧时光

手机扫描上方二维码即可关注一纸旧时光微信公众号

一纸旧时光最新文章

精品公众号随机推荐