Html5一些新的标签
1.<iframe> 进行页面嵌套
2.<canvas> 是一个容器,通过js进行绘制
3.<details> 标签规定了用户可见的或者隐藏的需求的补充细节。
<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
<details> 元素的内容对用户是不可见的,除非设置了 open 属性。
与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。
4.<article> 标签定义独立的内容。
<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
5.属性:定义元素行为
tabindex tab遍历
tabindex=负值 (通常是 tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用 JS 做页面小组件内部键盘导航的时候非常有用。
tabindex="0" ,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的 DOM 结构来决定的。
tabindex=正值,表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。
Css
一.Css使用方法:
1.头内
<style></style>
2.行内
<div class="box1" style="color: pink;"></div>
3.外联
<link rel="stylesheet" href="./ ">
二.选择器
1.基本选择器
1>通用选择器
*{}
2>类选择器
. + 类名{}
3>标签选择器
标签{}
4>id选择器
# + id{}
2.包含选择器
1>子代选择器
.父 > 子{}
2>后代选择器
.父 子 孙{}
3.逗号选择器
p,
.box{}
3.属性选择器
1>属性名 = 属性值
2>[type^="t"] type值以t开头的
3>直接用属性名
4>[type$="h"]选择type属性值以h结尾元素
5>type*="ma"属性包含某个字段
6>.box1+p +号代表下一个
4.伪类选择器
选择器 | 例子 | 例子描述 |
:active | a:active | 匹配被点击的链接 |
:checked | input:checked | 匹配处于选中状态的 <input> 元素 |
:disabled | input:disabled | 匹配每个被禁用的 <input> 元素 |
:empty | p:empty | 匹配任何没有子元素的 <p> 元素 |
:enabled | input:enabled | 匹配每个已启用的 <input> 元素 |
:first-child | p:first-child | 匹配父元素中的第一个子元素 <p>,<p> 必须是父元素中的第一个子元素 |
:first-of-type | p:first-of-type | 匹配父元素中的第一个 <p> 元素 |
:focus | input:focus | 匹配获得焦点的 <input> 元素 |
:hover | a:hover | 匹配鼠标悬停其上的元素 |
:in-range | input:in-range | 匹配具有指定取值范围的 <input> 元素 |
:invalid | input:invalid | 匹配所有具有无效值的 <input> 元素 |
:lang(language) | p:lang(it) | 匹配每个 lang 属性值以 "it" 开头的 <p> 元素 |
:last-child | p:last-child | 匹配父元素中的最后一个子元素 <p>, <p> 必须是父元素中的最后一个子元素 |
:last-of-type | p:last-of-type | 匹配父元素中的最后一个 <p> 元素 |
:link | a:link | 匹配所有未被访问的链接 |
:not(selector) | :not(p) | 匹配每个非 <p> 元素的元素 |
:nth-child(n) | p:nth-child(2) | 匹配父元素中的第二个子元素 <p> |
:nth-last-child(n) | p:nth-last-child(2) | 匹配父元素的倒数第二个子元素 <p> |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 匹配父元素的倒数第二个子元素 <p> |
:nth-of-type(n) | p:nth-of-type(2) | 匹配父元素的第二个子元素 <p> |
:only-of-type | p:only-of-type | 匹配父元素中唯一的 <p> 元素 |
:only-child | p:only-child | 匹配父元素中唯一的子元素 <p> |
:optional | input:optional | 匹配不带 "required" 属性的 <input> 元素 |
:out-of-range | input:out-of-range | 匹配值在指定范围之外的 <input> 元素 |
:read-only | input:read-only | 匹配指定了 "readonly" 属性的 <input> 元素 |
:read-write | input:read-write | 匹配不带 "readonly" 属性的 <input> 元素 |
:required | input:required | 匹配指定了 "required" 属性的 <input> 元素 |
:root | root | 匹配元素的根元素,在 HTML 中,根元素永远是 HTML |
:target | #news:target | 匹配当前活动的 #news 元素(单击包含该锚名称的 URL) |
:valid | input:valid | 匹配所有具有有效值的 <input> 元素 |
:visited | a:visited | 匹配所有已经访问过的链接 |
5.伪元素选择器
伪元素 | 例子 | 例子描述 |
::after | p::after | 在每个 <p> 元素之后插入内容 |
::before | p::before | 在每个 <p> 元素之前插入内容 |
::first-letter | p::first-letter | 匹配每个 <p> 元素中内容的首字母 |
::first-line | p::first-line | 匹配每个 <p> 元素中内容的首行 |
::selection | p::selection | 匹配用户选择的元素部分 |
::placeholder | input::placeholder | 匹配每个表单输入框(例如 <input>)的 placeholder 属性 |
三.样式
1.边框弧度
border 是边框属性的简写属性。
CSS border 属性用于指定元素边框的样式、宽度和颜色。
可以设置的属性分别(按顺序):border-width, border-style 和 border-color。
也可以只设置一个值,例如 border:#FF0000; 是正确的,其他值会设置成对应属性的初始值。
指定边框的宽度 | |
指定边框的样式 | |
指定边框的颜色 | |
border-radius | 弧度 |
2.颜色
color: #ad1878
color: rgb(red, green, blue)
3.透明度
opacity: 0.4
Color:rgba(200, 100, 100, 0.5)
4.鼠标样式
cursor: pointer;
5.文字样式
font-size: 50px; 大小
font-family: 'Courier New', Courier, monospace; 字体
font-weight: 800; 粗细
font-style: italic; 样式
6.文本样式
Color 修改颜色
text-align 文本对齐方式
line-height 设置行高
text-decoration 修饰
text-indent 缩进文本首行
7.背景
background-image:url()引入图片
background-repeat 图片是否平铺
background-attachment:控制背景图是否滚动
background-size:背景图片大小
background-size: cover 覆盖
background-position:定位