HTML+CSS简单学习笔记

最新推荐文章于 2024-07-16 20:50:21 发布

longHARDEN

最新推荐文章于 2024-07-16 20:50:21 发布

阅读量275

点赞数

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

本文链接：https://blog.csdn.net/qq_42002500/article/details/107043886

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML+CSS

学习资源：

入门：

HTML+CSS基础入门视频教程（从第三章开始）：2020前端「HTML+CSS」零基础入门 - 网易云课堂

入门实战操作（OPPO网站）：Web前端开发_中国大学MOOC(慕课)

进阶：

H5/C3视频教程：H5C3零基础入门 - 网易云课堂

进阶实战操作（淘宝网站制作）：淘宝项目

文章目录

lesson1 HTML

HTML初级篇-基础标签

HTML-内容 CSS-样式 JavaScript-交互

HTML-hyperText markup language 超文本标记语言

HTML基础标签：

<html lang="en"> 
	<head>
        <meta charset="utf-8">
        <title>document</title>
        <meta content="服装" name="keywords">
	</head>
	<boby>
		
	</boby>
</html>

乱码：设置编码字符集

通用语言：utf-8 万国码：Unicode

简体中文字符集：gb2312 国家版本扩展版本：gbk(包括版本)

语言：lang 告诉搜素引擎爬虫，我们的网站是关于什么内容的

en zh

基本标签：

p
h1-h6
加粗strong
斜体em
删除线del
地址标签address

充当容器，区域分块div  作用：1结构化 2绑定操作
span

HTML高级篇-高级标签

空格&nbsp;
小于符号&lt;    大于符号&gt;
单标签：换行标签<br>  水平线<hr>
注释<!--注释内容-->

有序标签：

ol>li*3
<ol type="" start="3"> 1/a/A/i/I

无序标签：

ul>li*5
<ul type=""> disc\circle

img:

<img src="" alt="这是一张什么图片" title="image"> 
src:1网上URL 2本地绝对路径 3本地相对路径
alt（图片占位符）:在图片加载不出来是补充文字说明
title：图片提示符

video:视频标签

超链接(anchor)：

1、a标签可以记录锚点位置：可以作为目录功能

<a href="#id内容">

2、超链接

<a href="网址" target="">文字或图片</a>
虚拟超链接：href="#"
target（目标）:打开新标签 _black

3、打电话、发邮件：

<a href="tel:18361270000">
<a href="mailto:20.@qq.com">

4、协议限定符

<a href="javascript:">

注：浏览器截屏：

F12

application

Ctrl+shift+p

full，回车

表单标签：form：发送数据

<form method="get/post" action="接收地址"> 发送数据的方式 发送对象
	用户名：<input type="text" name="username"> 输入框
	密码：<input type="password" name="password"> 密码框
	<input type="submit">提交:1、数据名；2、数据值  提交成功：网址导航栏有变化
	1、恢复<input type="radio" name="123" value1="huifu " checked="checked"> 单选框 默认选中
	checkbox 多选框
	file 上传文件
	
	<select>   下拉列表
		<option>列表一</option>
	</select>
</form>

表格标签：table

tr 行标签

td 列标签

th 标题标签

lesson2 CSS基础

css：cascading style sheet

16进制颜色代码原理：

16进制颜色代码以0、1、2、3、4、5、6、7、8、9、A、B、 C、D、E、F共16位组成。

16进制颜色代码指定颜色的组成方式：前两位表示红色，中间两位表示绿色，最后两位表示蓝色。把三个数值依次并列起来，以#开头。

如纯红：#FF0000，FF：即十进制的R（红）=255，00和00即G（绿）=0和B（蓝）=0。同样的原理，纯绿：#00FF00，即R=0，G=255，B=0。

16进制颜色代码中，00是最小的，FF是最大的，数值越大，颜色越深。如红色的16进制颜色代码ff0000：红色是最大，即FF，绿色和蓝色是最小，即00。

引入css：

1、行间样式：

2、页面级css：

3、外部引用

选择器：

1.ID选择器(一一对应)：

#id{      				}

2.class选择器（多对多）：

.class{					}
引用时   class="class1 class2"

3.标签选择器

div{                 	}

4.通配符选择器（*任意）

*{}

5.属性选择器

[class="class1"]{			}

6.重要选择器

!important

选择器权重：

id>class>标签>通配符

