HTML和css

已于 2022-07-04 16:20:10 修改
阅读量344 收藏 7
点赞数
分类专栏： 前端知识点 文章标签： html
于 2020-11-19 10:31:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sam80000/article/details/108875035
版权

前端HTML

一、HTML 前端基础

代码编写规范

空格、缩进、回车都代表一个字符

1. 页面组成

在这里插入图片描述

<html lang="en"></html>	英文页面	lang="zh-CN" 中文页面

2. 标签的作用

<h1>标题标签</h1>					h1-h6从大到小  h1标签一个页面只有一个
<p>段落标签，文字独占一行</p>
<b>文字加粗标签</b>
<i>斜体标签</i>
<hr >								一条水平线，是单标签
<br>								换行，是单标签
&nbsp;								一个  &nbsp;  代表一个空格，多个就有多个空格
<img src="图片路径">					图片，是单标签
<ul>无序列表
	<li>列表中的一条<li>
</ul>
<ol>有序列表</ol>
<a href="">定义一个链接</a>

在这里插入图片描述

标签嵌套的规范：
			1.组合标签使用规范 ul、li	      dl、dt、dd、			table、tr、td、th

			2.块标签可以嵌套内联：
				<div id="">
						<span id=""> </span>
						<a href=""></a>
				</div>
			
			3.块标签可以嵌套块标签
				p标签不能嵌套 div
			
			4.内联不能嵌套块 
				只有 a 标签 中 可以嵌套 块

在这里插入图片描述

3. 在Hbuilder中的快捷方式

	直接输入  html  回车会显示网页基本信息
	直接打标签回车即可
	tab 可以快速补全

4.图片 img 单标签

图片默认从左到右，以底部对齐
img 的属性：

  1. src 路径
    输入图片的路径，可以是网址

  2. width 宽度
    输入图片的宽度，单位是 px 像素

  3. height 高度
    输入图片的高度，单位是 px 像素

  4. title 鼠标放在图片上显示的内容

  5. alt 图片加载失败后显示的内容

图片单位可以是px，如果图片太大可以是百分比
在这里插入图片描述
在这里插入图片描述

查看图片

如果网页有的图片无法保存，可以用网页调试工具，按f12，点击选择按钮，可以查看代码，右侧有下载路径，右键打开，可以保存图片

图片格式

	jpg  	色彩丰富
	png		可以隐藏空白
	gif		动图
	psd		设计原稿文件

5. 超链接 a

点击超链接会打开网页

a的属性：

  1. target 目标
    在这里插入图片描述
text-decoration：none		文本修饰：没有样式
text-decoration：underline	有下划线
<base target="_blank">		在head标签中添加后，所有链接都是打开新窗口

跳转锚点：

<a herf="#abc">abc</a>			定义一个链接，点击后到达某个位置
<h2 id="abc"><h2>

6. 无序列表 ul

ul 的属性：

  1. type 可以确定图标的形状
<ul type="disc"></ul>		实心圆
<ul type="circle"></ul>		空心圆
<ul type="square"></ul>		实心方块

7. 有序列表 ol

ol 的属性：

  1. type 表示数字列表
<ol type="1"></ol>		默认，表示数字
<ol type="a"></ol>		表示大小写字母
<ol type="A"></ol>
<ol type="i"></ol>		表示大小写罗马数字
<ol type="I"></ol>

* 定义列表 dl

<dl>
	<dt>标题</dt>
	<dd>解释</dd>
</dl>

8. 路径地址

相对路径以当前页面为参考，打开地址
在这里插入图片描述
./当前路径
…/ 返回上一级目录
…/…/ 返回上两级目录

9. 表格 table

在这里插入图片描述
在这里插入图片描述

table 的元素：

  1. tr 一行
    可以设置一行的对齐方式 居中 align=“center”
  2. td 一列-行里面的表格单元
    colspan=“” 整合几列
    rowspan=“” 整合几行
  3. th 表头，自带加粗居中
  4. col 一列
    可以设置一列的宽度

table 的属性：

  1. border 表格最外层边框大小
  2. cellspacing 单元格之间的空白大小

