css所有标签及其属性汇总(HTML,CSS里面关于 id,class,name 属性的区别和用法)

本文目录
- HTML,CSS里面关于 id,class,name 属性的区别和用法
- cssdiv常用标签有哪些
- CSS的几个属性display,float,clear,overflow,visibility
- 归纳总结学习了哪些html标签和css属性
- CSS常用的标签都有什么
- css3行内标签与块标签有哪些
- css文件中如何设置标签的各种属性
HTML,CSS里面关于 id,class,name 属性的区别和用法
1、id: id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称。
用法:若一个标签的id="myid",那么使用它的时候通过”$("#myid")“来获取当前标签或使用“#myid{}”来定义CSS样式。
2、class:根据用户定义的标准对一个或多个元素进行标记和定义,一个标签可以有多个class,例如class="myclass1 myclass2",当前标签就有两个class,分别为myclass1和myclass2。
用法:若一个标签有一个class="myclass",那么获取这个标签可以使用$(".myclass"),同时使用”.myclass{}“来定义CSS样式。
3、name:从名字可以知道这是用于定义一个标签的名字的属性,name可用于数据获取,常用于表单数据的获取。
用法:若一个输入框的name="myname" ,常用request.getparameter("myname")来获取当前输入框的值。
cssdiv常用标签有哪些
1、在制作导航或者是列表的时候一般用的到的有:ul、li、a、font(size、color、family~),img标签也有会用到,background这个标签的属性也是要的;
2、在处理定位的时候,position这个元素也是要的,float属性,用的也很多,还有就是width,height对于各个块的定义;3、在处理文字的文字的时候:有h,span,p这些都是常用的,,当然还有很多,这里只是一些我们会经常用到的。
CSS的几个属性display,float,clear,overflow,visibility
***隐藏网址***
display属性:block/inline/nonedisplay:block(作用是把行属性标签显示成块属性标签,可以设置宽高) ;
display:inline(作用是把块属性标签显示成行属性标签,这时块属性标签就不能设置宽高啦);
display:none(作用是使所控制的标签不显示)
visibility:hidden(是设置元素的框的不可见,但是在布局中的位置是不变的)
它和display:none的区别就在于后者不会占用那个位置,下一个元素会直接覆盖它,而前者是会占用那个布局,只是不显示内容,是 一片空白;并且下载的时候对于display:none就不会把不显示的元素给下载下来,而visibility:hidden则会把不显示的元素给下 载下来;
float(浮动,照样受文档流的限制)行标签float之后就可以设置它的宽高float:none/left/right
none : 对象不浮动
left : 左浮动
right : 右浮动
clear(清除浮动)clear:both/none/left/right
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
overflow(超出)overflow:visible/auto/hidden/scroll
visible : 不剪切内容也不添加滚动条
auto : 默认属性
hidden : 隐藏超出内容
scroll : 总是显示滚动条
visibility(可视)visibility : inherit/visible/hidden
inherit : 继承上一个父对象的可见性
visible : 对象可视
hidden : 对象隐藏
几种图片格式的差别:gif:不支持半透明
jpg:支持透明
png:部分支持透明,需要额外处理
==============
***隐藏网址***
一、块级元素:block element
每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;
块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如《form》只能包含块级元素。其他的块级元素则可以包含 行级元素如《P》.也有一些则既可以包含块级,也可以包含行级元素。
p 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。
二、行内元素:inline element
也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。
三、block(块)元素的特点
①、总是在新行上开始;
②、高度,行高以及外边距和内边距都可控制;
③、宽度缺省是它的容器的100%,除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
四、inline元素的特点
①、和其他元素都在一行上;
②、高,行高及外边距和内边距不可改变;
③、宽度就是它的文字或图片的宽度,不可改变
④、内联元素只能容纳文本或者其他内联元素
对行内元素,需要注意如下
设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。
五、常见的块状元素
address _ 地址
blockquote _ 块引用
center _ 举中对齐块
dir _ 目录列表
p _ 常用块级容易,也是CSS layout的主要标签
dl _ 定义列表
fieldset _ form控制组
form _ 交互表单
h1 _ 大标题
h3 _ 副标题
h3 _ 3级标题
h4 _ 4级标题
h5 _ 5级标题
h6 _ 6级标题
hr _ 水平分隔线
isindex _ input prompt
menu _ 菜单列表
noframes _ frames可选内容,(对于不支持frame的浏览器显示此区块内容
noscript _ 可选脚本内容(对于不支持script的浏览器显示此内容)
ol _ 有序表单
p _ 段落
pre _ 格式化文本
table _ 表格
ul _ 无序列表
六、常见的内联元素
a _ 锚点
abbr _ 缩写
acronym _ 首字
b _ 粗体(不推荐)
bdo _ bidi override
big _ 大字体
br _ 换行
cite _ 引用
code _ 计算机代码(在引用源码的时候需要)
dfn _ 定义字段
em _ 强调
font _ 字体设定(不推荐)
i _ 斜体
img _ 图片
input _ 输入框
kbd _ 定义键盘文本
label _ 表格标签
q _ 短引用
s _ 中划线(不推荐)
samp _ 定义范例计算机代码
select _ 项目选择
small _ 小字体文本
span _ 常用内联容器,定义文本内区块
strike _ 中划线
strong _ 粗体强调
sub _ 下标
sup _ 上标
textarea _ 多行文本输入框
tt _ 电传文本
u _ 下划线
七、行内元素与块级元素有什么不同?
区别一:
块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度
行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二:
块级:块级元素可以设置宽高
行内:行内元素不可以设置宽高
区别三:
块级:块级元素可以设置margin,padding
行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
区别四:
块级:display:block;
行内:display:inline;
可以通过修改display属性来切换块级元素和行内元素
??
归纳总结学习了哪些html标签和css属性
一、html的文档结构
doctype 文档类型
Strict:包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
Transitional:包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
Frameset:等同于Transitional但允许框架集内容。如果要写框架就要声明这一种。
head
title:浏览器工具栏中的标题、页面被添加到收藏夹时显示的标题、显示在搜索引擎结果中的页面标题
meta:元数据不会显示在页面上,但是对于机器是可读的。
规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
《meta》 标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
style:标签用于为 HTML 文档定义样式信息。
body 主要就是div和各类标签
二、用div来控制布局
布局原则:从大到小、从上到下、从左到右
盒子模型:有宽(width)高(height),有边框(border)、有外边距(margin)、有内边距(padding)
浮动布局:div可以”飘“起来(float)、也可以清除浮动(clear)
自己可以尝试用简单的div+背景色,来试着布局,增强自己的”大局观“。
三、用CSS来控制显示效果
先了解各类选择器:di、class、标签、派生、伪类、通配
再了解各类效果如何控制
段落控制
text-align 文本水平对齐设置
text-decoration 划线方式
letter-spacing 文本中单字的间隔
text-transform 大小写转换
文字控制
color 颜色设置 font-style 斜体设置 font-weight 文字粗细 font-size 文字大小 font-family 文字字体
背景控制
background-color 颜色
background-image 图片
background-repeat 图片平铺
background-attachment 滚动
background-position 图像在背景中的位置
CSS的引入方式:页内style标签、外部CSS文件、行内style标签、import导入
CSS的初始化
原因:浏览器对元素有默认的CSS参数,且可能不一致,导致浏览器之间显示效果不一样
解决方法:统一对常用元素常用CSS参数,手动设定统一效果
四、html标签
无语义标签:div、span
有语义标签
h1-h6 标题
p 段落
img 图片
a 超链接和锚点
ul 无序列表
ol 有序列表
table 表格
CSS常用的标签都有什么
属性有很多吧,常用的,background font color height width margin padding border 好像基本上都要用到,太多了。这些属性不一定要让你全记住,但是在你需要的时候,会查手册,就可以了,再说,当你编写的代码多了,就会知道哪些比较常用。
css3行内标签与块标签有哪些
内联元素(行内元素)内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h3 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
css文件中如何设置标签的各种属性
标签属性:id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
可选属性:href,target,name等
事件属性:onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

更多文章:
织梦php版本(织梦后台添加文章时,提示标题不能为空,但是,标题、内容和分类都是填好的,是DedeCMS-V5.7-GBK-SP1版本)
2025年6月21日 23:00
form在信封上是什么意思(在信封上面写From与To分别代表哪个英文是收件人,哪个英文是发件人急!先谢谢!)
2026年9月13日 19:30
readprocessmemory资源消耗(readprocessmemory问题)
2026年8月10日 21:00
essentials插件(minecraft 怎么安装Essentials插件)
2026年3月27日 00:45
s11全球总决赛集锦(edg晋级s11决赛(夺取冠军之路))
2026年8月17日 09:00
keyset(Set keys=Map.keyset()怎么理解)
2025年10月20日 14:00
js注册成功跳转页面代码(如何使用JavaScript实现 按钮跳转页面功能)
2026年7月24日 02:45
securities(有关securities, stock, shares, bonds的概念~)
2025年7月8日 15:45
export trade(export trade是什么意思)
2026年5月26日 10:00
css鼠标悬停背景颜色变化(用css样式怎样实现鼠标放在背景图片上,背景图片的颜色改变)
2026年3月17日 16:30
sql中connect的用法(C#中,用SqlConnection怎么连接数据库)
2026年9月2日 22:45
account短语用法(On no account can是什么意思)
2026年5月2日 17:30