！important>行间样式>id>class\属性>标签>通配符

css复杂选择器

css选择器	权重（256进制）
!important	Infinity
行间样式	1000
ID	100
class\|属性\|伪类	10
标签选择器\|伪元素	1
通配符	0

父子选择器/派生选择器：

div p{			}
.class1 #id p{			}

直接子元素选择器

div>em{			}

并列选择器

div.demo{			}

分组选择器

em,strong,span

css基本属性

font-size
font-weight 	bold
font-style 		italic(斜体)
font-family		arial
字体颜色：color:
	英语单词;
	颜色代码：#ff4400;
	颜色函数：
width
height
border:1px solid red;//外边框border-size	border-style(solid dotted dashed)	border-color
border-left-color

text-align:
line-height:	//单行文本高度
text-indent:2em		//首行缩进		单位：绝对单位，相对单位	1em=1 font-size=16px;	
text-decoration:line-through/underline;		//删除线/下划线
cursor：pointer/help			//光标定位值

伪类选择器：

a:hover{			}			//鼠标放上时发生改变

display:

行级元素（内联元素inline）：内容决定元素所占位置，不可以通过css改变宽高

span	strong	em	a	del

块级元素(block)：独占一行，可以通过css改变宽高

div	p	ul	li	ol	form

行级块元素(inline-block)：内容决定大小可以改变宽高

img

初始化标签：标签选择器、通配符

lesson3 css高级篇

三大模型

盒子模型：

外边距margin 默认8px

盒子壁border 默认0px

内边距padding 默认0px

内容element

层模型：

z-index:1;

定位position：

绝对定位（脱离原来位置进行定位）相对于最近的有定位的父级，如果没有，则定位窗口
absolute	left	top
相对定位（保留原来位置进行定位）相对于自己原来的位置进行定位
relative
固定定位
fixed

两个经典Bug：

margin塌陷

如何触发一个盒子的bfc: position:absolute display:inline-block float:left overflow:hidden

浮动模型：使元素站队

float:left/right
clear:both;		//清除浮动流

浮动元素产生了浮动流。所有产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素。

伪元素（天生行级元素）：

span::before/after{content:""			}		//元素前/后

清除浮动流方法：

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

lesson4 css升华篇

文字溢出处理

单行文本

white-space:nowrap;//文本不换行
overflow:hidden;//溢出部分隐藏
text-overflow:ellipsis//溢出部分...

多行文本：多行只做截断

overflow:hidden;

背景图片：

background-image:url();
background-repeat:no-repeat;
background-position:left top;center center

行级元素只能嵌套行级元素

块级元素可以嵌套行级元素

inline liline-block-->文本类元素

设置position:absolute或float:left/right后，display会自动变为inline-block

同行元素对齐：

vertical-align:

两栏布局

.right{
	position:absolute;
	right:0
	width:
	height:
	background-color:
}
.left{
	marign-right:
	height:
	background-color:
}

项目HTML+CSS步骤：

1、新建文件

index.html css(index.css) js(index.js) img data

2、分析页面整体结构

div分区

#id

初始化样式：

通配符，标签选择器，群组选择器，内容样式初始化

*{
    margin: 0;
    padding: 0;
}
ul>li{
    list-style: none;
}
a{
    color: #666;
    text-decoration: none;
}
.left{
    float: left;
}
.right{
    float:right;
}
#top,#header,#nav,#banner,#star,#accessory,#world,#serve,#after_sale,#footer{
    height: 100px;
    width: 100%;
    border: 1px solid #000;

}
.container{
    width: 1280px;
    border: 1px solid #f00;
    margin: 0px auto;
}

3、逐个部分设置css

HTML+CSS进阶：H5/C3

longHARDEN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS简单学习笔记

HTML+CSS学习资源：入门：HTML+CSS基础入门视频教程（从第三章开始）：2020前端「HTML+CSS」零基础入门 - 网易云课堂入门实战操作（OPPO网站）：Web前端开发_中国大学MOOC(慕课)进阶：H5/C3视频教程：H5C3零基础入门 - 网易云课堂进阶实战操作（淘宝网站制作）：淘宝项目文章目录HTML+CSS**学习资源：**lesson1 HTMLHTML初级篇-基础标签HTML高级篇-高级标签lesson2 CSS基础16进制颜色代码原理：引入css：选择器：*
复制链接

扫一扫