HTML+CSS初步

qq_52772066

已于 2022-07-24 14:35:53 修改

阅读量172

点赞数

文章标签： html css 前端

于 2022-07-20 13:15:23 首次发布

本文链接：https://blog.csdn.net/qq_52772066/article/details/125857249

版权

文章目录

0.简介

1.什么是HTML、CSS?
网站的编程语言
浏览器把代码解析后就是我们看到的网站
Chrome浏览器
市场份额较大

深入网站开发
UI设计师：设计稿
web前端开发工程师（H5开发）
设计稿 -> 代码
数据库里的数据 -> 显示到页面
HTML+CSS
HTML:结构
CSS:样式
web前端的三大核心技术
HTML:结构
CSS：样式
JavaScript：行为

web后端

web前端的三大核心技术
HTML:结构
CSS：样式
JavaScript：行为

HTML

1.HTML基本结构和属性

HTML：超文本标记语言

超文本：文本内容+非文本内容（图片、视频、音频）
标记：<单词>
标签手册：https://www.w3school.com.cn/tags/index.asp
单标签和双标签
标签可以嵌套
标签的属性：来修饰标签的，设置当前标签的一些功能
<标签属性=“值” 属性2=“值”>
语言：编程语言

2.HTML初始代码

每个.html文件都有的代码

<!DOCTYPE html> 文档声明：告诉浏览器这个是一个html文件
<html lang="en"> lang="en"表示是一个英文网站lang="zh-CN"表示一个中文网站
	<head>
		<meta charset="utf-8"> 		元信息：是编写网页中的一些赋值
		<title>开开的网页</title>		设置网页的标题
	</head>
	<body>
		网页内容的显示区域
	</body>
</html>

3.HTML注释

写法：
//把暂时不需要的代码注释起来方便以后使用、对开发人员进行提示
快捷添加注释与删除注释：1. ctrl+/
2.shift + alt + a

4.HTML语义化

HTML语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。

好处:

在没有CSS的情况下，页面也能呈现出很好的内容结构。
有利于SEO，让搜索引擎爬虫更好的理解网页。
方便其他设备解析（如屏幕阅读器、盲人阅读器等)。4.便于团队开发与维护。

5.标题与段落

标题

页面标题双标签-> :

（最大的/最重要的，一个.html页面中之恩有一个h1标签）...

标签
双标签
这是一个自然段

6.文本修饰标签

强掉----> 这个文字会被加粗强调//strong强调更强
这个文字会被斜体显示
上标 —> a²+b²=c²//勾股定理
下标----> H₂O 水的化学式
删除 ~~这个文字会被划掉~~
插入这个文字会被加入下划线

7.图片标签

src:引入图片地址 alt：当图片出现问题时显示一段提示文字 title：当鼠标移到上面时会有提示信息 width、height：图片的大小 ### 8.引入文件地址

相对路径
在路径中表示当前路径…在路径中表示上一级路径
绝对路径
E:/ke/qf dI201901/20190108/img/animal/dog.jpg
http://cms-bucket.ws.126.net/2019/04/16/7a5b31eOce5474a7515.jpeg

9.跳转链接

标签

放在head里面可实现target ="_blank"

<a href = " www.baidu.com">这是一个链接</a>
<a href = " www.baidu.com">
	<img src = "./img/skk/66.jpg" alt = " ">
</a>
<a href = " www.baidu.com" target ="_blank">这是一个链接</a>//从新的页面打开网页

10.跳转锚点

实现一：#+id属性
实现二：#+name属性

11.特殊符号

</p> 
&lt;html&gt;//<html>
hello&nbsp;world //hello world
</p>

在这里插入图片描述

12.列表标签

12.1 无序列表

—>符合嵌套

<ul>
	这个里面不能有其他标签
	<li>第一项</li>
	<li>第二</li>
</ul>

type属性

<ul type="circle ">//空心圆
	//disc 实心圆（默认）
	//square 实心方块
	这个里面不能有其他标签
	<li>第一项</li>
	<li>第二</li>
</ul>

12.2有序列表

<ol>
	<li>1111</li>
	<li>222</li>
</ol>

type 属性

1:默认值。数字有序列表（1、2、3、4)
a:小写英文字母(a、b、c、d)
A:大写英文字母(A、B、C、D)
i:小写罗马字母(i、ii、iii、iv)
I:大写罗马字母(Ⅰ、Ⅱ、Ⅲ、IV)

<ol type ="1">//默认
	<li>1111</li>
	<li>222</li>
</ol>

12.3定义列表

:定义列表
:定义专业术语或名册
:对名词进行解释和描述

       <dl>
            <dt>HTML</dt>
            <dd>超文本标记语言</dd>
            <dt>CSS</dt>
            <dd>层叠样式表</dd>
            <dt>JavaScript</dt>
            <dd>网页脚本语言</dd>
        </dl>