在这里插入图片描述
列标签 ：可以设置一列的属性
在这里插入图片描述
在这里插入图片描述

10.表单 form

form
name属性只对表单有用，其他标签使用无效。

用于提交用户输入的信息
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

input 标签

提供用户输入的方式
input 需要在 form 表单中才能生效

input 属性

  1. type 类型 决定表单的属性 这些属性需要有 name 值才能提交成功
    text 文本输入框
    password 密码输入框
    submit 提交输入框
    button 普通按钮
    reset 充值按钮

在这里插入图片描述
在这里插入图片描述

表单标签

<input>输入选择标签</input>			输入标签，有多种形式可以选择

<!-- placeholder:文本框中提示的内容 -->
	<input type="text" placeholder="请输入" />
	<input type="password" placeholder="请输入" />

<textarea cols="" rows=""></textarea>文本框标签 列和行代表多高多宽
<!-- disabled:此选项不能选择，selected:此选项出现在第一个 ,size:下拉菜单可以出现几项
multiple:多选，可以在文件中多选，也可以在下拉菜单中多选
select：下拉菜单
														-->
	<select size="2">
	<option disabled="disabled" selected="selected" >请选择</option>
	<option >tt</option>
	<option >aa</option>
	</select>
	<input type="file" multiple="multiple" />

<!-- 单选：name相同可以让单选项同为一组，label 让字体和单选项进行映射
	点击字体，就可以选择单选项，通过id 和for 的值来进行映射
 -->
	<input type="radio" name="sex" id="man"/> <label for="man">男</label>
	<input type="radio" name="sex" id="woman" /><label for="woman">女</label>

11. 层叠样式表 css

样式决定如何显示 html 标签

12. 容器标签 span div

div 和span 没有任何样式，需要配合css才能显示
span 用来修饰文本

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一个空的div 默认宽度是 100%，高度是0，在填写内容的时候才会有高度

13. 文本修饰标签

在这里插入图片描述

14.label

定义：
label 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label 标签的 for 属性应当与相关元素的 id 属性相同。

属性
for ：标签的 for 属性应当与相关元素的 id 属性相同。规定 label 与哪个表单元素绑定。
form：H5属性 规定 label 字段所属的一个或多个表单。

二、css

行内样式：在标签里的 css 属性

内部样式： 放在 style 标签的 css 属性。 style 标签放在 head 标签中

外部样式：放在一个单独的 css 文件中 通过link 引入

行内样式优先于内部样式
行内选择器》id选择器》类选择器》标签选择器》通用选择器 *

遇到的问题
1 css样式没有加载出来
引用的样式写错了，class 写错了，选择器写错了

复合样式和单一样式

	复合样式和单一样式不要混写，如果非要混写，要先写混合样式再写单一样式
	font ： size width ；
	font-size： ；

css样式可以继承
文字样式可以被继承，布局样式不可以被继承（默认不可以继承，可以设置）
单个样式：inherit ; 表示继承父样式

1. 选择器

选择器里放的是 css 样式
%换算宽高，根据父容器来计算

	1.id选择器     #id{ }    id="id"
		一个页面只能出现一个id选择器。虽然不会有问题，但出现多个相同的id选择器不符合规范
	
		命名规范：字母、数字、下划线组成 （数字不能作为开头）遵循驼峰命名规则
		
	2.类选择器   .class{ }		class="class"
		class选择器可以复用，且一个标签可以使用多个class选择器
		class 使用多个选择器 class="class1 class2",等同于class="class1" 
		class="class2",  可以同时用两个，也可以用于区分相同标签。
	
	3.标签选择器		div{ }
	
	4.群组选择器	div,.class,#id{ }
		多个选择器使用同一个样式，达到代码的复用
	
	5.通配选择器		*{}

选择器越精确，优先等级越高
可以根据权重值判断，权重值越大，优先级越高
通用选择器权重值为0，标签选择器权重为1，类选择器 权重为10，id选择器权重为100，行内选择器权重值为1000
在这里插入图片描述
在这里插入图片描述

