html基础

最新推荐文章于 2023-07-05 22:10:05 发布

Vivian_shuang

最新推荐文章于 2023-07-05 22:10:05 发布

阅读量335

点赞数

分类专栏： HTML 文章标签： html 行标签块标签

本文链接：https://blog.csdn.net/Vivian_shuang/article/details/51842698

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

不写会在ie8以下进入怪异模式

怪异模式：content+margin

结构来分：单标签和双标签（有无闭标签和是否可以嵌套）

属性来分：行标签和块标签

～行标签特点：

（1）在一行显示

（2）不能设置宽高和纵向margin

（3）内容撑开宽高

（4）只能嵌套行标签（a标签不能被a标签嵌套）

span、a、img、strong、em、input

ps：img和input标签可以设置宽高和纵向margin

～块标签特点：

（1）独占一行

（2）可以设置宽高和纵向magin

（3）宽度百分百

（4）可以任意嵌套（p标签不能嵌套块标签）

div、h1-h6、ul、ol、li、dl、dt、dd、p、form、hr、br

～特殊标签：

table、tr、th、td

组合使用的标签：

form>input、table>tr>th\td、select>option、ol\ul>li、dl>dt>dd

黑帽

灰帽

白帽

优化的关键词：

（1）h1-h2（h1只能有1个，h2最多有10个）

（2）strong

（3）meta：keywords(看不到的)、description(搜索后能看到的)

（4）img-alt

（5）title

（6）a标签：提供外链

（1）colspan跨列

（2）rowspan跨行

（3）cellspacing外边距

（4）cellpadding内边距

（5）border边框

action：提交的地址

method：提交的方式

（1）post：安全性高，请求压力大，速度慢，无法通过复制链接访问该页面

应用场景：账户登录或信息采集页面

（2）get：安全性低，不会造成压力，速度快

应用场景：无特殊需求页面

input:

（1）text文本框

（2）password密码框

（3）submit提交表单

（4）radio单选（单选项name相同）

（5）checkbox多选（name相同）

（6）button按钮

（7）reset重置

（8）file上传

（1）标签换行

（2）标签缩进

（3）标签关闭

（4）标签名小写

（5）属性书写规范

（6）注释写在上面

（1）外部引入：

优点：

1.一个css控制多个页面

2.易改版，便于维护

3.减少代码量，代码简洁

4.易于分工合作

缺点：

1.相对于单个页面有垃圾代码

2.会对服务器造成压力

应用场景：

访问量小的页面、企业网站

（2）头部引入：

优点：

1.速度快

2.没有请求压力

3.相对于外部引入单页代码量少

缺点：

1.不易改版维护

2.代码较乱，不易于前后台沟通

应用场景：

访问量较大页面（主页、活动页面）

（3）标签内引入

优点：

1.优先级最高

缺点：

1.多余代码多

2.没有代码提示

3.不易于改版维护

应用场景：

配合js使用

（1）标签名选择器

（2）类选择器：（.）

（3）id选择器：（＃）

（4）后代\派生选择器（“空格”）

（5）组合选择器

（6）群组选择器（,）

（7）伪类：（:hover）

ps：只能修改下级元素样式

（8）全局选择器：（*）用来做初始化

标签内引入：style

id＝100

class＝10

标签名＝1

ps：

（1）瘦死骆驼比马大（100个1也比不过一个10）

（2）当优先级相同时，后面样式覆盖前面样式

~font:字体

（1）font-family：字体

（2）font-size：字体大小（px／em／rem）

（3）font-style：字体风格（normal默认、italic斜体、oblique倾斜）

（4）font-weight：字体粗细（1.bold加粗700、bolder更粗、lighter更细、normal默认400。2.number：0-900）

（5）color：字体颜色

~text:文本

（1）text-align:横向对齐方式

（left、center、right）

（2）text-indent:首行缩进(px\em)

（3）text-decoration:文本修饰线（1.none无／2.underline下划线／3.overline上划线／4.line-through删除线）

（4）line-height:行间距（一般用于单行纵向居中）

（5）vertical-align:(top\middle\bottom不建议使用，一般只用于table模式下的纵向居中)

（6）word-spacing:字间距（只能识别中文和空格）

（7）letter-spacing:字符间距

～background背景

（1）background-color:背景颜色（1.颜色单词。2.＃＋16进制。3.rgb）

（2）background-image:url();背景图片

（3）background-repeat:平铺（1.repeat。2.no-repeat。3.repeat-x横向平铺。4.repeat-y纵向平铺）

（4）background-position:背景位置（两个3中写法：px\百分比\top、bottom、left、right、center）

（5）background-attachment:图片滚动（两个值：1.scroll跟随页面。2.fixed定位在窗口）

（6）background

margin

padding

(top\left\right\bottom)

兄弟之间用margin，父子之间用padding

标准模式：content＋padding＋border＋margin

怪异模式：content＋margin

强制进入怪异模式的方法：box-sizing:border-box;

盒模型横向距中：

margin: 0 auto;

被设置距中的元素必须具有宽度

display:转换

（1）inline转换为行元素

（2）block转换为块元素

（3）inline-block转换为行块元素

（4）table\table-cell转换为table元素（主要用于纵向距中，与vertical-align一起使用）

（5）none:隐藏（不占页面内容大小，作为元素隐藏和显示的切换）

left左浮动、right右浮动

（1）左浮动以浮动元素右边为基准，如果放不下则以下边为基准

（2）右浮动以浮动元素左边为基准，如果放不下则以下边为基准

特点：

（1）不在文本流

（2）内容撑开宽高

（3）可以设置宽高margin、padding

（4）在一行显示

（5）可以清除默认间隙

（6）所有元素都可以浮动

浮动之后需要清除浮动，清除浮动方法：

（1）overflow:hidden;加给浮动元素父级

子级所有元素都要浮动

（2）clear:both;加给浮动元素下一个兄弟级元素，如果没有则加一个空元素进行清除浮动

（3）给父级加浮动可以清除浮动，但是父级也要清除浮动（不常用）

应用场景：用于左右布局（非常常用）

(1)fixed:“一直”相对于窗口进行定位

特点：

1.不在文本流

2.内容撑开宽高

3.可以设置宽高和margin、padding

应用场景：

应用于一直相对于窗口进行定位的元素（导航栏、广告）

(2)absolute绝对定位:相对于祖辈级最近的position元素进行定位，如果没有则相对于窗口进行定位。

特点：

1.不在文本流

2.内容撑开宽高

3.可以设置宽高和margin、padding

应用场景：

应用于重叠布局，与其它定位配合使用（一般与relative进行配合）

(3)relative相对定位:相对于自身进行定位

特点：

1.在文本流，但是样式会发生重叠

2.宽高和行块标签特点默认（该啥样还啥样）

3.在没有设置left、top、bottom、right值的情况下，与没设置position无差别。

应用场景：

1.偶尔可以进行微调（在不影响布局情况下）

2.与absolute配合使用，给其父级设置，作为absolute的定位基准。

定位通过left、top、bottom、right进行定位调整，其意思为距离四个边的距离（除relative外）

（px、百分比）

z-index:重叠顺序，值大的在上面，可以为负数。

ps：只能用于兄弟级排序

Vivian_shuang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础

h5版本声明 --> 不写会在ie8以下进入怪异模式怪异模式：content+margin 结构来分：单标签和双标签（有无闭标签和是否可以嵌套）属性来分：行标签和块标签～行标签特点：（1）在一行显示（2）不能设置宽高和纵向margin （3）内容撑开宽高（4）只能嵌套行标签（a
复制链接

扫一扫