2021寒假第一周学习总结

最新推荐文章于 2022-11-18 09:11:31 发布

不要香菜葱花

最新推荐文章于 2022-11-18 09:11:31 发布

阅读量331

点赞数

分类专栏：学习总结

本文链接：https://blog.csdn.net/dhhka/article/details/112941749

版权

学习总结专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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。

HTML媒体

插入音频

<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;}

在这里插入图片描述

不要香菜葱花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录