运行结果：
在这里插入图片描述

12.4嵌套列表

列表之间可相互嵌套

	<dl>
		<dt>中国</dt><dd>
		<dl>
		<dt>辽宁省</dt><dd>沈阳</dd><dd>大连</dd><dd>丹东</dd></dl>
		<dl>
		<dt>山东省</dt><dd>济南</dd><dd>青岛</dd><dd>烟台</dd></dl>
		</dd>
		<dt>美国</dt><dd>
		<dl>洛杉矶</dd><dd>纽约</dd>
		</dl>

在这里插入图片描述

13.表格标签

基本标签

<table> :表格的最外层容器
<tr> :定义表格行
<th> :定义表头
<td> :定义表格单元
<caption>:定义表格标题

语义化标签

<tHead>//表头只能一个
<tBody>//可多个
<tFoot>//表尾只能一个
//在网页中不显示

13.1表格属性

border :表格边框（table标签内）
cellpadding :单元格内的空间（table标签内）
cellspacing :单元格之间的空间（table标签内）
rowspan :合并行（td标签内）
colspan :合并列（th标签内）
align :左右对齐方式（tr标签内）//left、center、right
valign :上下对齐方式（tr标签内）//top、middle、bottom

14.表单标签

14.1 input标签

:表单的最外层容器属性: action:提交页面的地址
<input type=""> ->单标签:用于搜集用户信息，根据不同的type属性值，展示不同的控件

type属性
在这里插入图片描述

type属性	标签含义
placeholder	一般是用来提示用户输入，输入后会被覆盖原始内容
checked	首次加载时被选中
disabled	禁用一个表单元素

14.2 表单元素

多行文本输入
、下拉菜单
属性
1. selected 默认被选中
1. size 显示数量
1. multiple 可多选
1. 辅助菜单，可扩大鼠标选中的范围

15.`<div>`与`<span>`

div(块）∶
div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span(内联）∶
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。

16.拓展：请求

浏览器使用的是http协议，
请求分为两种，get、post
get：主要用来做表单提交等工作，允许请求的数据量小（2048字符），明文，跟在请求地址后面，
以 ?..=…&…=… 格式表示

http://127.0.0.1:8848/demo0720/formAction.html?username=root&psw=123456 请求的服务器ip地址及端口：127.0.0.1:8848 请求的完整路径：http://127.0.0.1:8848/demo0720/formAction.html get携带的数据：?username=root&psw=123456

post：大小没有具体限制
web程序常见的请求：form表单请求、Ajax请求（不需要刷新网页）

CSS

1.基本语法

选择器{属性1：值1；属性2：值2}
长度单位：px像素；%百分比

<style>
 div{width:100px;height:100px:background-color:red}//一个红色的方块
</style>

2.内联样式和内部样式

2.1内联样式

通过style 属性

<div style = "width:100px;height:100px:background-color:red">这是一个块 </div>

2.2内部样式

通过style标签

<style>
div{ width: 100px;height: 100px; background-color : red }</style>

<body>
<div>这是一个块</div>
</body>
优点可以复用代码
符合W3C标准样式和代码分开

2.3外部样式

<link>标签
rel//指定属性资源页面关系
href//属性资源的地址
在外部写一个CSS文件然后用link引入样式
@import
这种方法存在很多问题，不建议使用

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href=" . / common . css "> --><title>Document</title>
<style>
@import url( './ common.css');</style>
</head>

3.CSS中颜色表示法

单词表示法 red yellow green black
十六进制表示法 #000000 #ffffff
rgb三原色表示法 rgb（255，255，255）0–255
有颜色提取器提取

4.CSS背景样式

background-color
background-image 背景图片
background-repeat
repeat-x
repeat-y
repeat（x，y都不平铺）
no-repeat
background-position 背景位置
x y :number(px、%)|单词
x：left、center、right
y：top、center、center
background-attachment:背景图随滚动条移动的方式
scroll :默认值背景位置是按照当前元素进行偏移的)
fixed(背景位置是按照浏览器进行偏移的)

<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{ height : 2000px;}
div{ width:1440px; height:80opx; background-color :red;
background-image : url (./img/dog.jpg);
background-repeat : no-repeat;
background-position: 50%50%;background-attachment: fixed;
}
</style>< / head>
<body>
<div></div></ body>
</html>

视觉差网页

< ! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1{ width:1400px; height: 8oopx; background-image:url(. /img/1.jpg);}#div2{ width:1400px; height: 8oopx; background-image:url(./img/2.jpg);}#div3{ width:1400px; height: 800px; background-image:url( ./img/3.jpg);}</style>
</head>

<body>
<div id="div1">
</div><div id="div2">
</div><div id="div3">
</div>
</body>
</html>

5.css边框样式?

border-style :边框样式
solid :实线
dashed :虚线dotted :点线
border-width :边框大小
px …
border-color :边框颜色
red #f00 …
边框也可以针对某一天边进行单独设置: border-left-style :中间是方向 left、right、top、bottom

<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*div{ width:30opx; height: 30opx; border-style:solid; border-color:red; border-width:1px; } *//*divf width:30opx; height :30opx; border-style:dashed; border-color:red; border-width:30pX; } */
div{ width:300px; height: 30opx; border-right-style: dotted; border-right-width: 10pX;
border-right-color: green;}
</style>
</ head>
<body>
<div></div></body>
</html>

边框

6.CSS文字样式

font-family :字体类型
英文、中文
衬线体、非衬线体注意点:
1.多个字体类型的设置目的2.引号的添加的目的

<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*div{ font-family: 'Times New Roman ';}*//*div{ font-family: simsun;}*/
div{font-family:华文彩云, 'Times New Roman’ , simSun ,微软雅黑;}</style>
/head<body>
<div>这是一段文字</div><p>这是一段文字</p>
<div>this is a text</div><p>this is a text</p></body>
</html>

font-size :字体大小
默认:16px
写法: number(px)|单词（small large …不推荐使用)
font-weight :字体粗细
模式:正常(normal )加粗（ bold )
写法:单词(normal、bold)number ( 100 200 … 900 , 100到5oo都是正常的，600都9oo都是加粗的)
font-style :字体样式
模式:正常（normal )斜体( italic )写法:单词(normal 、 italic )
注: oblique也是表示斜体，用的比较少，一般了解即可。区别: 1.italic带有倾斜属性的字体的才可以设置倾斜操作。
2.oblique没有倾斜属性的字体也可以设置倾斜操作。

