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。

  1. 插入音频
<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> 元素在老式浏览器中不起作用。

  1. 插入视频
<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>
  1. Coffee
  2. 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;}

在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值