HtML5与CSS3基础

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

HTML标签

1、<a></a> 超链接标签

属性

href:跳转页面的连接

name:实现定锚功能，跳转同一页面不同位置（例返回顶部）

target: （self, parent 以及 top 这三个值大多数时候与 iframe 一起使用。）

_blank浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self 在本页面运行链接页面（默认）。

_parent这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效

_top这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

mailto:发送邮件

2、<abbr></abbr>标签指示简称或缩写

属性

title：鼠标移到缩写内容上时，显示title信息

3、<address></address>元素中的文本通常呈现为斜体。

4、<article></article>文章标签

5、<aside></aside><aside> 的内容可用作文章的侧栏。

6、<audio></audio>插入音频

autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

7、<b></b>标签规定粗体文本。

8、<bdo></bdo>改变文字输出方向。

属性

dir

文字从左向右输出

文字从右向左输出

9、<bgsound>>是IE浏览器中设置网页背景音乐的元素。不必使用

10、<br>换行

11、<button></button>按钮

属性	值	描述
autofocus	autofocus	规定当页面加载时按钮应当自动地获得焦点。
disabled	disabled	规定应该禁用该按钮。
form	form_name	规定按钮属于一个或多个表单。
formaction	url	覆盖 form 元素的 action 属性。注释：该属性与 type="submit" 配合使用。
formenctype	见注释	覆盖 form 元素的 enctype 属性。注释：该属性与 type="submit" 配合使用。
formmethod	get post	覆盖 form 元素的 method 属性。注释：该属性与 type="submit" 配合使用。
formnovalidate	formnovalidate	覆盖 form 元素的 novalidate 属性。注释：该属性与 type="submit" 配合使用。
formtarget	_blank _self _parent _top framename	覆盖 form 元素的 target 属性。注释：该属性与 type="submit" 配合使用。
name	button_name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
value	text	规定按钮的初始值。可由脚本进行修改。

12、<canvas></canvas>

<canvas> 标签定义图形，比如图表和其他图像。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

13、<datalist></datalist>输入框的提示内容

14、<video></video>

CSS3操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 520px;
height: auto;
margin: 100px auto;
}
li{
float: left;
height: 70px;
width: 70px;
border: 1px solid #000;
margin-left: -1px;
margin-top: -1px;
text-align: center;
line-height: 70px;
}
/* 选择li的第一个元素 */
li:first-child{
background-color: yellow;
}
/* 选择li的最后一个元素 */
li:last-child{
background-color: yellow;
}
/* 选择li的第11个元素 */
li:nth-child(11){
background-color: yellow;
}
/* 选择li的第奇数元素 */
li:nth-child(odd){
background-color: blue;
}
/* 选择li的第偶数元素 */
li:nth-child(even){
background-color: blue;
}
/* 选择li的前五个元素 */
li:nth-child(-n+5){
background-color: red;
}
/* 选择li的后五个元素 */
li:nth-last-child(-n+5){
background-color: red;
}
/* 选择li的7的倍数元素 */
li:nth-child(7n){
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
</body>
</html>