《html5与css3权威指南》知识整理

柠檬小怪兽      2022-02-10     115

关键词:

《HTML5与CSS3权威指南》知识点整理(1) 

1、新增标签

 

新增语义化标签。

<header> 定义 section 或 page 的页眉。

<nav>定义导航链接。

<footer> 定义 section 或 page 的页脚

<section> 定义 section

<article> 定义文章。

<aside> 定义页面内容之外的内容。

下面用一个图示来说明其用法。

语义化标签的好处:

1、对搜索引擎友好,有利于SEO

2、便于程序员进行代码阅读和维护

 

新增多媒体标签

audiovedio标签

<audio controls="controls">

  <source src="song.ogg" type="audio/ogg">

  <source src="song.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

 

代码中的source标签为媒介元素,由于不同内核的浏览器支持不同格式的文件,source提供不同格式的资源供浏览器选择。

属性:

autoplay :自动播放

controls:显示控件

loop:循环播放

src:文件路径

<video src="movie.ogg" controls="controls">

</video>

除了具有audio标签的属性外,Vedio标签还可以设置宽高属性。

当播放带有字幕的视频时可以用track标签进行引入。

<video width="320" height="240" controls="controls">

  <source src="forrest_gump.mp4" type="video/mp4" />

  <source src="forrest_gump.ogg" type="video/ogg" />

  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">

  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">

</video>

新增表单元素及属性

1、新增7个输入类型

  • email

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时,会自动验证 email 域的值。

  • url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时,会自动验证 url 域的值。

  • Number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定:

Points: <input type="number" name="points" min="1" max="10" />

属性

描述

max

number

规定允许的最大值

min

number

规定允许的最小值

step

number

规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value

number

规定默认值

 

  • Range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

您还能够设定对所接受的数字的限定:

  • Date pickers (date, month, week, time, datetime, datetime-local)

HTML5 拥有多个可供选取日期和时间的新输入类型:

  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间(小时和分钟)
  • datetime - 选取时间、日、月、年(UTC 时间)
  • datetime-local - 选取时间、日、月、年(本地时间)
  • Search

search 类型用于搜索域,比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

  • Color
  • 会调出颜色面板

1、新增表单元素

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list">

<option label="W3School" value="http://www.W3School.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" /></datalist>

 

2、新增属性

新的 form 属性:

  • Autocomplete

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

  • Novalidate

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

新的 input 属性:

  • autocomplete
  • Autofocus

autofocus 属性规定在页面加载时,域自动地获得焦点。

  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • List

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

  • Multiple

multiple 属性规定输入域中可选择多个值。

  • pattern (regexp)

pattern 属性规定用于验证 input 域的模式(pattern)。模式(pattern) 是正则表达式。

Country code: <input type="text" name="country_code"pattern="[A-z]{3}" title="Three letter country code" />

  • Placeholder

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

  • required

required 属性规定必须在提交之前填写输入域(不能为空)。

HTML5标签针对ie浏览器需要做兼容性处理,兼容写法在之前的文章也提到过,需要引入一个第三方插件,方式如下:

 

<!--[if lt IE 9]>

<script src="libs/html5shiv/html5shiv.js"></script>

<![endif]-->

 

html5与css3权威指南

doctype声明:<!DOCTYPEhtml>字符编码:<metacharset="utf-8"> 不允许写结束标记:area,base,br.col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr可以省略结束标记:li,dt,dd,p,rt,rp,optgroup,optio 查看详情

html5与css3权威指南(第2版·上册)中文pdf扫描版?

HTML5与CSS3权威指南(第2版·上册)已经成为HTML 5与CSS 3图书领域的一个标杆,被读者誉为“系统学习HTML 5与CSS 3技术的最佳指导参考书之一”和“Web前端工程师案头必备图书之一”。第2版首先从技术的角度结合最新的... 查看详情

css(层叠样式表)学习书籍,有一本讲原理的,叫《css权威指南》还是《html5与css3权威指南》?

...分感谢!参考技术A如果题主找的是那本经典的就是《CSS权威指南》(《css:thedefinitiveguide》)大名鼎鼎的O'Reilly出品,封面图案是鲑鱼。这本书是2001年首次出版的,那时候哪有CSS3和HTML5啊。。。CSS2还差不多。你后面说的是那... 查看详情

前端相关书籍

