HTML 和 CSS 学习总结

前言

通过本次web应用基础课程，加上我之前自学的相关内容，我了解并且学到了很多的前端的知识，在此，我将对我所学到的HTML&CSS进行知识的总结

一、HTML是什么？
HTML（Hypertext Markup Language）翻译过来就是 超文本标记语言.
是一种用于创建网页的标准标记语言。超文本即超越文本，可以显示 文字 图片 视频 音频，最重要的是可以包含超链接。

标记语言：当我们把特定的英文单词放入到我们的标记（单标记:</>、双标记<></>）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。

当我们将英语单词放入到标记当中，这时候我们可以称之为 标签（单标签、双标签）。

二、HTML具体知识总结
关于开发的软件平台，我的选择是vscode。

1.HTML页面的基本结构

打开vscode，建立一个后缀为.html的文件，通过快捷指令可以直接生成页面的基本结构

 

2.HTML的常用标签

通过本学期的学习加实践，我常用的HTML标签如下(HTML标签不区分大小写，不同标签有各自属性的用法)：

1.常用的单标签

<br> 简单的换行符

<hr> 水平线分割线

图像标签，导入图片时，使用其src属性
<img src="./demo.jpg"  alt="这里将会有一张图片" >

 表单输入控件，下面是一个表单输入框
 <input type="text" name="name" >

 定义文档与外部资源的关系，例如引入css样式
<link rel="stylesheet" type="text/css" href="demo.css" />

2.常用的双标签：
<h1>一级标题，共有六级不同的标题</h1>

<P>P是段落标签</P>

<strong>加粗</strong>

<strong>斜体</strong>

表格标签，用于展示数据
<table border="1px" cellspacing="0" height="50px" width="100px">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

超链接标签
<a href="https://www.baidu.com/" target="_blank">转到百度！</a>

<ul>
      <li>无序列表</li>
      <li>无序列表</li>
      <li>无序列表</li>
      <li>无序列表</li>
      <li>无序列表</li>
 </ul>
<ol>
      <li>有序列表</li>
      <li>有序列表</li>
      <li>有序列表</li>
      <li>有序列表</li>
      <li>有序列表</li>
 </ol>
<button>按钮标签</button>

表单标签，发送表单时的规范写法
<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

二.何为 CSS
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

1.CSS 语法
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明。
而选择器有两种：id 选择器和class 选择器。
css样式规则生效方式有三种：外部样式表，内部样式表，内联样式。
①外部样式表

创建一个.css文件，在html中的head标签里，使用link引入

<link rel="stylesheet" href="my.css"/>

rel=“stylesheet”，代表当前文件和引入文件的关系

②内部样式  

在head标签中，编写style标签，在style标签内部，编写属性
选择器{样式声明;样式声明…}
选择器：定义页面中使用这个样式的元素条件  

p{

color:purple;

background-color: pink;

}    

③行内样式，内联样式

  在元素中，写style属性，在style属性中编写样式
  <元素 style="样式声明;样式声明....."></元素>

<p style="color:red;background-color:yellow;font-size: 50px;">

2.基础选择器
选择器，规范了页面中哪些元素能够使用当前设置的样式
就是一个条件，符合这个条件的元素都可以使用这个样式

1.通用选择器
{样式声明} （匹配所有元素，但是的效率非常低，不建议使用）
例：*{margin:0；padding:0}

2.元素选择器
标签关键字{样式声明;}
div{} p{}

3.ID选择器
<元素 id=“id值”>
#id值{样式声明}
id在一个页面中不能重复，所有id选择器只被一个元素应用

4.类选择器
使用.定义样式，哪个元素想用，用class都能调用
<元素 class=“类名”>
.类名{样式声明}

类选择器的其它用法
①.多类选择器
<元素 class="类名1 类名2 类名3.......">

②.分类选择器
元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
.tooltip.show{}

③.类名的定义规范
  ①必须有.
  ②不能以数字开头
  ③只能包含- 或者_
 v④尽量见名知意

5.群组选择器
选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}

6.后代选择器
通过元素的后代关系，来匹配元素
后代关系：一层嵌套或者多于一层嵌套称为后代
选择器1 选择器2 选择器3{样式声明}

7.子代选择器
通过元素子代关系，来匹配元素
子代关系，一层嵌套为子代
选择器1>选择器2>选择器3{样式声明}
子代和后代选择器可以混合使用
#d1>p span{color:red;}

8.伪类选择器
匹配元素在某一个状态时的样式
只适用于a标签的伪类
①未被访问:link a:link{color:red}
②已被访问:visited a:visited{color:green}
所有元素都能用的伪类
:hover 鼠标悬停的状态
:active 激活状态
:focus 元素获取焦点时的状态（input button）

9. 选择器权值
  选择器权值，代表选择器的重要程度
  重要程度高，优先显示
  !import >1000
  内联样式 1000
  id选择器 100
  类选择器 10
  伪类选择器 10
  元素选择器 1
  通用选择器 0
  继承的样式 无
权值的特点

当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加值最大的显示
有多个选择器的权值一样大，按照就近原则
添加了!important当前css样式直接获取最高优先级
群组选择器，不相加，个算个的
选择器权值的计算，不会超过本选择器权值的最大数量级