HTML、CSS础入门学习详解

最新推荐文章于 2022-10-20 14:51:15 发布

进阶日记

最新推荐文章于 2022-10-20 14:51:15 发布

阅读量394

点赞数

分类专栏： HTML 文章标签： html html5 前端 css css3

本文链接：https://blog.csdn.net/qq_47824967/article/details/119332910

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML、CSS基础入门

HTML和CSS

什么是HTML

它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名（扩展名）

HTML5文件样式

<!-- 文档头信息 -->
<!-- html5标准网页声明 -->
<!-- 不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。 -->
<!-- h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边。
    如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明
-->
<!DOCTYPE html>
<!-- 属性lang是单词language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 -->
<!-- 
	html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中
-->
<!-- 只有两个子标签 head:浏览器设置 body：可视区展示 -->
<html lang="en">
<!-- head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的 -->
<head>
  <!--
				meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
        meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/ 
  -->
  <!-- 
        字符编码，浏览器会根据字符编码进行解析
        常见的字符编码有：gb2312、gbk、unicode、utf-8。
  -->
  <meta charset="UTF-8">
  <!-- 
        viewport 设备的屏幕
        width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，				 那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
        initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
     -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 浏览器选项卡上的名字 -->
  <title>Hello HTML</title>
</head>
<!--
	body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
-->
<body>
  <!-- 在body里的内容都是显示在浏览器的视图区的 -->
  <!-- 
    	在这个结构中，可以来编写HTML的注释注释中的内容，不会在页面中显示，但是可以在源码中查看我们可以通			过编写注释来对代码进行描述，从而帮助其他的开发人员工作,一定要养成良好的编写注释的习惯，但是注释一			 定要简单明了		
    -->
</body>
</html>

HTML4的文档头信息

严格的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

宽松的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

HTML5的文档头信息

<!DOCTYPE html>

html标签

与标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中

头部标签

表示html的头部，head内部标签主要用于设置或者导入外部文件，一般不直接显示在浏览器视口中，常用的子标签为 meta 、title、link、script，分别表示元信息设定、文档标题、css、js

<head></head>

编码格式

常见编码：

utf-8 万国码

GBK 国标码

Big5 繁体字

浏览器标题

<title>标题</title>

css引入

推荐外部引入和内联样式写在head标签内，便于浏览器解析

1.外部引入css文件

<link rel="stylesheet" href="css文件地址">

2.内联样式

  <style>css样式编写区</style>

3.行内样式

<div style="css代码"></div>

4.使用@import url()引入

<style>@import url("css文件地址")</style>

JavaScript引入

1.外部引入js文件

  <script src="js文件地址"></script>

2.内部编写

<script>
	js代码编写区
</script>

body标签

body 元素包含文档的所有内容

<body>
    网页主题内容区
</body>

HTML常用标签元素

块级元素

1. 比较霸道，自己独占一行
2. 高度，宽度、外边距以及内边距都可以控制。
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素。

如html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address等

行内元素

总是和相邻的行内元素在同一行上（物以类聚）
设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
默认宽度是他自身内容的宽度。
行内元素只能容纳其他行内元素或者文本。0

如span、a、img、strong、b、i、em、sub、sup…

行内块级元素

和相邻行内块级元素在同一行。
默认宽、高为其内容的宽、高。
可以设置宽、高、行高、内外边距。

如button,input，textarea,select

标签属性

id属性给标签一个类似身份证的标识
```
<div id="mydiv"></div>
```

class属性可以给多个标签统一标识

<div class="teamdiv"></div>
<div class="teamdiv"></div>

title属性提示标签

鼠标放在对应标签上会给出一个提示
```
<div title='我是一个div'>div标签</div>
```

常用标签元素介绍

