2021-07-28

最新推荐文章于 2021-08-29 19:24:16 发布

旋风小八嘎

最新推荐文章于 2021-08-29 19:24:16 发布

阅读量70

点赞数

分类专栏：初识HTML

本文链接：https://blog.csdn.net/syzmg/article/details/119182491

版权

初识HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了HTML5中的新属性如 datalist 和 fieldset，以及如何使用语义化标签header、footer、nav、article、section和aside进行网页布局。同时涵盖了CSS基础应用，如定义样式和使用选择器。最后展示了input新增的属性和多媒体标签video/audio的使用实例。

摘要由CSDN通过智能技术生成

HTML基础

day03-html5新属性以及初识CSS
html5新属性
语义化标签：
header: 页眉主要用于页面的头部的信息介绍，也可用于板块头部
footer:页脚页面的底部或者版块底部
nav:导航（包含链接的的一个列表）
article：定义页面独立的内容区域,article适用于独立性强的内容，如本身就是一篇文章、博客，或者用户的评论等
section：定义文档的节（section、区段），每个 <section> 一般都有一个主题思想，但未必一定要有 <h>元素。
aside：定义突出的引用、广告、侧边栏。
代码：

css代码提前用
<style>
        header {
            width: 100%;
            height: 30px;
            background-color: #2e2828;
            color: whitesmoke;
        }
        nav {
            width: 100%;
            height: 50px;
            background-color: turquoise;
        }
        article {
            width: 60%;
            height: 200px;
            background-color: thistle;
            display: inline-block;
        }
        section {
            width: 80%;
            height: 140px;
            background-color: pink;
        }
        aside {
            width: 30%;
            height: 200px;
            background-color: powderblue;
            display: inline-block;
            float: right;
        }
        footer {
            width: 100%;
            height: 50px;
            background-color: #464606;
            color: white;
            position: absolute;
            bottom: 0px;
        }
    </style>

<body>
    <header>
        页眉
    </header>
    <nav>
        导航栏
    </nav>
    <article>
        独立流
        <section>文档节</section>
    </article>
    <aside>侧边栏</aside>
    <footer>页脚</footer>
</body>

结果如图：
在这里插入图片描述

datalist：定义选项列表，和input结合使用

<input type="text" list="star" placeholder="请输入名字">
    <datalist id="star">
        <option value="1">刘德华</option>
        <option value="2">周星驰</option>
        <option value="3">大聪明</option>
        <option value="4">二百五</option>
    </datalist>

结果：
在这里插入图片描述

fieldset：可将表单内的相关元素分组打包，与legend搭配使用
<legend>元素为 <fieldset>元素定义标题。

<fieldset>
            <legend>账户登录</legend>
            用户名：<input type="text"><br>
            密码：<input type="password" name="" id="">
    </fieldset>

在这里插入图片描述

progress:定义运行中的任务进度（进程）
最好和javascript一起使用显示任务进度。
不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 meter标签代替。
meter 标签定义度量衡。仅用于已知最大和最小值的度量。比如磁盘使用情况，查询结果的相关性等。meter不能作为一个进度条来使用。
figure：独立的流内容（图像、图表、照片、代码等等）
figcaption：定义 <figure> 元素的标题，被置于 “figure” 元素的第一个或最后一个子元素的位置

<body>
    <progress max="100" value="10">

    </progress>
    <meter max="100" min="0" value="50"></meter>
    <figure>
        <img src="../day02/male.png" alt="">
        <figcaption>
            图1-男像
        </figcaption>
        <img src="../day02/female.png" alt="">
        <figcaption>
            图2-女像
        </figcaption>
    </figure>

    <mark>高亮颜色</mark>
    <time>2021.07.28</time>
</body>

在这里插入图片描述
input新增属性

练习代码：

  <!-- 取色器 -->
    <input type="color" name="" id="">
    <!-- 日期：年/月/日 -->
    <input type="date" name="" id="">
    <!-- 定义时间 -->
    <input type="datetime" name="" id="">
    <!-- 定义日期和时间 -->
    <input type="datetime-local" name="" id=""><br>
    <!-- 验证邮箱 -->
    <input type="email" name="" id="">
    <!-- 电话 -->
    <input type="tel" name="" id="">

    <input type="submit" value="提交">

多媒体标签video与audio
视频：video 常用属性： src视频路径 controls播放按钮控件 muted静音 loop 循环播放，autoplay自动播放，谷歌浏览器想让视频自动播放，除了设置autoplay外，还需要设置muted。
video常用属性如下表：
在这里插入图片描述
audio常用属性如下表：

CSS
css引入：行内，内联，外联
css属性：
字体样式 font-
font-size: ;字体大小
font-family: ;字体样式英文字体放在中文字体样式前面
font-weight: ; 字体粗细，100-900 normal正常，值为400； bold加粗，值为700
font-style: oblique, italic; 斜体
font-variant: small-caps；将英文大写等
注：简写按以下顺序来
font: font-style font -weight font- size font-family

文本属性：
line-height: 600px; 让文字上下居中
text-transform: uppercase; 文本转换，英文大写 lowercase小写 capitalize首字母大写
text-indent: 2em; 文本缩进 2em 两个字符*/
letter-spacing: 3px; 字符间距中文
word-spacing: 16px; 单词之间的间距
white-space: nowrap; nowrap禁止换行, wrap允许换行
文本阴影(text-shadow)四个值: 水平阴影垂直阴影阴影模糊距离阴影颜色

简单选择器：
选择器
1.标签选择器 div span header nav
2.class 类选择器 .class
3.id 选择器 #id 规定唯一。
4.* 通用选择器
简单选择器: 标签选择器 div {} class类选择器 .class类名 { } id选择器#id名{} 通配符‘*’ {} 行内

选择器优先级：id>class>标签>通配符

伪类选择器：
需要将四个一起用时必须按下列顺序写
:link /* 未访问的链接 */

:visited /* 已访问的链接 */

:hover /* 鼠标移动到链接上 */

:active /* 选定的链接 */

/其中hover和active可以用在其他标签上/