HTML5废弃and新增属性及CSS样式

HTML5废除的属性

table部分属性:bgcolor、border、cellpadding、width等

version:html版本

charset:a元素或者link元素运用

align属性:align="center"

HTML5新增input类型

email :对提交邮件内容进行自动验证

url :提交表单时会自动验证url的值,地址需加上http:或者https:(具有加密作用)

color :选取颜色

search :搜索,具有清除功能

number :min最小值,max最大值,默认最小值,step步数、数字间隔,默认加上最小值,后序在此基础上加上步数进行调增

range:滑动条,默认是0-100的范围,min最小值,max最大值,默认最小值,step步数、数字间隔,默认中间值,如默认值比最小值小,则默认使用最小值

表单初级验证的方法

placeholder:提示文本框内容

required:文本框input填写内容不能为空,否则不允许用户提交表单

Pattern:用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

^第一位数字

[ ]第二位数字,可以同时填写几个进行选择

\d{9}:后面还有9位数字

 HTML5新增input类型

date:年、月、日

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

month:年、月

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

week:年份&第几周

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

time :小时、分钟

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

datetime:年月日时间(UTC),需要自己输入:2019/12/31 22:12:31

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

datetime-local:年月日时间(本地时间),有时间控制可自行选择

<input type="datetime-local"> <input type="submit" value="提交">

CSS样式

内部样式:在<head></head>中操作

注:多个标签时,可用逗号隔开,如h1,h2,h3{~}

<head>

<style></style>

</head>

行内样式:

例:<h1 style=” corlor:blue; background:red”>我爱我的祖国</h1>

外部样式:

链接式引入外部样式:

新建文件后缀为.css文件

再建一个.html文件,在该文件<head></head>中操作

<head>

<link rel=”stylesheet” href=”.demo.css”>

:rel=”stylesheet” 不可省略

导入式引入外部样式:

新建文件后缀为.css文件

再建一个.html文件,在该文件<head></head>中操作

<head>

<style type="text/css">

@import url("style.css");

</style>

</head>

link链接常用

<link/>链接是先显示CSS样式,后显示HTML结构

@import导入显示显示HTML结构,后显示CSS样式

@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值