Skip to main content

HTML块级元素属性说明

在谈论CSS布局时,我们需要提前知道一些东西。对于html各种标签/元素,可以从块的层面做一个分类:要么是block(块元素),要么是inline(内联元素):









block元素的特点:
  • 总是另起一行开始;
  • 高度,行高以及顶、底边距都可控制;
  • 宽度缺省是它所在容器的100%,除非设定一个宽度。
  • inline元素的特点:
  • 和其它元素都在一行上;
  • 高度,行高以及顶、底边距不可改变;
  • 宽度就是它所容纳的文字或图片的宽度,不可改变。

  • 下面对它们的性质及应用做进一步说明:
    块元素(block element) 通常作为其它元素的容器,它可以容纳内联元素和其它块元素。
      我们知道默认情况下,块元素会顺序以每次另起一行的方式往下排,而通过CSS控制其样式,我们可以改变这种默认布局模式,把块元素摆放到你想要的位置上去。需要指出的是,table标签也是块元素的一种,基于table表格和基于CSS+DIV的布局,在使用者看来除了页面载入速度的差别(table在所有内容元素加载完成后才显示),没有其它的差别。但是从页面的源代码来看,这种差异就非常大了。基于良好结构理念设计的CSS布局源码,至少能让没有web开发经验的用户很容易找到连续的页面内容。从这个角度来说,CSS layout code应该有更好的美学体验。
      我们可以把模块化的DIV想象成一个个box,然后把它们按自己的意愿排列组成完整的内容,网页布局设计就是遵循了同样的模式。






    块元素(block element) HTML标签分类明细


    • address - 地址
    • blockquote - 块引用
    • center - 举中对齐块
    • dir - 目录列表
    • div - 常用块级容易,也是css layout的主要标签
    • dl - 定义列表
    • fieldset - form控制组
    • form - 交互表单 (只能用来容纳其它块元素)
    • h1 - 大标题
    • h2 - 副标题
    • h3 - 3级标题
    • h4 - 4级标题
    • h5 - 5级标题
    • h6 - 6级标题
    • hr - 水平分隔线
    • isindex - input prompt
    • menu - 菜单列表
    • noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
    • noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
    • ol - 排序表单
    • p - 段落
    • pre - 格式化文本
    • table - 表格
    • ul - 非排序列表


    内联元素(inline element) 一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其它内联元素。
      为了比较明确的表现出 block 与 inline 的区别,我们可以利用它们各自的代表元素div和span的演示进行说明:








    XXXXXXXXX
    This's a DIV layout
    XXXXXXXXX
    div另起一行,它的形状不受内部文字的影响
    XXXXXXXThis's a span layoutXXXXXXX 所有元素在一行,span刚好包容文字







    内联元素(inline element) HTML标签分类明细


    • 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 - 定义变量

    可变元素 是基于以上两者随环境而变化的,它的基本概念就是根据上下文关系确定该元素是块元素还是内联元素。一旦确定了它的类别,它就遵循块元素或者内联元素的规则限制。






    可变元素  HTML标签分类明细


    • applet - java applet  
    • button - 按钮  
    • del - 删除文本  
    • iframe - inline frame  
    • ins - 插入的文本  
    • map - 图片区块(map)  
    • object - object对象  
    • script - 客户端脚本



    但是通过CSS,我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。例如,我们可以对块元素[ ul ]标签加上 display:inline 属性,让原本垂直的列表水平显示,这在我们设置Blog导航条时得到了广泛应用;我们也完全可以把内联元素[ cite ]加上 display:block 这样的属性,让它也有每次都从新行开始的属性。

    Comments

    Popular posts from this blog

    Cloudera Hadoop 集群安装(ubuntu + CDH5.10)

    前言 CDH是Cloudera公司的Hadoop发行版,基于稳定版本的Apache Hadoop构建,包含Hadoop,Spark,Hive,Hbase和一些工具等,并集成了很多补丁,可直接用于生产环境。通过Cloudera Manager可以简化hadoop各组件的部署和配置过程。 目前CDH对ubuntu支持的最高版本为14.04,因此不建议使用更高版本的ubuntu来部署CDH。 环境准备: 1.配置网络(所有节点) 修改hostname: $ sudo vi /etc/hostname cdh01 修改IP地址: $ sudo vi /etc/network/interfaces auto eth0 iface eth0 inet static         address 172.16.13.11         netmask 255.255.255.0         gateway 172.16.13.254 重启网络服务生效: $ sudo ifdown eth0 && sudo ifup eth0 修改ip与主机名的对应关系: $ sudo vi /etc/hosts 172.16.13.11 cdh01 172.16.13.12 cdh02 172.16.13.13 cdh03 2.配置SSH(所有节点) 启用root登陆(CDH5.10需要进行此步操作) $ sudo vi /etc/ssh/sshd_config #PermitRootLogin without-password PermitRootLogin yes $ sudo service ssh restart $ sudo passwd root 设置ssh无密码登陆 //在主节点上执行一路回车,生成无密码的密钥对 $ ssh-keygen -t rsa //将生成的密钥文件复制到其它节点 $ ssh-copy-id cdh02 $ ssh-copy-id cdh03 测试: 在主节点上ssh hadoop2,正常情况下,不需要密码就能直接登陆进去了。 3.安装Oracle JDK(所有节点) 运行CDH5必须使用Oracle的Jdk,需要Java 7及以上版本支持。 在Oracle的官网下载jdk包,解压到相应目录,例如/usr/java/jdk1.8.0_

    Tor洋葱路由的设置与使用

    先说明一下,这里只是利用Tor来访问被GWF屏蔽的优秀服务(如Wikipedia、Blogger、GG App等),并不侧重于如何匿名访问网络。以下Tor设置方法适用于: MS Windows(2000/XP/Vista/Server)系统 第一步:下载并安装Tor 关于Tor(The Onion Router,洋葱路由)的工作原理,可以参考枪旗工作室的说明 ( http://tcno.net/doc/tor/#para1 )。在Windows下安装配置Tor已经非常容易了,直接下载这样一个Tor的Windows 捆绑软件包( Vidalia-Tor-Privoxy Bundle ),其中已经预先配置好这些软件能够一同工作。 安装前可以看到套件捆绑了哪些软件:Tor、Vidalia(Tor 的一个图形用户界面)和 Privoxy(Web 代理软件)、Torbutton(Firefox浏览器插件)全选这些软件进行安装。 安装完成后会自动运行Vidalia,在弹出的控制面板上可以看到当前的状态,Tor已经运行了,此时不需要再进行其它设置了。 第二步:配置浏览器使用Tor 如果使用 Firefox 浏览器,Bundle里已经附带了 Torbutton 插件 ,打开/重启Firefox就会在右下角显示Tor Enabled/Disabled,单击它可以选择是否开启Tor代理功能。 对于 Internet Explorer 没有现成的插件可用,需要手动配置代理设置,也很容易。 菜单位置 工具 - Internet 选项 - 连接 - 局域网设置 - 代理服务器 - 高级 - 服务器 在代理理服务器地址栏里填入 "localhost",端口为 "8118"(Privoxy不支持FTP代理,填不填都无所谓了);注意套接字SOCKS代理的端口为 "9050",如果有其它选项,请选择Socks5,然后"确定"即可。 对于 Maxthon ,如果对IE设置了Tor可以选择“使用IE代理设置”,或者手动添加一个代理列表,内容与上面填写的一样,然后选择应用就可以了。 这里说明一下 Privoxy 的作用,因为当直接使用 SOCKS 代理时,浏览器会泄露

    Bitwarden 配置 Let’s Encrypt 证书

    由于在内网环境部署的Bitwarden,不能通过安装脚本自动申请 Let’s Encrypt 的证书。 起初我用了一个自签名证书,发现特别不好使,虽然在firefox 跟 chrome 内核的浏览器上都能通过插件访问,但必须添加信任才行,特别是用Bitwarden Desktop 客户端连的时候,一直报错,可能是不认自签名证书。 于是琢磨了下怎么手动申请Let’s Encrypt的证书用于内网,对过程简单梳理如下。 自签名证书 | Self-Signed Certificate 如果你在内网环境只需要自签名证书,可以参考Bitwarden的帮助文档( Installing and depoying )进行设置: 1、生成自签名证书: //一条命创建私钥和证书: openssl req -x509 -newkey rsa:4096 -sha256 –nodes -days 10950 \    -keyout privite.key -out identity.crt \    -subj "/C= US /ST= New York /L= New York /O= Company Name /OU= CREAST /CN= bw.creast.win " 将生成的文件放到 /ssl 目录下: privite.key     ~/bwdata/ssl/ bw.creast.win/private.key identity.crt      ~/bwdata/ssl/ bw.creast.win/identity.crt 2、生成.pfx格式证书文件: //一条命令将前面生成的私钥和证书打包成需要的pfx格式文件 openssl pkcs12 -export -out ./ identity.pfx -inkey privite.key \    -in identity.crt -certfile identity.crt -passout pass: IDENTITY_CERT_PASSWORD 注意 IDENTITY_CERT_PASSWORD 跟./env/global.override.e