Html5新增学习_html-js-css

html5知识学习 H5的基础与语法

内容类型（ContentType）
HTML5的文件扩展符与内容类型保持不变，仍然为“.html”或“,htm”

DOCTYPE声明
不区别大小写

指定字符集编码
metacharset=“UTF-8”

可省略标记的元素
不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta
可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody

省略引号
属性值可以用双引号，也可以使用单引号。

HTML5新增语义化标签

section元素标识页面中的一个内容区块
article元素标识一块与上下文无关的独立内容
aside元素在articl之外的，与article内容相关的辅助信息
header元素表示页面中一个内容区块或整个页面的标题
footer元素表示页面中一个内容区块或整个页面的标题
nav元素表示页面中导航链接部分
figure元素表示一段独立的流内容，使用figcaption元素为其添加标签（第一个或最后一个子元素的位置）
main元素表示页面中的主要的内容（ie不兼容）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增语义化标签title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        header,section,footer{
            width: 755px;
            background: #f67d32;
            margin: 0 auto;
            color: white;
            text-align: center;
        }
        header{
            height: 70px;
            font-size: 45px;
            font-weight: 600;
        }
        section{
            height: calc(100% - 110px);
            background: #888888;
        }
        footer{
            height: 40px;
        }
        Nav,aside{
            width: 100px;
            height: 100%;
            float: left;
            background: #ccc;
        }
        main{
            width: calc(100% - 200px);
            height: 100%;
            background: white;
            float: left;
        }
    style>
head>
<body>
    <header>
        Header
    header>
    <section>
        <Nav>
            <figure>
                Nav
            figure>
            <ul>
                <li>11li>
                <li>22li>
                <li>33li>
            ul>
        Nav>
        <main>
            <article>

            article>
        main>
        <aside>Asideaside>
    section>
    <footer>
        Footer
    footer>
body>
html>

H5音频标签

音频表达式：
controls：是出现控制栏
loop：循环
autoplay：自动播放属性
muted：静音播放

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <audio src="./audio/清空.mp3" controls loop autoplay muted>audio>
body>
html>

H5视频标签

video
controls控制栏
loop 循环
autoplay自动播放（加上静音之后chrome能自动播放）
muted 静音属性
poster海报
width宽度
height高度

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        
    style>
head>
<body>
    
    <video src="./Video/video.mp4" controls poster="./img/0052/0052-2.jpg" width="300px" height="200pxs">video>
body>
html>

H5增强表单-input

一般是给后端的给后端时必须标注name
颜色选择：type=““color”
邮箱传输：type=“email”
URl 地址：type=“url” 必须是完整网址
电话输入：type=“tel” 手机端输入直接锁定数字键
滑块效果：type=“range” 支持min与max的使用设置一个区间用value可以设置初始值用step设置滑块单次移动的大小
数字输入：type=“number” 支持min与max的使用设置一个区间用value可以设置初始值用step设置数字单次增减的大小
搜索输入：type=“search” 比普通文本框多一个快速清除的功能
日期输入：type=“date”
月份输入：type=“month”
周数输入：type=“week”
时间选择：type=“datetime-local”

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5增强表单title>
head>
<body>
    <form action="">
        <div>
            颜色选择
            <input type="color" name="color">

        div>
        <div>
            邮箱输入
            <input type="email" name="email">
        div>
        <div>
           网址输入(必须是完整地址)
            <input type="url" name="url">
        div>
        <div>
            手机号输入(手机端非常适用)
            <input type="tel" name="tel">
        div>
        <div>
            滑块效果
            <input type="range" name="range" min="100" max="200" value="100" step="10"> 
        div>
        <div>
            数字类型
            <input type="number" name="name" min="0" max="10" value="2" step="2">
        div>
        <div>
            日期选择
            <input type="date">
            月份选择
            <input type="month">
            周数选择
            <input type="week">
            时间选择
            <input type="datetime-local" name="datetime">
        div>
        <input type="submit">
    form>
body>
html>

H5增强列表-数据列表

Datalist：选项列表（数据列表）
实现模糊搜索的快速搜索功能

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <input type="text" list="mylist">
    <datalist id="mylist">
        <option value="手机">option>
        <option value="手表">option>
        <option value="手镯">option>
        <option value="手环">option>
    datalist>
body>
html>

H5增强列表-属性

autofocus属性：
给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能一个。
required属性：
验证输入不能为空,必填项，不能为空1。
multiple：
可以输入一个或者多个值，每个值之间用逗号分开
例：
还可以应用于file
pattern
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例: title="输入内容：一个数字与三个大写字母"placeholder=‘输入内容：一个数字三个大写字母’

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <form action="">
        <div>
            用户名：<input type="text" autofocus>
        div>
        <div>
            邮箱：<input type="email" name="email" required multiple>
        div>
        <input type="submit">
    form>
body>
html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1324805.html

Html5新增学习

发表评论

评论列表（0条）