1.1 层次选择器

	1.后代选择器		M N{}
		用空格隔开。作用于 M 里的 N 标签的样式。所有的后代 N 都有此样式
		
	2.父子选择器		M>N{}
		只作用于M 里的 N 标签，N的后代N没有此样式
	
	3.兄弟选择器		M~N{}
		M 同级标签下的 N 标签的样式，M 之上写的 N 没有此样式
	
	4.相邻选择器		M+N{}
		M同级标签 下 紧邻的第一个 N 标签 ，M 之上 的和 下面的第二个都没有此样式

p.class		p标签且class=class的样式
p#id		p标签且id=id的样式
p .class	p标签下的class=class的样式
p #id		p标签下的id=id的样式

1.2 属性选择器

	1. M[attr]{}
		M[class]{}		M 标签中带有 class 元素的使用此样式
	
	2.M[class="a"]{}		完全匹配
		M 标签中带有 class="a" 的使用此样式
	
	3.M[class*="a"]{}		部分匹配
		M 标签中class 含有a 的使用此样式
		
	4.M[class^="a"]{}		起始匹配
		M 标签中 class 中 以 a 作为开始的使用此样式
		
	5.M[class$="a"]{}		结束匹配
		M 标签中 class 中以 a 作为结束的使用此样式
		
	6.M[class][id]{}		组合匹配
		M 标签中即有 class 又有 id 元素的使用此样式

1.3 伪类选择器–进行某项操作后的样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

div:after{		某些文字后面添加文字，可以直接修改样式
			content: "world"; color: red;
		}
div:before{ 某些文字之前添加文字，可以直接修改样式
			content: "world"; color: red;
		}

1.4 结构伪类选择器

	li:nth-of-type(1){		单独让第一个 li 使用此样式，括号里的值可以是n，2n 偶数显示样式
		background-color: red;
	}
	li:nth-of-type(){}	只对li有效
	li:nth-child(){}	对li中夹杂的元素也有效

在这里插入图片描述

2. css属性

style 标签

放在head 里，有属性type=“text/css”，表示内容是标准的css
用来写css选择器

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

放在 标签里，作为标签属性，一般放置css的属性和值

在这里插入图片描述
在这里插入图片描述

* css默认样式 css reset

div、span 没有默认样式
body 、h1、p、ul、a、 有默认样式

设置css reset 清除一些默认样式在这里插入图片描述

3. 文本属性

在这里插入图片描述

4. 背景图片样式 background

图片样式属性

background-image: url();		可以为添加背景图片，url里面放入图片路径
background-repeat: no-repeat;	添加图片后，图片是平铺，有的图片会有多个，repeat 是重复。
background-position: center center;	调整图片的位置，第一个值是左右，第二个值是上下
background-attchment：fixed;		背景图随着滚动条变化

在这里插入图片描述
在这里插入图片描述

5. 元素浮动 float

为什么会有浮动？
因为在编写代码的页面中存在 文档流，页面的结构的文档流是从上到下，内联元素的文档流是从左到右
用了浮动，元素会脱离文档流，可以进行排版

float: left、right、none（默认值）

在页面中，元素的位置是由上到下。如果有的元素想横着放，就需要运用浮动样式。

1.浮动后父元素只有宽度没有高度

overflow：auto;			对父元素做溢出处理

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2 . 有多个模块浮动，如果不想影响下面的模块，可以将多个模块，放到一个父模块中
在这里插入图片描述

5.1 溢出隐藏 overflow

	overflow： visible(默认值)、	hidden、	auto、	scroll、
		hidden：会对多出的内容裁剪，导致看不全
		scroll：可以出现滚动条，可以设置横向滚动条和纵向滚动条。没有内容也会显示滚动条
		auto：根据内容自动显示滚动条
	overflow-x：设置 x 轴滚动条
	overflow-y：设置 y 轴滚动条

5.2 清除浮动

1.兄弟模块用clear清除浮动。
2.父子模块可以用after伪类配合clear清除
在这里插入图片描述

after伪类清除浮动原理
after 在元素后面增加文字，增加文字后属于内联样式，内联不能使用clear，只有块才可以清除，
所以要将 内联样式 改成 块样式
.clear:after{
				content:"" ;  display: block;clear: both;	
			}