<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* div{ font-family: 'Times New Roman ';}*//* div{ font-family: simSun;}*/
/* div{ font-family:华文彩云，'Times New Roman' , simsun ,微软雅黑;}*//* div{ font-size : 30px;}*/
/*div{ font-weight: 600;}*/divfont-style:oblique;color: red}
</style>
</ head>
<body>
<div>这是一段文字</div>p>这是一段文字</p>
<div>this is a text</div><p>this is a text</p></body>
</html>

7.CSS段落样式?

text-decoration:文本装饰
下划线: underline
删除线:line-through
上划线: overline
不添加任何装饰: none
注:添加多个文本修饰: line-through underline overline
text-transform:文本大小写(针对英文段落)
小写:lowercase
大写:uppercase
只针对首字母大写:capitalize

<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*p{width:30opx; text-decoration: line-through underline overline;} */P{ text-transform:capitalize;}
</style>
</head>
<body>
<p>中文</p>
<p>
asd jsakdjsk asjdahsd ahdhjs ajsd39fc dsHRHFC ASFF shdjs ahjsd ajshd asd jsakdjsk asjdahsdahdhjs ajsd39fcdsHRHFC ASFF shdjs ahjsd ajshd
</p>
</body>
</html>

text-indent :文本缩进
首行缩进
em单位:相对单位,1em永远都是跟字体大小相同
text-align :文本对齐方式
对齐方式: left . right、center、 justify（两端点对剂

<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*p{ width:300px; text-decoration: line-through underline overline;} *//*P{ text-transform:capitalize;}*/
/*p{ text-indent : 2em; font-size:18px;}*/p{ text-align:justify;}</style>
< / head>
<body>
<p>112131515中文</p>
<p>
asd jsakdjsk asjdahsd ahdhjs ajsd39fc dsHRHFC ASFF shdjs ahjsd ajshd asd jsakdjskasjdahahdhjs ajsd39fcdsHRHFC ASFF shdjsahjsd ajshd
</p>
</ body></html>

line-height :定义行高
什么是行高，一行文字的高度，上边距和下边距的等价关系。
默认行高:不是固定值，而是变化的。根据当前字体的大小再不断的变化。
取值:1. number( px )scale (比例值，跟文字大小成比例的)

<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="x-UA-compatible" content="ie=edge">
<title>Document</title>
<style>
/*p{ width:30opx; text-decoration: line-through underline overline;} */*P{ text-transform:capitalize;}*/
*p{text-indent : 2em; font-size: 18px;}*//*p{ text-align :justify;}*/
p{ line-height: 邓}
</style>
</head>
<body>
<p>中文</p>
<p>
asd jsakdjsk asjdahsd ahdhjs ajsd39fc dsHRHFC ASFF shdjs ahjsd ajshd asd jsakdjsk asjdahsdahdhjs ajsd39fc dsHRHFC ASFF shdjs ahjsd ajshd
</p>
</body></html>

