HTML&CSS学习笔记

目录

注：将自己学到的记下来，不要嫌少，内容会持续更新。

web前端基础的三件套：HTML，CSS，Javascript。

个人理解：HTML就相当于框架，CSS则是装饰，Javascript是执行动作。

HTML

HTML是什么？

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML基本结构

<!DOCTYPE html>			   <!-- 声明是HTML文档类型 -->
<html>                             <!-- ----根控制标记 -->
    <head>                         <!--  ---头控制标记 -->
        <title>这是标题</title>     <!-- ----标题标记 -->
    </head>                        <!-- ----头控制标记 -->
    <body>
                                   <!-- ---- 我是Body！！！-->
    </body>
</html>                            <!-- ----根控制标记 -->

head部分常用的标签

<title>、<base>、<link>、<meta>、<script> 以及 <style>

title

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题

meta

  • 文档描述【网站在搜索时，进行描述。】

    • <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。">

  • 文档关键词【网站在搜索时，进行关键字匹配】

    • <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部">

  • 重定向【页面重定向】

    • <meta http-equiv="Refresh"content="2;URL=https://www.baidu.com">

link用于导入css

  • <link rel="stylesheet" type="text/css" href="mystyle.css" />

script用于导入js

  • <script type="text/javascript">document.write("Hello World!")</script>

style用于定义css

<style>
p {
    background-color:red;
    font-size:15px;
    }
</style>

base:定义页面上所有链接的默认地址或默认目标.

<base href="http://www.w3school.com.cn/i/" />
<img src="eg_smile.gif" /><br /> #引入图片时，会和base进行拼接后再查找图片。

body部分常用的标签

常用标签:

<h1~h6>:从大到小. 表示标题.
    
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
    
<b> <strong>: 加粗标签.
    
<strike>: 为文字加上一条中线.
    
<em>: 文字变成斜体.
    
<sup>和<sub>: 上角标 和 下角表.
    
<br/>:换行. 单标签
    
<hr>:水平线
    
<div> :块，主要用于布局
    
<span>：内联标签

块级标签特点：

① 占一整行，新增元素新起一行；
② 高度，行高以及外边距和内边距都可调整；
③ 宽度缺省是它的容器的100%，除非设定一个宽度，一般都是占满一行。
④ 它可以容纳内联元素和其他块元素

内联标签特点：

① 和其他元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其他内联元素

注：设置宽度无效，高度可以通过line-height来设置，设置margin只有左右margin有效，上下无效。-padding同上，注意元素范围是增大了，但是对元素周围的内容是没影响的。

图形标签:

<img>

  • src: 要显示图片的路径.
  • alt: 图片没有加载成功时的提示.
  • title: 鼠标悬浮时的提示信息.
  • 图片的宽
  • height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

超链接标签:

<a>

  • href:要连接的资源路径 格式如下: href="http://www.baidu.com"
  • target: _blank : 在新的窗口打开超链接. _self：在当前窗口打开
  • name: 定义一个页面的书签.
  • 锚点跳转 href : #love就会跳转到id="love"的地方
  • href设置成javascript: 时，不会进行任何操作

注意：target设置为_blank时，会打开一个新页签。设置为#时，在本页，相当于刷新页面。

超链接标签默认是有下划线的，可以用a{ text-decoration:none; }去掉下划线。

列表标签:

<ul><ol><dl>

  • <ul>: 无序列表
  • <ol>:有序列表
  • <li>:列表中的每一项.
  • <dl> 定义列表
  • <dt> 列表标题
  • <dd> 列表项

注意：

ul：type 有：circle 空心圆，disc 实心圆，square 实心正方形， none ：前面无符号;
ol：type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：罗马数字i,ii,iii；虽然还可以定义为：circle、disc、square、none但现实都为1,2,3等序列；

等等，太多了写不完的，大家在需要用到的时候可以查一查顺手给记下！

CSS

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS组成：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

pic_b28166db.png

行内样式

标记的style属性中设定css样式，不推荐大规模使用。

<p style="color: red">Hello world.</p>

内部样式

将css样式集中写在网页的<head></head>标签对的<style></style>标签对中。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS选择器

基本选择器

元素选择器

p {color: "red";}

ID选择器

#i1 {
  background-color: red;
}

类选择器

.c1 {
  font-size: 14px;
}p.c1 {  color: red;}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

通用选择器

* {
  color: white;
}

组合选择器

交集选择器

/*由两个选择器组合，其中一个为标签选择器，另一个为类选择器或ID选择器。两个选择器之间不能有空格*/
标签选择器.类选择器|ID选择器 
{
  属性1：属性值1；
  ....
}

后代选择器

/*li内部的a标签设置字体颜色, 后代选择器有空格！可以有多个标签，用空格隔开。*/
li a {
  color: green;
}

儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

相邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

兄弟选择器

/*i1后面所有的兄弟p标签，兄弟标签也就是同级的标签*/
#i1~p {
  border: 2px solid royalblue;
}

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

/*注：比较少用！*/

分组和嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div, p {
  color: red;
}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:

div,
p {
  color: red;
}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {
  color: red;
}

伪类选择器

伪类可以在目标元素出现某种特殊的状态时应用样式**，例如：状态可以是鼠标指针停留在某个标签上，或者访问一个超链接。

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;}

选择器的优先级

CSS继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
  color: red;
}

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {
  color: green;
}

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

选择器的优先级

我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

pic_cbabf526.png

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

万不得已可以使用!important

推荐一个HTML&CSS全面语法教程链接：
HTML：https://www.w3cschool.cn/html/
CSS：https://www.w3cschool.cn/css/

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hustshu/p/15232512.html