...与案例实战 javaScript从入门到精通(标准版)javaScript权威指南CSS权威指南Web前端工程师修练之道HTML5+CSS3从入门到精通 前端基础实战:CSS高效开发实战CSS3LESSSASSBootstrapFoundationjquery实战从入门到精通CSS设计指南html5+JavaScript... 查看详情

前端经典书籍整理(持续更新.....)

...级程序设计JavaScript高级程序设计第3版密码:mci1JavaScript权威指南JavaScript权威指南第6版密码:vr92深入浅出Node.js深入浅出Node.js密码:u69vHttp权威指南Http权威指南密码:tlg3数据结构与算法JavaScript描述数据结构与算法JavaScript描述密... 查看详情

html5权威指南中文版高清pdf扫描版?

 HTML5权威指南是一本系统学习网页设计的权威参考图书。《HTML5权威指南》分为五部分:第一部分介绍学习本书的预备知识和HTML、CSS和JavaScript的最新进展;第二部分讨论HTML元素,并详细说明了HTML5中新增和修改的元素;第三... 查看详情

html5权威指南--标记文字

   一、生成超链接1、属性:href、hreflang、media、rel、target、type2、生成指向外部的超链接:用的最多的协议就是http,但也支持其他协议,如https、ftp、mailto;还可以生成基于图像的超链接3、使用相对URL:如果href属性... 查看详情

html5权威指南--组织内容

   一、p元素  表示文本的一个段落,该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进 二、div元素  是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,... 查看详情

css权威指南读书笔记

...就想系统地看看css,并且做一些练习,于是就开始看《css权威指南》,看到了第六章,初步感觉,对于工作一年的我来说,很简单,当然也有一些我不熟悉的知识点,于是整理了下来。一、@import   1、放在style容器中... 查看详情

css3权威指南-浮动

基础html,两个浮动元素<divclass="content"><divclass="red"></div><divclass="blue"></div></div> 1、浮动元素不会超出父元素的外边界。所以说是相对于父元素浮动的。因为浮动了,所以父元素高度坍塌!高度始终... 查看详情

css3权威指南-浮动2

1、如果对元素设置外边距,他是会跑到父元素外面去的。<head><title></title><styletype="text/css">*{margin:0;padding:0;}.container{margin-left:100px;margin-top:100px;height:500px;width:500px;background-col 查看详情

html5权威指南13.扩展的xmlhttprequestapi

  查看详情

《kubernetes网络权威指南》读书笔记|汇总

书籍来源:《Kubernetes网络权威指南:基础、原理与实践》一边学习一边整理读书笔记,并与大家分享,侵权即删,谢谢支持!1.网络虚拟化基石:networknamespace2.千呼万唤始出来:vethpair3.连接你我他&... 查看详情

css权威指南的内容简介

参考技术A《CSS权威指南》(第3版)是著名的CSS专家EricA.Meyer他招牌式的智慧和无与伦比的经验引领读者探索了CSS的各个部分,包括属性、标记、特性和实现。此外,他还就现实应用中的一些问题,例如浏览器的支持和设计方针,发... 查看详情

《kubernetes网络权威指南》读书笔记|连接你我他:linuxbridge

书籍来源:《Kubernetes网络权威指南:基础、原理与实践》一边学习一边整理读书笔记,并与大家分享,侵权即删,谢谢支持!附上汇总贴:《Kubernetes网络权威指南》读书笔记|汇总_COCOgsta的博客-CSDN博... 查看详情

html5权威指南:定制input元素

第十三章:定制Inpur元素,http://www.cnblogs.com/polk6/p/5417921.html#Menu3-Newinput标签最全面的type属性:http://blog.sina.com.cn/s/blog_161005e400102wa2n.html 查看详情

html5权威指南15.获取地理位置信息

 1navigator.geolocation.getCurrentPosition(function(position){2varcoords=position.coords;3console.log(coords.latitude,coords.longitude,coords.accuracy);4},5//捕捉错误信息6function(error){7varerrorType= 查看详情

《kubernetes网络权威指南》读书笔记|网络虚拟化基石:networknamespace

书籍来源:《Kubernetes网络权威指南:基础、原理与实践》一边学习一边整理读书笔记,并与大家分享,侵权即删,谢谢支持!附上汇总贴:《Kubernetes网络权威指南》读书笔记|汇总_COCOgsta的博客-CSDN博... 查看详情