* 盒子模型

width、height、不设置的时候，对盒子模型的影响，会自动计算容器大小，节省代码量
可见的宽高=内容+padding+border
总体的宽高=内容+padding+border+margin
margin有负值，padding和border没有负值

在这里插入图片描述

* 改变盒子模型形态-box-sizing

盒子自动计算宽高的距离
在这里插入图片描述

6. 外边距 margin

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
margin 只能左右auto， 不能上下auto。

margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
写四个值：从上开始，顺时针走
写三个值：上、左右、下
写两个值：上下、左右
写一个值：全部
在这里插入图片描述

margin 会出现的问题
1.当上下两个盒子都margin的时候，会出现叠加，谁的间距大用谁的值。两个值不会相加。左右间距不会出现此问题，只有上下间距。
解决方法：把想要的间距设置给其中的一个
2.margin-top 传递问题
当一个盒子嵌套在一个盒子中，给里面的盒子设置 margin-top 值，父容器会获得子容器的 margin-top值，两个盒子同时有 margin 间距
解决方法：
给父容器加边框。
marigin 改成 padding-top 给父容器设置上，等同于里面的容器加了间距 在这里插入图片描述

7. 内边距 填充 padding

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
写四个值：从上开始，顺时针走
写三个值：上、左右、下
写两个值：上下、左右
写一个值：全部
在这里插入图片描述

8. 边框 boder

在这里插入图片描述
在这里插入图片描述

边框各个边是斜着拼接在一起的，如果将一个div的边框(boder)高度和宽度设置为0，将边框的像素提高，会形成四个拼接在一起的三角。将四个边框的颜色设置成透明（transparent）

boder-left/right/top/bottom-style/width/color 
可以根据方向和样式自行配置

div{
		width: 0px; height: 0px;
		border: solid;
		border-top-color: transparent;
		border-top-width: 30px;
		border-right-color: transparent;
		border-right-width: 30px;
		border-left-color: transparent;
		border-left-width: 30px;
		border-bottom-color: red;
		border-bottom-width: 30px;
							}

9. 字体 font

font-family:字体类型;		根据计算机已有的字体进行显示，计算机没有的无法显示出来
							可以设置多个字体，防止文字失效
font-size:16px;				默认字体大小16px，字体大小最好为偶数

在这里插入图片描述
在这里插入图片描述

10. 按类型划分标签 display - 显示框类型

类型及写法
元素就是标签，布局中常用的有三种标签，块元素（行元素）、内联元素（行内元素）、内联块元素（行内块元素），

块元素，也可以称为行元素，布局中常用的标签，如：div、p、ul、li、h1-h6等等都是块元素

（1）支持全部的样式

（2）如果没有设置宽度，默认的宽度为父级宽度100%

（3）盒子占据一行、即使设置了宽度

内联元素，也可以称为行内元素，布局中常用的标签，如：a、span、em、b、strong、i等等都是内联元素

（1）支持部分样式（不支持宽、高、margin上下、padding上下）

（2）宽高由内容决定

（3）盒子并在一行

（4）代码换行，盒子之间会产生间距

（5）子元素是内联元素，父元素可以用text-align属性设置子元素水平对方方式

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。

（1）支持全部样式

（2）如果没有设置宽高，宽高由内容决定

（3）盒子并在一起

（4）代码换行，盒子会产生间距

（5）子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联元素，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。
在这里插入图片描述

内联样式显示margin-left/right，不支持margin-bottom/top。只有将内联设置成块元素才能支持margin-bottom/top。

改变元素类型
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

11. 网页中定位 position

绝对位置，根据相对位置进行定位，如果上层模块没有position样式，就一直网上找，position哪个值都可以做相对位置，最上层还没有，就根据网页定位绝对位置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

出现定位层级嵌套的时候，同级的才会比较，只有父元素不写定位，里面的子元素才能和
外面的父元素同级进行比较

在这里插入图片描述

12. 鼠标划入样式 hover

.test{}				test样式
.test:hover{}		鼠标划入test样式后的表现

