2021寒假第一周学习总结
HTML基础
HTML标签
HTML属性
HTML 属性赋予元素意义和语境。
HTML样式
HTML 的
style属性
style属性的作用：
提供了一种改变所有 HTML 元素的样式的通用方法。
<html>
<body>
<!--background-color 属性为元素定义了背景颜色：-->
<h2 style="background-color:red">This is a heading</h2>
<!--font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体-->
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<!--text-align 属性规定了元素中文本的水平对齐方式：-->
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
插入超链接、图像与媒体
- HTML链接
点击这个超链接会把用户带到W3School的首页。
提示：“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
<a href="http://www.w3school.com.cn/">Visit W3School</a>
- HTML图像
- 图像标签（
<img>）和源属性（src）
在 HTML 中，图像由<img>标签定义。
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" />
URL 指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
- 插入音频
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
问题：
<audio>标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
<audio>元素在老式浏览器中不起作用。
- 插入视频
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
问题
您必须把视频转换为很多不同的格式。
<video>元素在老式浏览器中无效。
<video>元素无法通过 HTML 4 和 XHTML 验证。
HTML CSS
- 外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<link rel="stylesheet" type="text/css" href="mystyle.css">
- 内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
HTML列表
- 无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于<ul>标签。每个列表项始于<li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- Coffee
- Milk
- 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于<ol>标签。每个列表项始于<li>标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- Coffee
- Milk
- 定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink
HTML表格
HTML表单
CSS基础
CSS选择器
元素选择器
在 W3C 标准中，元素选择器又称为类型选择器（type selector）。
body
{
color: blue;
font-size:35px;
display: block;
}
/*选择器分组*/
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
通配选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
* {color:red;}
类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
.important {color:red;}
/*结合元素选择器*/
h1.important {color:blue;}
/*多类选择器*/
.important.urgent {background:silver;}
ID选择器
#intro {font-weight:bold;}
类选择器还是 ID 选择器？
在类选择器这一章中我们曾讲解过，可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，而且它还可以应用到更多元素。
区别 1：只能在文档中使用一次 与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
区别 2：不能使用 ID 词列表 不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
区别 3：ID 能包含更多含义 类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：
#mostImportant {color:red; background:yellow;}
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
/*对有 href 属性的锚（a 元素）应用样式：*/
a[href] {color:red;}
/*根据多个属性进行选择，只需将属性选择器链接在一起即可。*/
a[href][title] {color:red;}
后代选择器
又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
/*对 h1 元素中的 em 元素应用样式*/
h1 em {color:red;}
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
/*选择只作为 h1 元素子元素的 strong 元素*/
h1 > strong {color:red;}
/*结合后代选择器和子选择器
选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。*/
table.company td > p
兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
伪类与伪元素
伪类
CSS 伪类用于向某些选择器添加特殊的效果。
伪元素
CSS 伪元素用于向某些选择器设置特殊效果。
selector:pseudo-element {property:value;}
/*CSS 类也可以与伪元素配合使用：*/
selector.class:pseudo-element {property:value;}
扫一扫
924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
