HTMLandCSS基础

zzzz11y

已于 2023-07-29 16:58:04 修改

阅读量386

点赞数

文章标签： html css

于 2022-03-29 22:46:55 首次发布

本文链接：https://blog.csdn.net/zzzz11y/article/details/122154417

版权

一、HTML

Hyper Text Markup Language（超文本标记语言）简称：HTML

1、html文件的书写规范

<html>
	<head>
		<title>页面标题</title>
	</head>
	<body>
		页面主题内容
	</body>
</html>

2、html标签介绍

a、格式

<标签名>封装的数据</标签名>

b、标签名大小写不敏感

c、标签拥有自己的属性

i.基本属性（可修改简单的样式效果）：bgcolor="red"
ii.事件属性（可直接设置事件响应后的代码）：onclick="alter('你好');"

d、标签又分为单标签和双标签

i.单标签格式：<标签名/>
ii.双标签格式：<标签名>封装的数据</标签名>

e、标签的语法

i.标签不能交叉嵌套
ii.标签必须正确关闭
iii.标签内的属性必须有值，属性值必须加引号
iiii.注释不能嵌套

3、常用标签

a、字体（font)

font 标签是字体标签，可以用来修改文本的字体（face属性)、颜色(color属性)、大小(size属性)
size大小属性范围为1-7,1最小，7最大，超过7无效
字体颜色 color：red；或 color：#00F6DE；
宽度 width:19px; 或 width:20%;
高度 height:20px; 或 height:20%;
背景颜色 background-color:#0F2D4C
字体大小 font-size：20px;
字体粗细 font-weight（normal/400, bold/700）
字体倾斜 font-style（normal，italic）
行高 line-height（数字px）
复合属性 font（是否倾斜，是否加粗，字号/行高，字体）必须按顺序书写，字号和字体值必须写，否则font属性不生效
字体族 font-family
文本缩进 text-indent（数字em，1em=当前标签字号大小）
红色 1 像素实线边框 border：1px solid red;
DIV 居中 margin-left: auto; margin-right: auto;
文本居中： text-align: center;
超连接去下划线 text-decoration: none;
列表去除修饰 ul { list-style: none; }
表格细线 table { border-collapse: collapse; /将边框合并/ }

<font color="red" face="宋体" size="7">我是字体标签</font>

b、特殊字符

空格----&nbsp
小于号-&lt
大于号-&gt
和号----&amp

c、标题标签