元素	作用	已有CSS效果
div	无意义的块级元素
h1~h3	标题标题	margin font-size font-weight
p	段落	margin
ul,li	无序列表	margin padding list-style
ol,li	有序列表	margin padding list-style
dl,dt,dd	定义列表	dl - margin dd - margin
html
body		margin
header	H5新增的语义化标签`<br>`(样式与div类似)	`<div class="header"></div>`
footer		`<div class="footer"></div>`
nav		`<div class="nav"></div>`
article		`<div class="article"></div>`
section		`<div class="section"></div>`
aside		`<div class="aside"></div>`
address		`<div class="address"></div>`
a	页面的点击跳转	`<a href="链接地址"></a>`
img	图片标签	`<img src="图片地址"></img>`
span	无意义的行内元素	`<span></span>`
br	换行标签	`<br>`
button	按钮标签	`<button>按钮名称</button>`
input	根据不同的 type 属性值，输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等很多种形式	`<input type="text" >`
base	设置整个页面点击事件的跳转方式	`<base target="_blank">`
form	表单标签
table	表格标签
thead	表格头标签
tbody	表格体标签
th	表头单元格
tr	标准单元格–行
td	标准单元–列
tfoot	表格脚标签

表格讲解示例

<table border="1">
    <!--- border="1"为边框大小为1 --->
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

img标签讲解

img标签自带的属性

src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径）
alt:可以用来设置在图片不能显示的时，对图片的描述
width:设置图片的宽度
height:设置图片的高度
title：用于告诉浏览器，鼠标悬停的时候，需要弹出的描述框中显示什么内容。

  <img src="图片链接地址" alt="图片加载不出的提示" title="鼠标悬停的提示" width="宽" height="高" >

a标签讲解

a标签的作用用于控制页面与页面之间跳转的
a标签的格式

<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>
<!--- 根据描点跳转 --->
<a href="#元素id名"></a><!--- 本页根据id跳转 --->
<a href="页面链接#元素id名"></a><!--- 跨页根据id跳转 --->

a标签中target属性专门用于控制如何跳转
self:用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self
_blank:用于在新的选项卡中进行跳转，也就是新建页面跳转
a标签也有一个title属性，效果和img标签的title类似

注意点:
1.a标签不仅可以让文字点击，也可以让图片被点击

  <a href="https://www.baidu.com"><img src="https://img2.baidu.com/it/u=718703975,3304338114&fm=26&fmt=auto&gp=0.jpg " alt="这是一张图片"  width="200px"></a>

2.一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方
3.如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https://
除了URL地址，还可以指定一个本地地址

input标签讲解

input标签最主要的就是type类型的设置，设置对于的值就会生成对应的内容

button
checkbox
file
hidden
image
password
radio
reset
submit
text

<input type="button">会生成一个按钮
<input type="text">文本输入框
<input type="checkbox">多选框
<input type="submit">提交按钮
<input type="reset">重置按钮

实体符号对应代码

由于html代码多个符号直接编写可能会产生冲突，所以用代码来代替实体符号

显示结果	描述	实体名称	实体编号
	空格	&nbsp	&#160
<	小于号	&lt	&#60
>	大于号	&gt	&#62
&	和号	&amp	&#38
"	引号	&quot	&#34
’	撇号	&apos (IE不支持)	&#39
￠	分（cent）	&cent	&#162
£	镑（pound）	&pound	&#163
¥	元（yen）	&yen	&#165
€	欧元（euro）	&euro	&#8364
§	小节	&sect	&#167
©	版权（copyright）	&copy	&#169
®	注册商标	&reg	&#174
™	商标	&trade	&#8482
×	乘号	&times	&#215
÷	除号	&divide	&#247

CSS基础入门

1. CSS选择器

标签选择器

标签名称{
属性:值;
}
```
div{
	color:red;
}
```

id选择器

#id名称{
属性:值;
}

#div1{
	color:red;
}
<div id="div1">
    div1
</div>

类选择器

.类名{
属性:值;
}

.div1{
	color:red;
}
<div class="div1">
    div1
</div>

后代选择器

标签名称1 标签名称2{
属性:值;
}

p1,p2样式都生效

#father p{
	color:red;
}
<div id="father">
      <p>p1标签</p>
      <div>
        <p>p2标签</p>
      </div>
  </div>

子类选择器

标签名称1>标签名称2{
属性:值;
}

