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 |
如果出现该属性，则音频在就绪后马上播放。 |
|
|
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
|
|
loop |
如果出现该属性，则每当音频结束时重新开始播放。 |
|
|
muted |
规定视频输出应该被静音。 |
|
|
preload |
如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
|
|
url |
要播放的音频的 URL。 |
7、<b></b>标签规定粗体文本。
8、<bdo></bdo>改变文字输出方向。
属性
|
dir |
|
文字从左向右输出 文字从右向左输出 |
9、<bgsound>>是IE浏览器中设置网页背景音乐的元素。不必使用
10、<br>换行
11、<button></button>按钮
|
属性 |
值 |
描述 |
|
autofocus |
规定当页面加载时按钮应当自动地获得焦点。 |
|
|
disabled |
规定应该禁用该按钮。 |
|
|
form_name |
规定按钮属于一个或多个表单。 |
|
|
url |
覆盖 form 元素的 action 属性。 注释：该属性与 type="submit" 配合使用。 |
|
|
见注释 |
覆盖 form 元素的 enctype 属性。 注释：该属性与 type="submit" 配合使用。 |
|
|
覆盖 form 元素的 method 属性。 注释：该属性与 type="submit" 配合使用。 |
|
|
formnovalidate |
覆盖 form 元素的 novalidate 属性。 注释：该属性与 type="submit" 配合使用。 |
|
|
覆盖 form 元素的 target 属性。 注释：该属性与 type="submit" 配合使用。 |
|
|
button_name |
规定按钮的名称。 |
|
|
规定按钮的类型。 |
|
|
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>
HtML5与CSS3基础的更多相关文章
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
- HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
- HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
- 【02】HTML5与CSS3基础教程（第8版）（全）
[02]HTML5与CSS3基础教程(第8版)(全) 共392页. (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完. [美]elizabeth cast ...
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
- HTML5和CSS3基础教程(第8版）-读书笔记(3)
第11章 用CSS 进行布局 网站设计主要有两大类型:固定宽度和响应式. 对于固定(fixed)布局,整个页面和每一栏都有基于像素的宽度.顾名思义,无论是使用移动电话和平板电脑等较小的设备查看页面,还 ...
- HTML5和CSS3基础教程(第8版）-读书笔记(2)
第7章 CSS构造模块 7.1 构造样式规则 样式表中包含了定义网页外观的规则.样式表中的每条规则都有两个主要部分:选 择 器(selector) 和 声 明 块(declaration block) ...
- 《HTML5与CSS3基础教程》笔记
以下笔记摘要页码基于 人民邮电出版社 2013年1月第1版 英文书名:HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition) 前言 P2: 渐进增 ...
- HTML5和CSS3基础教程(第8版）-读书笔记(4)
第16章 表单 表单有两个基本组成部分:访问者在页面上可以看见并填写的控件.标签和按钮的集合:以及用于获取信息并将其转化为可以读取或计算的格式的处理脚本. 基本的表单字段类型包括文本框.单选按钮.复选 ...
- HTML5和CSS3基础教程(第8版）-读书笔记
第1章 网页的构造块 一个网页主要包括以下三个部分: n 文本内容(text content):在页面上让访问者了解页面内容的纯文字. n 对其他文件的引用(referen ...
随机推荐
- 【鸽】poj3311 Hie with the Pie[状压DP+Floyd]
题解网上一搜一大坨的,不用复述了吧. 只是觉得网上dp方程没多大问题,但是状态的表示含义模糊.不同于正常哈密顿路径求解,状态表示应当改一下. 首先定义一次移动为从一个点经过若干个点到达另一个点,则$f ...
- 关于enter事件的触发
如果您使用了antd的Button组件,那么恭喜已经封装好了,只要加上htmlType='submit', 如果没有使用其他框架,使用onPress或者onKeydown事件,判断e.keycode ...
- 【leetcode】1268. Search Suggestions System
题目如下: Given an array of strings products and a string searchWord. We want to design a system that su ...
- ProGuard的作用、使用及bug分析（转载）
ProGuard的作用.使用及bug分析 本文主要ProGuard的作用.使用及bug分析.1.ProGuard作用ProGuard通过删除无用代码,将代码中类名.方法名.属性名用晦涩难懂的名称重命名 ...
- Rust学习-阶段1学习总结
学习Rust已经两周了,基本上是断断续续的在学,或者是在上下班坐公交时,或者是在ODC没事做时.现在已经学习了Rust程序设计语言的前5章,是时候做一个总结了.关于数据类型或者if else这种内容我 ...
- vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式
// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...
- k8b部署prometheus+grafana
来源: https://juejin.im/post/5c36054251882525a50bbdf0 https://github.com/redhatxl/k8s-prometheus-grafa ...
- [深度学习] pytorch学习笔记（3）(visdom可视化、正则化、动量、学习率衰减、BN)
一.visdom可视化工具 安装:pip install visdom 启动:命令行直接运行visdom 打开WEB:在浏览器使用http://localhost:8097打开visdom界面 二.使 ...
- 红黑树（RB-tree）比AVL树的优势在哪？
1. 如果插入一个node引起了树的不平衡,AVL和RB-Tree都是最多只需要2次旋转操作,即两者都是O(1):但是在删除node引起树的不平衡时,最坏情况下,AVL需要维护从被删node到root ...
- 运行时错误：“stack around the variable…was corrupted”
造冰箱的大熊猫@cnblogs 2018/11/1 引发问题的代码片段如下 WORD var; scanf ( "%d", &var ); 包含上述代码的程序,编译正常,运 ...