html5 css3基础,HtML5与CSS3基础-优快云博客

本文详细介绍了HTML中各种标签的用途，包括超链接的属性、文本样式、文章结构、音频处理以及按钮和图像元素的用法。同时，探讨了CSS3的选择器应用，如对列表项的样式控制，展示了如何通过CSS实现复杂布局和交互效果。

HTML标签

1、超链接标签

属性

href:跳转页面的连接

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

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

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

_self 在本页面运行链接页面(默认)。

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

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

mailto:发送邮件

2、标签指示简称或缩写

属性

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

3、

元素中的文本通常呈现为斜体。

4、文章标签

5、的内容可用作文章的侧栏。

6、插入音频

autoplay

如果出现该属性，则音频在就绪后马上播放。

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

loop

如果出现该属性，则每当音频结束时重新开始播放。

muted

规定视频输出应该被静音。

preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

url

要播放的音频的 URL。

7、标签规定粗体文本。

8、改变文字输出方向。

属性

dir

ltr

rtl

文字从左向右输出

文字从右向左输出

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

10、
换行

11、按钮

属性

值

描述

autofocus

规定当页面加载时按钮应当自动地获得焦点。

disabled

规定应该禁用该按钮。

form_name

规定按钮属于一个或多个表单。

url

覆盖 form 元素的 action 属性。

注释：该属性与 type="submit" 配合使用。

见注释

覆盖 form 元素的 enctype 属性。

注释：该属性与 type="submit" 配合使用。

get

post

覆盖 form 元素的 method 属性。

注释：该属性与 type="submit" 配合使用。

formnovalidate

覆盖 form 元素的 novalidate 属性。

注释：该属性与 type="submit" 配合使用。

_blank

_self

_parent

_top

framename

覆盖 form 元素的 target 属性。

注释：该属性与 type="submit" 配合使用。

button_name

规定按钮的名称。

button

reset

submit

规定按钮的类型。

text

规定按钮的初始值。可由脚本进行修改。

12、

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

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

13、输入框的提示内容

14、

CSS3操作

Document

margin: 0;

padding: 0;

list-style: none;

}

ul{

520px;

height: auto;

margin: 100px auto;

}

li{

float: left;

height: 70px;

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;

}