13. 段落样式

p{
	width: 300px;
}
p.wenben{
	text-decoration: underline;
	text-indent:32px; font-size: 18px;
	text-indent:2em; font-size: 18px;
	
}
p#duiqi{
	text-transform: uppercase;
	text-align: justify;
}

13.1 文本装饰与大小写

在这里插入图片描述

13.2 文本缩进与对齐

在这里插入图片描述

13.3 行高 和词距

在这里插入图片描述
在这里插入图片描述

在一个模块中，一个英文单词过长，或者一串数字过长，会溢出显示，这时候用到折行。（如下图）
强烈折行的效果是单词会紧凑的在一起，然后折行。
不强烈的折行，长单词和短单词进行换行，会留出来部分空白。

在这里插入图片描述

14. 透明度与手势 opacity、rgba、cursor

opacity:0(透明)~1（不透明）  0.5半透明  里面的子元素都会变透明
rgba(255,0,0,0~1)			可以单独对背景颜色调节透明度
cursor:	default(默认值)		鼠标到达区域所展示的鼠标样式
		help、				帮助鼠标样式
		url(),auto			自定义鼠标样式，图片格式为 ico、cur、png 注：url后面是逗号，
							图片不能太大

15. 最大最小宽高设置 min/max-width/height

min-width:200px;			最小是200像素的宽，内容多了会自动增加宽度，少了不会变，内容不会溢出。
max-height:200px;			最大是200像素的高，内容少了会自动缩小高度，多了不会变，内容会溢出。
/* 设置屏幕自适应宽高 */
html,body{
	width: 100%;	height: 100%;
}

16.使用css自定义属性（变量）

自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(–main-color);）

css变量名字必须由--开头

一般在根伪类  :root 下
:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

也可以内部覆盖使用变量是蓝色，在内部定义会覆盖
在这里插入图片描述

自定义属性备用值
函数的第一个参数是自定义属性的名称。如果提供了第二个参数，则表示备用值，当自定义属性值无效时生效。第二个参数可以嵌套，但是不能继续平铺展开下去了，例如：

.two {
  color: var(--my-var, red); /* Red if --my-var is not defined */
}

三、css其他用法

1. css雪碧图 sptite

在这里插入图片描述

2. css3 圆角 border-radius

标签圆角的大小 是根据圆的半径相切而成，如果半径等于标签大小，就会变成一个圆。
四个值从左上角开始顺时针。

	#box{width: 200px;	height: 200px; background: red; border-radius:50px;}	
	#box{width: 200px;	height: 200px; background: red; border-radius:50%;}		圆形
	#box{width: 200px;	height: 200px; background: red; border-radius:20px 30px;}
	#box{width: 200px;	height: 200px; background: red; border-radius:20px 0 0 30px;}
	#box{width: 200px;	height: 200px; background: red; border-radius:20px / 40px;}		椭圆切角