letter-spacing :字之间的间距word-spacing :词之间的间距
针对英文段落的
英文和数字不自动折行的问题:

word-break : break-all;(非常强烈的折行)
word-wrap : break-word;(不是那么强烈的折行﹐会产生一些空白区域)

在这里插入代码片

8.CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。复合样式
复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border;有的是需要关心顺序，例如font。

background : red url(( repeat e o;
border : 1px red solid;
font :
注:最少要有两个值size family
weight style size family vstyle weight size family
weight style size/line-height family
注:如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

注∶尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式

<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0""><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{ width : 300px; height : 300px;
background : url(./img/dog.jpg)no-repeat center center;background-color : red;
/* border : 2px black solid;*/border-right : dashed 2px blue;font : bold italic 30px/10epx宋体;
}
</style></head>
<body>
<div>这是一段文字</div></body>
</html>

9.CSS选择器

9.1 ID选择器

elem{}
id=“elem”
注:
1.ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。2．命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字)
3．驼峰写法 : searchButton(小驼峰) searchButton(大驼峰) searchSmallButton
短线写法:search-small-button
下划线写法: search_small_button

<! DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width， initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* div{ background :red;}*/#div1{ background : red;}#div2{ background:blue;}</ style>
< / head>
<body>
<div id="div1">这是一个块</div><div id="div2">这又是一个块</div><div id="xiaoming1"></div>
<div id="xiaoming2"></div><div id="searchButton"></div></ body>
</html>

9.2 CLASS选择器

.elem{}
class=“elem”
注:

class选择器是可以复用的。
可以添加多个class样式。
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
标签+类的写法

9.3 标签选择器（TAG选择器）

div{}

<div></div>

使用的场景:
1．去掉某些标签的默认样式时
2．复杂的选择器中,如层次选择器

9.4 群组选择器(分组选择器)

可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用。

9.5 通配选择器

*{}->div,ul,li,p,h1,h2…{}
注:尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。使用的场景:
1.去掉所有标签的默认样式时|

9.6层次选择器

后代 M N{ }
父子M>N{ }
兄弟M～N{ }当前N下面的所有兄弟N标签
相邻M+N{}当前M相邻的N标签

9.7 属性选择器

属性选择器
M [attr] {}
=:完全匹配
*=:部分匹配
=:起始匹配
$=:结束匹配
[][][]:组合匹配

9.8 伪选择器

M:伪类{}
:link 访问前的样式只能添加给a标签)
:visited 访问后的样式 (只能添加给a标签)
: hover 鼠标移入时的样式 (可以添加给所有的标签)
:active 鼠标按下时的样式 (可以添加给所有的标签)
注:
一般的网站都只设置
a{} ( link visited active ) a: hover{}
:after. : before通过伪类的方式给元素添加一段文本内容，使用content属性: checked、 :disabled . :focus都是针对表单元素的

9.8.2结构伪类选择器

结构性伪类选择器
nth-of-type(）nth-child（）
角标是从1开始的，1表示第一项,2表示第二项|n值表示从e到无穷大
first-of-type
last-of-type
only-of-type

10.CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性inherit值)

<l DOCTYPE html>chtml lang="en"><head>
<meta charset="UTF-8”>
<meta name="viewport" content="width=device-width， initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{ width:30opx; height : 30opx; border:1px red solid; color :red; font-size:3opx;}pborder :inherit;}
</style>
</ head>
<body>
<div>
<p>这是一个段落</p></div>
</body></html>

11.CSS优先级

相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高
单一样式优先级
style 行间 > id > class > tag >* >继承

注: style行间权重 100
id 权重100
class 权重10
tag 权重1

<IDOCTYPE html>chtml lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <style>
div{ color : red ;}div{ color: blue;}</style>
<link rel="stylesheet" href=". / base.css"> -->
<style>
/*elem{ color:red;)*//*.box{ color : blue;}*/div{ color:green;}f { color :Ored; ]</style>
</head>
<body>
<！-- <div id="elem" style="color : blue; ">这是一个块</div> -->
<div id="elem" class="box">这是一个块</div>
</body>
< /html>

!important
提升样式优先级，非规范方式，不建议使用。(不能针对继承的属性进行优先级的提升)
标签+类与单类
标签+类>单类
群组优先级
群组选择器与单一选择器的优先级相同,室后写的优先级高。
层次优先级

1*权重比较
ul li .box p input{} 1 +1 +10 +1 +1
.hello span #elem{} 10+1 +100
2*约分比较
ul li .box p input{0} li p input{}
.hello span #elem{} #elem{}