HTML和CSS入门(4)

时间:2022-01-24 14:01:50

HTML5=HTML5+CSS3+Javascipt+API

1.html5中新增标签:
(1)<figure>表示一段独立的流内容(文本图像)
(2)<figcaption>位于figure内,用于定义figure的标题
(3)<details>用于描述文档或某个部分的细节(目前只有chrome浏览器识别)
(4)<mark>用于定义带有记号的文本
(5)<progress>定义运行中的进度(进程)
(6)<meter>表示范围已知,且可度量的等级标量成分数值
(7)<menu>定义一个列表式菜单
(8)<article>标记定义一篇文章
(9)<header>标记定义一个页面或一个区域的头部
(10)<nav>标记定义导航链接
(11)<section>标记定义一个区域
(12)<aside>标记定义页面内容部分的侧边栏
(13)<hgroup>标记定义文件中一个区域的相关信息

2.html5中改良标签:
(1)<ol>新加属性:start和reversed
start:用于自定义列表项开始的编号
reversed:用于设置列表是否进行反向排序
(2)<ul>新加属性:不支持type和compact属性,不支持li的type属性,改用css样式来定义列表类型。

3.表单标签:
html5中为了方便排版,可以使form中表单标签脱离form的嵌套
定义方式:

<form action="" id="new"<!--自定义表格名称-->></form>
<input type="" name="" form="new"/>

(1)input表单的type新属性值:type=“email/url/date/time/month/week/number/range/search/color”

(2)表单属性:
required:表示其内容不能为空,必填
placeholder:提示文本,未输入时表单的内容,输入值后将不显示
autofocus(on):自动聚焦
autocompletely(on/off):自动完成的功能(注意添加name的值)

(3)datalist列表:配合<option>实现的自动填充表单功能

<input id="mycar" list="cars"/>
<datalist id="cars">
    <option value="bwm"></option>
    <option value="ford"></option>
</datalist>

css3新增选择器

1.关系选择器
(1)E+F 相邻选择符,选择紧贴在E之后的F元素
(2)E~F 兄弟选择符,选择E所有兄弟元素F
2.结构伪类选择器
(1)E:root 匹配E在文档的根元素(一般都是html,所以和定义body效果一样)
(2)E:first-child 匹配E的第一个子元素
E:last-child 匹配E的最后一个子元素
E:only-child 匹配E的仅有的一个子元素
E:nth-child(n) 匹配E的第n个子元素
E:nth-last-child(n) 匹配E的倒数第n个子元素

(3)E:first-of-type 匹配同类型中第一个同级兄弟元素E
E:last-of-type 匹配同类型中最后一个同级兄弟元素E
E:only-of-type 匹配同类型中仅有的一个同级兄弟元素E
E:nth-of-type(n) 匹配同类型中第n个同级兄弟元素E
E:nth-last-of-type(n) 匹配同类型中倒数第n个同级兄弟元素E

(4)E:empty 匹配没有任何子元素的元素E
(5)E:checked 匹配用户界面上处于选中状态的元素E
(6)E:enabled 匹配用户界面上处于可用状态的元素E
(7)E:disabled 匹配用户界面上处于禁用状态的元素E

3.属性选择器
(1)E[att] 具有att属性的元素
(2)E[att=“x”] 具有att=“x”属性值的元素
(3)E[att~=“x”] 具有att属性且属性值为一用空格分隔的字词列表,其中一个等于x的E元素
(4)E[att^=“x”] 具有att属性且属性值以x开头的字符串的E元素
(5)E[att$=“x”]具有att属性且属性值以x结尾的字符串的E元素
(6)E[att*=“x”]具有att属性且属性值包含x的字符串的E元素
(7)E:first-letter/E::first-letter 设置对象内的第一个字符样式
(8)E:first-line/E::first-line 设置对象内的第一行样式
(9)E:before/E::before 设置在对象前发生的内容,和content属性一起使用
(10)E:after/E::after 设置在对象后发生的内容,和content属性一起使用
(11)E::selection 设置对象被选择时的颜色