关于HTML和CSS一些鸡零狗碎的事

原文发表于我自己的服务器www.jjxiaoliu.cn;不过这个服务器我可能不打算续费了,所以搬到cnblogs来。

有些关于HTML和CSS的内容不值得单独列一篇文章,全都放在这里了。

我们可以利用注释来给原本不能断行的HTML代码增加断行:
<!– 下面的代码可能出现在使用<ul>和<li>制作的简单横向菜单中(配合CSS) –>
<li>item1</li><!–
–><li>item2</li>

指定charset的两种写法:
<meta charset=”utf-8″ />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
这两种几乎是一样的。所以一般用短些就可以了。

我们可以使用download属性来设定用户下载到本地的文件名:
<a href=”something_to_be_download” download=”short_name”>Download something</a>

用于标记计算机代码的HTML标签:

  • <code>,标记通用计算机代码
  • <var>,标记变量名
  • <kbd>,标记用户输入
  • <samp>,标记计算机输出

<thead> .vs. <th>
<thead>仅描述表格结构;<td>一般而言会使得浏览器以更醒目的方式渲染标签内容(表现形式)。
如果对上一段文字感到拧巴,可以参考这一篇:
HTML与CSS:结构与表现
另外,在打印长表格时,<thead>和<tfoot>会自动重复出现在每一页的头和尾。从这点来说,它们更像是页头和页尾。
在需要时,<thead>和<th>也是可以混用的。可以参考MDN上关于<thead>标签的例子

pseudo-classes与pseudo-element
pseudo-classes匹配整个标签,而pseudo-element匹配标签内的特定元素。
例如:p:first-child匹配作为第一个child元素出现的p标签;p::first-letter匹配p标签内的第一个字符。
顺便说一下,pseudo-classes的child是指标签本身作为child,不是指标签的下级child。且child计数从1开始。

CSS的属性名称不区分大小写,但属性值区分大小写。
[name=”jjxiaoliu”]等价于[Name=”jjxiaoliu”],但不等价于[name=”JJxiaoliu”]。

CSS可以用紧邻的[]匹配多个属性。
[country=”china”][province=”jiangsu”]可以匹配如下标签:
<p country=”china” province=”jiangsu”>Jiangsu Province, China</p>
注意两个[]之间不能有空格。
如果两个[]之间有空格,那么将形成Descendant selector,于是匹配的将是如下形式的HTML结构:
<div country=”china”>
<p province=”jiangsu”>Jiangsu Province, China</p>
</div>

class和id联合使用
p.class_name#id_name
类似的,class也可以和属性联合使用:
p.class_name[attribute]

css的margin属性
如果相邻元素都是正值,那么取正最大;
如果相邻元素都是负值,那么取负最大;
如果相邻元素正负相反,那么取两者的和。

css的position属性
如果设置为absolute,那么位置值默认是相对于html标签,除非其祖先设置过position为非static值:即absolute的位置值是相对于其祖先元素里除去用static定位以外的最近一个;
如果设置为relative,那么位置值是相对于其“原本(没有设置位置的情况下)应该在的”位置。
如果设置为fixed,那么位置值是相对于浏览器窗口。

猜你喜欢

转载自www.cnblogs.com/byeyear/p/10719723.html
今日推荐