sam80000
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb『HTML&&CSS』
不会敲代码的z的博客
05-09 1218
前言：参考于尚硅谷的javaweb的HTML&&CSS笔记，复习专用 第一节 HTML简介 1、名词解释 HTML是Hyper Text Markup Language的缩写。意思是**『超文本标记语言』**。 html语言是解释型语言，不是编译型。浏览器是容错的 2、超文本 HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文
HTML和CSS学习.zip
01-01
HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习...
HTML与CSS
ck_67的博客
12-14 2985
一、 HTML标签：表单标签 表单： 概念：用于采集用户输入的数据的。用于和服务器进行交互。 form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 属性： action： 指定提交数据的URL。 method: 指定提交方式。 分类：一共7种，2种比较常用 get： 1. 请求参数会在地址栏中显示。会封装到请求行中。 2. 请求参数大小是有...
【Web前端入门】HTML+CSS 万字总结——带你深入学习掌握
最新发布
网页设计与制作
03-27 844
万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。学习HTML就是学习标签的一个过程，难度指数低，重在反复练习！
HTML和CSS (前端共三篇)【详解】
qq_1424674116的博客
03-03 1186
web应用有BS和CS架构两种，其中我们主要涉及的是BS架构。而BS架构里，B（Browser浏览器）是客户端的角色，它负责与用户交互：给用户展示数据、收集用户输入的数据。前端页面是在浏览器里渲染显示的，而同一页面在不同浏览器里显示的效果是有差异的，所以建议大家都使用chrome浏览器前端开发有一套Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：HTML：负责展示内容、收集数据。但是不好看。
01-初识HTML和CSS
探索前端，分享经验
10-17 313
​ 它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
HTML和CSS
02-10
我创建了这个存储库，以将我HTML和CSS项目分享给全世界。 提供了HTML文件，它们CSS代码位于称为“ Styles.css”的工作表内。 所有CSS都存储在此文件中，并带有注释，以指导您使用不同HTML文件CSS代码。 注意：某些...
html和 css 学习.zip
01-01
html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习...
学习 HTML 和 CSS.zip
01-05
学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 ...
html和css阶段学习.zip
01-01
html和css阶段学习html和css阶段学习html和css阶段学习html和css阶段学习 html和css阶段学习html和css阶段学习html和css阶段学习html和css阶段学习 html和css阶段学习html和css阶段学习html和css阶段学习html和css...
个人博客网站html+css源码
08-22
这是一个完整的个人博客的html源代码,稍微修改就能让自己的博客充满个性化，纯前端代码，入门级的，仅供于学习，欢迎交流
讲解HTML和CSS（超详细）
热门推荐
Jinmuyan_的博客
05-06 1万+
讲解HTML和CSS（超详细）一、初始HTML和CSS1.html的发展历史2.html3.css二、HTML1.基本框架2.HTML5常用的标签和属性三、CSS1.css的使用2.css选择器总结 提示：以下是我的一些经验之谈，下面案例可供参考 一、初始HTML和CSS 1.html的发展历史 HTML 1.0 超文本标记语言(第一版) – 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准) HTML 2.0 – 1995年11月作为RFC 1866发布，在RFC 2854于2
CSS与HTML结合使用的三种方式
m0_72237413的博客
06-24 7097
在HTML中如何使用CSS样式代码
html和css基础知识
Megustas_JJC的博客
10-17 793
一，html+css基础 1-1 Html和CSS的关系 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框
[HTML_CSS]HTML_CSS实战:做一个简单个人博客
stay hungry stay foolish
05-09 2811
这里写目录标题背景示意图代码补充知识点基础骨架搭建填充内容 背景 上一节我们讲了一篇文章快速学会HTML_CSS，这节来实战。 模仿的漫威的一个网站，如有侵权立删。 示意图 代码 补充知识点 margin:0 让块级元素水平居中 !important 避免在权重轻的时候被覆盖，换句话说锁死了这个属性，即使使用内联样式也不会改变 border-radius：10px； 设定外边框圆角 text-decoration:none 链接下面横线消失 基础骨架搭建 VSCode 新建一个html文件，输入！，选
HTML+CSS
有点想法的专栏
02-28 223
文章目录HTMLCSS1.css导入方式2.选择器2.1基本选择器2.2扩展选择器2.3复合选择器3.块级元素与行内元素4盒模型4.1display4.2行内元素之间水平margin 和 块元素之间垂直margin4.3 数字属性表示4.4元素的高度和宽度(参考盒模型图)4.5元素之间的距离5定位5.1标准流（position默认值）5.2绝对定位5.3相对定位5.4浮动6继承7文字8图片9布局 ...
HTML CSS + DIV实现整体布局
weixin_30298497的博客
10-14 8050
HTML CSS + DIV实现整体布局 1、技术目标： 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2、什么是W3C标准？ W3C：World Wide Web Consortium，万维网联盟W3C的职能：负责制定和维护Web行业标准W3C标准包括一系列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：D...
个人主页html和css
01-04
个人主页的HTML和CSS是用来构建和设计个人网站的两种主要技术。HTML（超文本标记语言）是一种用于描述网页结构和内容的标记语言，而CSS（层叠样式表）则用于定义网页的样式和布局。 个人主页的HTML代码通常包括标题...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值