web前端(6)—— 标签的属性,分类,嵌套

属性

HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中

1.HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序。

2.属性值要用引号包裹起来,通常使用双引号也可以单引号。

3.属性和属性值不区分大小写,但是推荐使用小写。

为什么html会有属性呢?

这个举个生活中的例子,你要在茫茫人海中找到你的女神,你依据什么来找呢?肯定依据她身上的某个特征来找对吧?这个特征换个词就是属性,她特有的属性,其他人没有的对吧?比如她今天穿的紫色长裙,那么你可以立马锁定女性,穿长裙,且裙子是紫色的人,这样立马就可以筛选掉一批人了对吧?然后你再根据你对你女神的了解,比如她走路的姿势,身高,体型等等的,要不了多久你就可以找到你的女神了对吧。

那么这里web页面的标签也是,就是因为它有了它的属性,第一,它的属性会有一些功能帮助我们更好编写web页面,第二,它这些属性我们在开发网站的时候可以利用某个属性来调整样式,调整此标签的行为等等的。

以上所述,就是会有属性的原因

分类

HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素

块级元素特点:display:block;

  • 每个块级元素都从新的一行开始,并且其后的元素也另起一行。独占一行
  • 元素的高度、宽度、行高以及顶和底边距都可设置。
  • 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

常用的块状元素:

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

行内元素特点:display:inline;

  • 和其他元素都在一行上;
  • 元素的高度、宽度及顶部和底部边距不可设置;
  • 元素的宽度就是它包含的文字或图片的宽度,不可改变。

常用的行内块状元素:

<img> <input>

行内块状元素的特点:display:inline-block;

  • 和其他元素都在一行上;
  • 元素的高度、宽度、行高以及顶和底边距都可设置

常用的行内元素

<a> <span> <br> <i> <em> <strong> <label> 

注意:可以通过display属性对块级元素、行内元素、行内块元素进行转换,为后面页面布局做好了准备



嵌套

标签与标签之间也可以相互包含,或者说嵌套,但并不是任意嵌套,也有规则的:

  • 块元素可以包含内联元素或某些块元素
  • 内联元素却不能包含块元素,它只能包含其它的内联元素
  • 块级元素不能放在p标签里面
  • 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:h1、h2、h3、h4、h5、h6、p

比如,li标签里可以包含div,ul,ol标签

如果还不太理解的话,看这个截图:

这是淘宝网的html源码

我标记出来的那里就很好的提现标签的嵌套关系,有兴趣的可以自己再去看看

打开淘宝网,右键鼠标,点检查,有的浏览器叫审查元素,这个根据不同浏览器而异,这个技能我希望能学会,因为以后会经常会使用这个,这个的名字叫调试界面:

好的,html结构介绍完了,后面进入css介绍

原文地址:https://www.cnblogs.com/yangva/p/9942683.html

时间: 2024-10-16 02:31:59

web前端(6)—— 标签的属性,分类,嵌套的相关文章

好程序员web前端分享css常用属性缩写

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr

Web 前端技术:CSS3---新属性,浏览器支持度,圆角边框(border-radius),阴影(box-shadow),文字与字体(text-shadow属性、word-wrap属性、@font-face规则),2D转换、过渡与动画(transform属性),3D变换

浏览器支持度 CSS3属性: columns:规定列的宽度和列数 默认宽度.列数值为auto column-width:每栏的宽度 column-gap :两栏之间的间距距离 column-count : 栏目的数目 column-rule : color(色值) width(宽度) style(线条样式) 分栏中的分割线的颜色宽度及样式的设定 1.border-radius属性(圆角边框) eg: 结合不同浏览器兼容问题,使用该CSS3新属性 eg: 2.box-shadow属性(阴影) eg

web前端——CSS 10 文本属性和字体属性

文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 color属性 文本首行缩进 text-indent 属性规定元素首行缩进的距离,单位建议使用em 文本修饰 text-decoration属性规定文本修饰的样式 属性值:none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义

web前端 2018/12/06

一.web前端2018/12/06单词: password   charset   submit   reset   checkbox  placeholder  texteara   radio  method file dorecation 二.web前端常用标签: 行内标签:b,a,strong,i,em...... 行内转块标签:display:block: 块元素标签:div,p,h1~h6, ul/ol(项下只能放li标签),  li(父级只能是ul 或者li)...... 块元素标

web前端入门到实战:HTML中img标签的src属性绝对路径问题解决办法,完全解决!

HTML中img标签的src属性绝对路径问题解决办法,完全解决 需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,tomcat,html,img,src,java 注意:不需要寻找tomcat真实路径下的server.xml去修改,这个地方不需要修改. 解决办法:1.在eclipse中找到你的项目发布的tomcat服务器,然后找到左侧Servers下对应的你的Tomcat服务器中的server.xml文件,如下图所示:

web前端入门到实战:html常用标签、包含关系、常用术语,以及网页设计中的字体分类

字体的分类: serif (衬线字体){在笔画上面有些特殊的修饰效果} sans-serif (非衬线字体){横平竖直.横就是横,点就是点} monospace ( 等宽字体) cursive ( 草书字体) fantasy (虚幻字体) 以上这些分类都是一些大的分类, 并没有涉及具体的类型,如果将字体指定为这些格式,浏览器会自己选择指定类型的字体.一般情况在指定字体的时候.把分类名称放到最后面当备用字体 html标签 html标签的语义: <div>,<span>没有任何默认样式

Web前端——Html常用标签及属性

html 常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性 表格 table td 单元格 tr 表的行 th 表头 td或th可以下面的两个属性达到跨行或跨列 表格跨行 rowspan 表格跨列 colspan 例子: <!--cellspacing 单元格间距 cellpadding单元格边距 --> <table border="1" cellspacing="0" cellpadding="0"> &l

web前端入门到实战:HTML-div和span标签

一.div标签 1.作用:一般用于配合CSS完成网页的基本布局 2.例子: <style> .head{ width: 980px; height: 100px; background: red; margin: auto; } .content{ width: 980px; height: 300px; background: green; margin: auto; } .footer{ width: 980px; height: 100px; background: blue; marg

Web前端之复选框选中属性

熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了.今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解.翻译的目的一是分享给大家,二是方便自己查阅.原文链接是:http://conceptf1.blogspot.com/2014/10/checkbox-checked-property.