标题标签是h1(最大)-h6(最小)
标题标签有align属性可以设置标签的位置，left(靠左），center(居中），right(靠右）

<h1 align="center">标题1</h1><br/>

d、超链接

在网页中所有点击之后可以跳转的都是超链接

<a href="http://baidu.com">百度</a>

a标签是超链接
href属性设置连接的地址
target属性设置哪个目标进行跳转：_self 表示当前页面(默认值)，_blank 表示打开新页面来进行跳转

<a href="http://baidu.com" target="_self">百度1</a><br/>
<a href="http://baidu.com" target="_blank">百度2</a><br/>

e、列表标签

无序列表（最常用）、有序列表、定义列表（不常用）
ul是无序列表，ol是有序列表，li是列表项
type属性可以修改列表项前面的符号
list-style:none属性，去掉列表的项目符号

	<ul type="none">
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ul>

f、img标签

i.img标签可以在html页面上显示图片
  src属性可以设置图片路径
  width 属性设置图片的宽度
  height 属性设置图片的高度
  border 属性设置图片边框大小
  alt 属性设置当指定路径找不到图片时，用来代替显示文本内容
ii.在JavaSE中路径分为相对路径和绝对路径
   相对路径：从工程名开始算
   绝对路径：盘符：/目录/文件名
iii.在web中路径分为相对路径和绝对路径
   相对路径：.       表示当前文件所在的目录
            ..      表示当前文件所在的上一级目录
            文件名 表示当前文件所在目录的文件，相当于./文件名     ./可以省略
   绝对路径：格式：http://IP地址/工程名/资源路径

<img src="../imgg/1.jpeg" width="500" height="260" border="5"/>
<img src="../imgg/2.jpg" width="500" height="260"/>
<img src="../imgg/3.jpeg" width="500" height="260"/>
<img src="../imgg/4.jpeg" width="500" height="260"/>

g、表格标签

table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距

tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签

<table cellspacing="0" align="center" border="1" width="300" height="300">
        <tr>
            <td align="center">1.1</td>
            <th>1.2</th>
            <th>1.3</th>
        </tr>
        <tr>
            <th>2.1</th>
            <th>2.2</th>
            <th>2.3</th>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>

h、跨行跨列表格

新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列。
colspan 属性设置跨列
rowspan 属性设置跨行

<table border="1" width="500" height="500" cellspacing="0">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td rowspan="2" colspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>

i、内嵌窗口(iframe)

iframe标签可以咋一个HTML页面上，打开一个小窗口，去加载一个单独的页面

<iframe src="misc.xml" width="500" height="500"></iframe>

<body> 
我是一个单独的完整的页面<br/><br/>
 <!-- ifarme 和 a 标签组合使用的步骤: 
 1 在 iframe 标签中使用 name 属性定义一个名称 
 2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值 --> 
 <iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe> <br/>
<ul>
	<li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li> 
	<li><a href="1.font 标签.html" target="abc">1.font 标签.html</a></li> 
	<li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
</ul> </body

j、表单标签（form)

i.什么是表单
  表单就是HTML页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
ii.form 标签就是表单
   input type=text 是文件输入框 value 设置默认显示内容
   input type=password 是密码输入框 value 设置默认显示内容 
   input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
   input type=reset 是重置按钮 value 属性修改按钮上的文本
   input type=submit 是提交按钮 value 属性修改按钮上的文本
   input type=button 是按钮 value 属性修改按钮上的文本
   input type=file 是文件上传域
   input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的 时候同时发送给服务器
iii.select 标签是下拉列表框 ,option 标签是下拉列表框中的选项 ,selected="selected"设置默认选中
iiii.textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值） rows 属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度

<form>
        用户名称：<input type="text" value="默认值"/><br/>
        用户密码：<input type="password" value="abc"/><br/>
        确认密码：<input type="password" value="abc"/><br/>
        性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/>
        兴趣爱好：<input type="checkbox"/>打球<input type="checkbox"/>唱歌<input type="checkbox"/>画画<br/>
        国籍：<select>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>日本</option>
            </select><br/>
        自我评价：<textarea rows="10" cols="20">默认值</textarea><br/>
        <input type="reset" value="恢复"/><br/>
        <input type="submit" value="交卷"/><br/>
        <input type="button" value="abcxc"/><br/>
        <input type="file" /><br/>
        <input type="hidden" value="adb"/><br/>
    </form>

k、表单格式化

<form>
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td><input type="text" value="默认值"/></td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td><input type="password" value="abc"/></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" value="abc"/></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女</td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td><input type="checkbox"/>打球<input type="checkbox"/>唱歌<input type="checkbox"/>画画</td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td><select>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                    <option>日本</option>
                </select></td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td><textarea rows="10" cols="20">默认值</textarea><br/></td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td><textarea rows="10" cols="20">默认值</textarea><br/></td>
            </tr>
            <tr>
                <td><input type="reset" value="恢复"/></td>
                <td align="center"><input type="submit" value="交卷"/></td>
            </tr>
        </table>
    </form>

l、表单提交

i.form 标签是表单标签
  action 属性设置提交的服务器地址 
  method 属性设置提交的方式 GET(默认值)或 POST 
ii.表单提交的时候数据没有发送给服务器的三种情况： 
   1、表单项没有 name 属性值 
   2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器 
   3、表单项不在提交的 form 标签中
iii. GET 请求的特点是：
     1、浏览器地址栏中的地址是：action 属性[+?+请求参数] 
          请求参数的格式是：name=value&name=value 
     2、不安全 
     3、它有数据长度的限制
 iiii. POST 请求的特点是： 
     1、浏览器地址栏中只有 action 属性值 
     2、相对于 GET 请求要安全 
     3、理论上没有数据长度的限制

m、其他标签

div 标签默认独占一行
span 标签它的长度是封装数据的长度
p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）

二、CSS

css 是层叠样式表单，是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

1、css语法规则

选择器，属性，值
p{font-size:80px}

2、css和html的结合方式

i.在标签的style属性上设置“key:value value;"，修改标签样式（但标签多了，可读性就非常差，没有复用性可言）

<div style="border: 1px solid red;">div 标签 2</div> 
<span style="border: 1px solid red;">span 标签 1</span>

ii.在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。
   xxx {Key : value value; }
   缺点：1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
   			  2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<!--style 标签专门用来定义 css 样式代码--> 
<style type="text/css"> 
div{border: 1px solid red; }
span{border: 1px solid red; } 
</style> 
</head> 
<body> 
<div>div 标签 1</div> 
<div>div 标签 2</div> 
<span>span 标签 1</span> 
<span>span 标签 2</span> 
</body>

iii.把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
    <link rel="stylesheet" type="text/css" href="./styles.css" />   -----导入 css 样 式文件。

3、css选择器

a、标签名选择器

格式：标签名{ 属性：值; }
可以决定哪些标签被动的使用这个样式。

b、id选择器

格式：#id 属性值{ 属性：值; }
可以让通过 id 属性选择性的去使用这个样式。

<head> 
<meta charset="UTF-8"> 
<title>ID 选择器</title> 
<style type="text/css"> 
#id001{ color: blue; font-size: 30px; border: 1px yellow solid;}
</style> 
</head> 
<body> 
<div id="id001">div 标签 2</div> 
</body>

c、class选择器（类选择器）

格式：.class 属性值{ 属性：值; }
可以通过 class 属性有效的选择性地去使用这个样式。

<head> 
<meta charset="UTF-8"> 
<title>class 类型选择器</title> 
<style type="text/css"> 
.class01{ color: blue; font-size: 30px; border: 1px solid yellow; }
</style> 
</head> 
<body> 
<div class="class01">div 标签 class01</div> 
</body>

d、复合选择器

i.后代选择器
后代选择器，选中某元素的后代元素
选择器写法：父选择器 子选择武器{CSS属性}	
ii.子代选择器
子代选择器：选中某元素的子代元素（最近的子级）
选择器写法：父选择器>子选择器{CSS属性}
iii.并集选择器
并集选择器：选中多组标签设置相同的样式
选择器写法：选择器1，选择器2，...，选择器3{CSS属性}

<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 
.class01 , #id01{ color: blue; font-size: 20px; border: 1px yellow solid; } 
</style> 
</head> 
<body> 
<div id="id01">div 标签 class01</div> <br /> 
<div class="class01">div 标签 id01</div> <br /> 
</body>

iiii.交集选择器
交集选择器：选中同时满足多个条件的元素
选择器写法：选择器1选择器2{CSS属性}。选择器之间连写
注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面

e、伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式
鼠标悬停状态：选择器：hover{CSS属性}

<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 
a:hover{
color:red
}
.box:hover{
color:green
}
</style> 
</head> 
<body> 
<a href="#">a标签</a>
<div class="box">div 标签 id01</div> <br /> 
</body>

i.伪类-超链接
超链接一共有四个状态
如果要给超链接设置四个状态，需要按LVHA的顺序书写

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时（激活）

f、结构伪类选择器

作用：根据元素的结构关系查找元素

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素，第一个元素N值为1

:nth-child(公式)
作用：根据元素的结构关系查找多个元素

功能	公式
偶数标签	2N
奇数标签	2N+1,2N-1
找到5的倍数的标签	5N
找到第5个以后的标签	N+5
找到第5个以前的标签	-N+5

g、伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性内容

选择器	说明
E::before	在E 元素里面最前面添加一个伪元素
E::after	在E 元素里面最后面添加一个伪元素

注意点：1、必须设置content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可。2、伪元素默认是行内显示模式。3、权重和标签选择器相同

4、CSS特效

css特性：化简代码，定位问题，并解决问题
css特性三大类：继承性，层叠性，优先级

a、继承性

继承性：子级默认继承父级的文字控制属性
但标签有自己样式时，使用自己样式属性

b、层叠性

特点：
相同的属性会覆盖:后面的CSS属性会覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效

c、优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
规则：选择器优先级高的样式生效
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important（选中标签的范围越大，优先级越低）

优先级-叠加计算规则
叠加计算：如果是复合选择器，则需要权重叠加计算
公式：（每一级之间不存在进位）（行内样式，id选择器个数，类选择器个数，标签选择器个数）
规则：1、从左向右依次比较选择器个数，同一级个数多的优先级高，如果个数相同，则向后比较。2、！important权重最高。3、继承权重最低

5、Emmet写法

Emmet写法：代码的简写方式，输入缩写 VS Code会自动生成对应的代码
HTML：

说明	标签结构	Emmet
类选择器	<div class=“box” ></div>	标签名.类名
id选择器	<div id=“box” ></div>	标签名#id名
同级标签	<div></div> <p></p>	div+p
父子级标签	<div><p></p> </div>	div>p
多个相同标签	<span>span1</span><span>span2</span>	span*2
有内容的标签	<div>内容</div>	div{内容}

CSS属性：（大多数简写方式为属性单词的首字母）

6、背景属性-拆分写法

描述	属性
背景色	background-color
背景图	background-image（属性值：URL（背景图URL））
背景图平铺方式	background-repeat（no-repeat/repeat/repeat-x/repeat-y）
背景图位置	background-position（left/right/center/top/bottom/数字px）
背景图缩放	background-size（cover/contain/百分比/数字px）
背景图固定	background-attachment（fixed）
背景复合属性	background（背景色/背景图/等其他背景属性，不区分顺序，用空格隔开）

7、显示模式

作用：布局网页时，根据标签的显示模式选择合适的标签摆放内容
a、块级元素
独占一行，宽度默认是父级的100%，添加宽高属性生效

b、行内元素
一行共存多个，尺寸由内容撑开，加宽高不生效

c、行内块元素
一行共存多个，默认尺寸由内容撑开，加宽高生效

d、转换显示模式
属性名：display
属性值：block（块级），inline-block（行内块），inline（行内，基本不用）

8、盒子模型

盒子模型组成部分：
内容区域（height&width）、内边距（padding）、边框线（border）、外边距（margin）

a、盒子模型-边框线
属性名：border(bd）
属性值：边框线粗细线条样式颜色（不区分顺序）
常用线条样式：solid（实线）、dashed（虚线）、dotted（点线）

b、盒子模型-尺寸计算
默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
结论：给盒子加border/padding会撑大盒子（margin不会撑大盒子）
解决：1、手动做减法，减掉border/padding的尺寸。2、内减模式：box-sizing:border-box

c、版心居中
要求：盒子要有宽度
设置margin:0 auto

d、清除默认样式
*{
margin:0;
padding:0;
}

e、盒子模型-元素溢出
作用：控制溢出元素的内容的显示方式
属性：overflow
属性值：hidden（溢出隐藏）、scroll（无论是否溢出，都显示滚动条位置）、auto（溢出时才显示滚动条位置）

f、外边距问题
塌陷问题
场景：父子级的标签，子级添加上外边距会产生塌陷问题
现象：导致父级一起向下移动
解决办法：1、取消子级margin，父级设置padding。2、父级设置overflow：hidde。3、父级设置border-top

合并现象
场景：垂直排列的兄弟元素，上下margin会合并
现象：去两个margin中的较大值生效

g、行内元素-内外边距问题
场景：行内元素添加margin和padding，无法改变元素垂直方式
解决办法：给行内元素添加line-height可以改变垂直位置

h、盒子模型-圆角
作用：设置元素的外边框为圆角
属性名：border-radius
属性值：数字px/百分比

i、盒子模型-阴影
作用：给元素设置阴影效果
属性名：box-shadow
属性值：X轴偏移量Y轴偏移量模糊半径扩散半径颜色内外阴影
注意点：X轴偏移量Y轴偏移量必须有，默认是外阴影，内阴影需要添加inset

9、浮动

使块级元素在一行内显示多个
标签写法：float:left（向左浮动），float:right（向右浮动）
对于两个左右块元素的效果，需对两个标签分别写左浮动和右浮动，只写一个没用

a、清除浮动

方法一：额外标签法
在父元素内容后面添加一个块级元素，设置CSS属性clear:both

方法二：单伪元素法
把clearFix加在需要清楚浮动的标签上

.clearFix::after{
content:"";
display:block;
clear:both;
}

方法三：双伪元素法（推荐）
把clearfix加在需要清楚浮动的标签上
before伪元素是解决外边塌陷问题

.clearfix::before,
.clearfix::after
{
content:"";
display:table
}
.clearfix::after{
clear:both;
}

方法四：overflow
父元素添加CSS属性overflow：hidden

10、Flex布局

Flex布局也叫弹性布局，适合结构化布局，提供了强大的空间分布和对齐能力
Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

a、Flex组成

设置方式：给父级元素设置display:flex，子元素可以自动挤压或拉伸
组成部分：弹性容器，弹性盒子，主轴（默认水平），侧轴/交叉轴（默认垂直）

b、Flex布局

描述	属性
创建flex容器	display:flex
主轴对齐方式	justify-content (flex-start/flex-end/center/space-between/space-around/space-evenly)
测轴对齐方式	align-items (streth/center/flex-start/flex-end)
某个弹性盒子侧轴对齐方式	align-self (streth/center/flex-start/flex-end)
修改主轴方向	flex-direction(row/column/row-reverse/column-reverse)
弹性伸缩比	flex (整数数字，表示占用父级剩余尺寸的份数）
弹性盒子换行	flex-wrap （wrap/nowrap）
行对齐方式	align-content (flex-start/flex-end/center/space-between/space-around/space-evenly)