html+css知识汇总

本文详细总结了HTML和CSS的基础及高级知识点,包括HTML的标签使用,如段落、标题、图片和超链接,以及CSS的引入、选择器、布局和定位等。此外,还涵盖了CSS的居中技巧、盒模型、浮动和清除,以及一些常见的问题解决方案,如margin塌陷和合并。
摘要由CSDN通过智能技术生成

<!--前端总结 -->

一,基础标签

1.html ---->hyperText markup language超文本标记语言

2.<html></html> 根标签

<head>设置浏览器特性</head> ,<body>展示给用户</body>结构化标签

3.编码字符集:gb2312(不识别繁体)gbk(识别繁体),unicode万国码,UTF-8万国码升级版

4.lang="en" :告诉搜索引擎爬虫,我们的网站是关于什么内容的。方便抓取我们的网站。

5.

<p></p>段落标签

<h1></h1>标题标签;分行,加粗,更改字体

<em>斜体</em>

<del>中间划线</del>

<address></address>地址标签:斜体,分行

<div style="color:#f40">

<em>q</em>

<strong>fad</strong>

<p>djfl</p>

</div>

<span></span>

容器: 结构化,绑定化操作

二,高级标签

1.

<br>换行符

<hr>水平线

2.有序列表:ol>li

<ol type="" reversed="">列表架

<ol type="1" start="2">

列表项

<li></li>

</ol>

3.无序列表:ul>li

<ul type="circle">

....

</ul>

list-style:none;

4.<img src="图片资源地址(网上的url,本机的路径" alt="这是图片"title="图片提示符">

5.<a href="网站地址">给用户看的</a>hyperText refercence超文本引用

超链接,锚点,打电话发邮件,协议限定符

   <!-- a表现做锚点 -->   

<div id="demo1" style="height:10px;width:100px;backgrond-color:green">demo1</div>

    <br>*100

    <a href="#demo1">find demo1</a>

    <a href="#demo2">find demo2</a>

    <div id="demo2" style="height:100px;width:100px;background-color:red;">demo2</div>

    <a href=""></a>

6.

<form method="GET" action="发送给谁">

<input type="text" name="username" >输入框

<input type="password" name="password">密码框

<input type="submit" value="login">



明星

aa<input type="radio" name="star" value="xiaoa">单选框;

bb<input type="radio" name="star" value="xiaob">

cc<input type="radio" name="star" value="xiaoc">

<input type="sumbit">

<input type="checkbox" name=".." value=".." checked="checked">复选框



<h1>Province</h1>下拉菜单

<select name="province" >

<option value="aa">bj</option>

<option value="bb">sh</option>

<option value="cc">tj</option>

</select>

</form>把前端的数据发送给后端

课时4 css引入

1. 主流浏览器

shell外壳             内核

IE                        trident

Firefox                Gecko

Google chrome   Webkit/blink

Safari                  Webkit

Opera                  presto

2.CSS  ---> cascading style sheet 层叠样式表

3.引入

行间样式<div style="width:20px...."></div>,页面级,外部引入

4. 选择器

 id选择器 #name{}

 class选择器.name{}

 标签选择器span{}

 通配符选择器*{}

!important;直接写语句后面

5.css权重 256禁止

 !important          Infintity

 行间样式       1000

 id           100

 class|属性|伪类    10

 标签|伪元素      1

 通配符        0

课时五 css复杂选择器

1.父子选择器/派生选择器  div em{} .name1 .name2{}

2.直接子元素选择器 div>em{}

3.并列选择器 用多个限制条件选择一个元素且中间不加空格

4.分组选择器 em, p, div{}

div[class="name"]

5浏览器默认字体大小font-size:16px;

www.cs88。

6.设置字体

  font-size:16px;大小

  font-weight:bold;加粗

  font-style:italic;斜体

  font-family:arial/cursive;字体(英/楷)

  Color:#ff4400; rgb(255,255,255);

  border :10px solid black;复合属性(border-width:10px border-style:solid)

  border-top-color:

7.画三角形

一个div设置width:0px;height=0px;

  border:100px;

  border-top/right/bottom-color:transform

  border-left-color:black;

课时六

1.text-align:center/left/right;对齐方式

line-height:16px;单行文本所在高度

文本垂直居中方式:line-height=容器高度;

文本水平居中方式:text-align:center;

text-indent:2em;1em表示一个字体的宽度高度

text-decoration:underline/line-through/overline/none

2.cursor:help/pointer鼠标触碰

3.伪类选择器

a:hover{...}

4.行级元素:inline

span,strong,em,a,del,伪元素

内容决定元素所在位置

不可以通过css改变宽高

 块级元素:block

div,p,ul,ol,form,address

独占一行

可以通过css改变宽高

 行级块元素 inline-block;

img

内容决定大小

可以改变宽高

凡是带有inline属性的元素都有文字特性(有间隙)

5.*{

margin:0;

padding:0;

}

6.盒子的组成部分:

盒子边框border

内边距 padding里面不能写文本,能设背景颜色/图片

盒子内容 width+height;

div:margin+border+padding+(content)

一盒子居中于一盒子:两个div一样大,外层盒子的设置padding即可

body默认的margin:8px;

7.定位position   

  absolute:脱离原来的层定位(其他人可以用它之前的位置)

   相对于最近的定位的父级定位,没有就相对于文档定位

   relative:保留原来位置进行定位(别人不能用它之前位置)

一般relative为参照物,position定位

fixed固定定位(广告定位)

块级元素在页面内居中:

div{

position:absolute;

left:50%;取文档的宽度

top:50%; 高度

height:100px;

width:100px;

background-color:red;

margin-left:1/2的div宽度50px;

margin-top:1/2的div高度50px;

}

课时七:margin的bug解决

1. margin塌陷:父子垂直方向的margin粘合一起取最大值

 解决方式:bfc--->block format context 块级格式化上下文

 如何促发一个盒子的bfc

position:absolute;

display:inline-block;

float:left/right;

overflow:hidden;

2.margin合并:两个兄弟结构的元素,垂直方向的margin是合并的

把元素放入bfc环境里

3.盒模型/层模型/浮动模型

float:left/right:让元素排队

浮动元素产生了浮动流,块级元素看不到他们

产生了bfc的元素和文本类属性元素(inline)和浮动元素都能看到他们。

clear:both;清除周围的浮动流;只有在块级元素才能生效

课时九

  1.伪元素:可以当元素操所,但是没有html结构

实现父级(块级元素)包住浮动元素:操作父级的伪元素

span::after{

content:"";

clear:both;

display:block;

}

2.设置成position:absolute;float:left/right打内部把元素转换成inline-block;

课时十:

1.溢出容器,打点展示

p{//单行

white-space:nowrap;强制不换行

overflow:hidden;

text-overflow:ellipsis;溢出部分...显示

}

p{//多行

height:40px;

line-height:20px;保证容器内刚好装满

overflow:hidden;之后手动打...

}

2.图片代替文字:

{

text-indent:190px;首行缩进图片宽度

white-space:hidden;

overflow:hidden

}

{

width:190px;

height:0px;

padding-top:90px;

overflow:hidden;

}

 

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

块级元素能嵌套任何元素

p标签不能套块级元素,a标签里不能套a标签

课时十一

1.div.wraper>div.content

.content{

margin:0px;auto;

}

文本类元素底对齐

vertical-align:num/middle对齐方式

<!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 type="text/css">页面级

.div{

}

</style>

<link rel="stylesheet" href="lesson.css">外部css文件

</head>

<body>

</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值