HTML5与CSS3

来源：互联网发布：手机能申请淘宝店铺吗编辑：程序博客网时间：2024/06/04 18:37

HTML5=HTML+CSS3+Javascript+API
一、H5新增标签

(块状元素) 有意义的div<article>标记定义一篇文章<header>标记定义一个页面或一个区域的头部<nav>标记定义导航链接<section>标记定义一个区域<aside>标记定义页面内容部分的侧边栏<hgroup>标记定义文件中一个区块的相关信息<figure>标记定义一组媒体内容以及它们的标题<dialog>标记定义一个对话框(会话框)类似微信<progress>进度条标签<details> 标记定义一个元素的详细内容 ，配合dt、dd<datalist> 为input标记定义一个下拉列表,配合option <menu>命令列表

二、视频与音频
1、视频（video）

HTML5支持的视频格式：Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件支持的浏览器:F、C、OMPEG4=带有H.264视频编码+AAC音频编码的MPEG4文件支持的浏览器: S、CWebM=带有VP8视频编码+Vorbis音频编码的WebM格式支持的浏览器: I、F、C、O属性：autoplay视频打开之后自动播放     loop:视频循环播放     muted:视频静音     poster(图片) 视频第一个页面     preload="auto/metadata/none"视频是否加载完再播放使用方法：

<video src="文件地址" controls="controls"></video>

< video src="文件地址" controls="controls">    您的浏览器暂不支持video标签。播放视频</ video >

< video  controls="controls"  width="300“ >    <source src="move.ogg" type="video/ogg" >    <source src="move.mp4" type="video/mp4" >    您的浏览器暂不支持video标签。播放视频</ video >

2、音频（audio）     HTML5支持的音频格式：Ogg 免费 支持的浏览器:C、F、OMP3 收费 支持的浏览器: I、C、SWav 收费 支持的浏览器: F、O、S使用方法与video相同

三、表单
HTML5中为了方便排版，可以使form中的表单标签脱离form的嵌套。
方法:form指定ID，所有表单标签均添加form=id属性

<form action="" method="post" id="register" ></form>    <input  type="text" name="user" form="register" />    <select name="year" form="register" >        <option value="1999"></option>    </select>    <textarea name="ext" form="register" ></textarea>    <button type="submit" form="register" >提交</button>

Type="email"限制用户输入必须为Email类型Type="url"限制用户输入必须为URL类型Type="date"限制用户输入必须为日期类型Type="time"限制用户输入必须为时间类型 OType="month"限制用户输入必须为月类型OType="week"限制用户输入必须为周类型OType="number"限制用户输入必须为数字类型Type="range"产生一个滑动条的表单Type="search"产生一个搜索意义的表单 配合results="n"属性 CType="color"生成一个颜色选择表单autocomplete自动完成功能(autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。)autofocus自动聚焦属性，页面加载完成自动聚焦到指定表单placeholder表单的提示信息，存在默认值将不显示

<head lang="en">    <meta charset="UTF-8">    <style>        p:empty{            height:20px;            background: yellow;        }    </style></head><body><form action="" id="inform"></form><input type="text" form="inform" required  autofocus placeholder="请输入信息" name="username"/><input type="submit" form="inform"/><p>邮箱：<input type="email" form="inform" required/></p><p>网站：<input type="url" form="inform" required/></p><p>日期：<input type="date" form="inform"/></p><p>月份：<input type="month" form="inform"/></p><p>周：<input type="week" form="inform"/></p><p>数字：<input type="number" form="inform"/></p><p>滑动条：<input type="range" form="inform"/></p><p>搜索：<input type="search" form="inform"/></p><p>颜色：<input type="color" form="inform"/></p><p> 颜色：<input id="myCar" list="color" /><datalist id="color">    <option value="red">    <option value="green">    <option value="blue"></datalist></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi in labore libero mollitia, nihil quasi vero! Animi beatae consequuntur esse in, iste neque nesciunt officia, officiis provident, recusandae vero voluptates.</p><p></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda corporis dolor dolores, dolorum eaque illum ipsam iusto laboriosam molestiae natus, pariatur porro quod voluptas! Eum modi quia repudiandae sit veritatis?</p></body>

<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>

注册表

<fieldset>    <legend>用户登录</legend>    <p>用户名：<input type="text"/></p>    <p>密码：<input type="text"/></p>    <p>性别：<input type="text"/></p>    <p>爱好：<input type="text"/></p></fieldset>

三、CSS3新增选择器

关系选择器

伪类选择器结构性伪类选择器

UI元素状态伪类选择器

属性选择器

百度文库文件下载类型选择

 <style>        a{            text-decoration: none;            color:#5783c2;        }        a[href$=".doc"]::before{            content:url(img/word.jpg);        }        a[href$=".txt"]::before{            content:url(img/txt.jpg);        }        a[href$=".ppt"]::before{            content:url(img/ppt.jpg);        }    </style>    <body>    <p><a href="aa.ppt">演讲稿写作格式及范例</a></p>    <p><a href="aa.doc">演讲稿的基本写作方法</a></p>    <p><a href="aa.ppt">演讲稿的写作课件</a></p>    <p><a href="aa.doc">演讲的系统分析</a></p>    <p><a href="aa.txt">秘书公文写作知识：演讲稿...</a></p></body>

伪对象选择器

<style>    p::first-line{color:red}    p::first-letter{color:green;font-size:25px}    a::before{content:url(qvod.jpg)}    a::after{content:url(qvod.jpg)}    span::selection{background:#F0F}</style>

四、CSS3

1、边框border-radius圆角边框    使用方法与padding一致2、阴影box-shadow盒子的阴影    box-shadow:h-shadow v-shadow blur spread color inset    阴影：水平阴影距离 垂直阴影距离 模糊距离 模糊大小 颜色 外阴影text-shadow文本阴影    用法与盒子阴影用法一致3、边界border-image边界图片    border-image: source slice width outset repeat;    边界图片：图片路径 向内偏移 边界宽度 边框外部 repeat;    repeat:round(平铺)strech(拉伸)4、多层背景设置background：url(图片地址1) no-repeat left,       url(图片地址21) no-repeat left;每层背景用逗号隔开5、背景图片大小调整background-size：length（定义宽和高）|percentage（百分比）|cover（最大程度放大）|contain（最小大程度放大）;与background一一对应使用，用逗号隔开6、背景图片的定位background-origin规定背景图片的定位区域background-origin：padding-box（背景图像填充框的相对位置）                   border-box(背景图像边界框的相对位置)                   content-box(背景图像的相对位置的内容框)7、指定背景绘制区域background-clip属性指定背景绘制区域background-clip：border-box|padding-box|content-box;8、背景图像滚动background-attachment设置背景图像是否固定或者随着页面的其余部分滚动background-attachment:scroll背景图片随页面的其余部分滚动。这是默认                      fixed背景图像是固定的                      inherit指定设置应该从父元素继承                      local背景图片随滚动元素滚动9、渐变 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向     background: linear-gradient(direction, color1,color2);    从上到下： background: linear-gradient(red, blue);        从左到右：background: linear-gradient(to right, red , blue);        对角:background: linear-gradient(to bottom right,red,blue);        角度:background: linear-gradient(angle, color1, color2); /*angle:90deg*/ 径向渐变（Radial Gradients）- 由它们的中心定义 background: radial-gradient(center, shape size, start-color, ..., last-color);background: radial-gradient(red, green, blue); 颜色结点不均匀分布:background: radial-gradient(red 5%, green 15%, blue 60%); 设置形状:background: radial-gradient(circle, red, yellow, green);

阅读全文

0 0