仅有p1样式生效

#father>div{
	color:red;
}
<div id="father">
      <p>p1标签</p>
      <div>
        <p>p2标签</p>
      </div>
  </div>

兄弟选择器

选择器1+选择器2{
属性:值;
}

仅有

我是第2个段落标签

生效

.p11+p{
    background-color:red;
  }
<p class="p11">我是第1个段落标签</p>
  <p>我是第2个段落标签</p>
  <p>我是第3个段落标签</p>
  <p>我是第4个段落标签</p>

通用兄弟选择器 CSS3
格式:
选择器1~选择器2{
属性:值;
}

除了

我是第1个段落标签

的其余p标签内样式生效

  .p11~p{
    color: blue;
  }
  <p class="p11">我是第1个段落标签</p>
  <p>我是第2个段落标签</p>
  <p>我是第3个段落标签</p>
  <p>我是第4个段落标签</p>

交集选择器

选择器1选择器2{
属性: 值;
}

div.div7{
      color: violet;
    }
<div class="div7">div7</div>

并集选择器

选择器1,选择器2{
属性:值;
}

p1,p2样式都生效

.p1,.p2{
    color: steelblue;
  }
  <p class="p1">p1</p>
  <p class="p2">p2</p>

伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中
序选择器（结构伪类选择器）

同级别中的同类型使用

:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增例如(3n+1)分别对应1,4,7…
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效

p:nth-child(3n+1){
background-color: blue;
}
```
p:nth-child(3n+1){
      background-color: blue;
    }
<p class="p1">我是第2个段落标签</p>
<p>我是第3个段落标签</p>
<p>我是第4个段落标签</p>
<p>我是第5个段落标签</p>
```
2.同级别同类型中的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素的特定类型的唯一子元素
```
div:first-of-type{
      color: blue;
    }
<p>我是第1个段落标签</p>
<div>第1个div</div>
<div>第2个div</div>
<div>第3个div</div>
<div>第4个div</div>
```
注意在:first-child时最前面的如果不是当前选择的标签则不会生效，

last-child时最后的如果不是当前选择的标签则不会生效，

而在使用:first-of-type 和:last-of-type则不会有此问题
动态伪类选择器

E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover （用户行为选择器）：选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持
```
/* 给a标签设置未访问过状态下的样式 */
    a:link{
      color: red;
      text-decoration: none;
    }
    /* 已经访问过 */
    a:visited{
      color: blue;
    }
    /* 鼠标悬停 */
    a:hover{
      color: yellow;
    }
    /* 鼠标长按状态 */
    a:active{
      color: tomato;
    }
```
在给a标签设置样式时注意设置的前后顺序

否定伪类

取消class为p1的标签样式

p{
	color:red;
}
p:not(.p1){
  background-color: tomato;
}
<p>我是第1个段落标签</p>
<p class="p1">我是第2个段落标签</p>
<p>我是第3个段落标签</p>

属性选择器

[attribute=value]

input[type=text]{
	color:red;
}
<input type="text">
<input type="password">

通配符选择器

*{
属性:值;
}

常用于设置页面的
```
*{
	margin:0;
	padding:
}
```
组合选择器

多个选择器组合使用

例如 #div1 .child组合选中id为div1的后代class为.child

2.CSS的特点

1.继承性

后代会继承祖先的color/font-/text-/line-开头的属性

但a标签不能继承文字颜色和下划线

h标签不能继承文字大小

2. 层叠性

层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

3. 优先级

当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

-间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的

-相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

-不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认

优先级最高的为!important

内联样式，如: style="…"，权值为1000。
ID选择器，如：#content，权值为0100。
类，伪类、属性选择器，如.content，权值为0010。
标签选择器、伪元素选择器，如div p，权值为0001。
通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。
继承的样式没有权值

计算共同选中的标签样式的权重，样式采取权重高的那一个，如权重一样则采取后一个
1.继承性

后代会继承祖先的color/font-/text-/line-开头的属性

但a标签不能继承文字颜色和下划线

h标签不能继承文字大小