CSS设计指南之一 HTML标记与文档结构
HTML标记与文档结构
之所以从HTML讲起，是因为CSS的用途就是为HTML标记添加样式。
1.1 HTML标记基础
对于每个包含内容的元素，根据它所包含的内容是不是文本，有两种不同的方式给它们加标记，一种是使用闭合标签，另一种是使用自闭合标签。
1.1.1 文本用闭合标签
<标签名 属性1="属性值">文本内容</标签名>
标题、段落等文本元素都要求闭合标签，也就是要有一个开标签和一个闭标签。
比如:<p>Words by Paul</p>
1.1.2 引用内容用自闭合标签
<标签名 属性1="属性值" />
非文本内容是通过自闭合标签显示的。闭合标签与自闭合标签的区别在于，闭合标签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在HTML页面加载的时候，额外向服务器发送请求，以取得自闭合标签引用的内容。
比如:<img src="data:images/cisco.jpg" alt="Cisco icon" />
1.1.3 属性
属性负责为浏览器提供有关标签的额外信息，每个HTML标签都可以添加属性，class和id等属性几乎可以适用于任何标签，而有些属性则适用于特定的标签类型，比如src属性只适用于类似<img>这样的标签。
1.1.4 复合元素
所谓复合元素即它们是由多个标签共同组成的。比如<li>是一个列表项，它只在<ol>(ordered list,有序列表)和<ul>(unordered list,无序列表)这两种列表标签中才有效。
<ol>
<li>step </li>
<li>step </li>
<li>step </li>
</ol>
1.2 HTML文档剖析
1.2.1 块级元素和行内元素
几乎所有HTML元素的display属性值要么是block，要么为inline.最明显的一个例外是table元素，它有自己特殊的display属性值。
块级元素(比如标题和段落)会相互堆叠在一起沿页面向下排列，每个元素分别占一行。而行内元素(比如链接和图片)则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。无论你想了解哪个HTML元素，第一个要问的问题都应该是:它是块级元素还是行内元素？
<p>、<div>默认为块级元素,但可显示修改其display属性，转换为行内元素。
<head runat="server">
<title>Handsome paul</title>
<meta charset="utf-8" /> <style>
p {
display: inline;
} div {
display: inline;
} </style> </head>
<body>
<form id="form1" runat="server">
<p>This is a p element</p> <div>This is a div element</div>
</form>
</body>
1.3 文档对象模型DOM
DOM是从浏览器的视角来观察页面中的元素以及每个元素的属性。，由此得出这些元素的一个家族树。通过DOM，可以确定元素之间的相互关系。在CSS中引用DOM中特定的位置，就可以选中相应的HTML元素，并修改其样式属性。
CSS设计指南之一 HTML标记与文档结构的更多相关文章
- CSS 基础：HTML 标记与文档结构(1)<思维导图>
这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...
- WEB笔记-1、HTML 标记与文档结构
1.HTML 标记与文档结构 1.1 块级(block)和行内(inline)标签 块级标签 <h1>-<h6> : 6级标签,h1表示最重要(h1 不仅仅是最大最突出 ...
- 《CSS 设计指南》学习笔记 一
本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...
- CSS 设计指南(第3版) 初读笔记
第1章 HTML标记与文档结构 关于<title>标签:搜索引擎会给<title>标签中的文字内容赋予很高的权重.而且这些文字也会作为网页标题出现在搜索结果列表中. 无论你想了 ...
- CSS设计指南之浮动与清除
原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...
- CSS设计指南之定位
原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...
- CSS设计指南之理解盒子模型
原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...
- 重温CSS之文档结构
我们来看看几个基本的HTML页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- HTML5的文档结构和新增标签
一．HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...
随机推荐
- Simple, Poetic, Pithy
源自:Rob Pike points out Simple, Poetic, Pithy Don't communicate by sharing memory, share memory by co ...
- Scala学习笔记（五）—— 元组和集合
1. 映射 映射Java中的Map,即Key/Value的数据形式 映射的创建,有以下两种方法 scala> val map =Map("Lisa" -> 90 , & ...
- EEPROM读写学习笔记与I2C总线（二）
无论任何电子产品都会涉及到数据的产生与数据的保存,这个数据可能并不是用来长久保存,只是在运行程序才会用到,有些数据体量较大对于获取时效性并不太强,各种各样的数据也就有不同的存储载体,这次在EEPROM ...
- POJ-2155：Matrix（二维树状数祖）
Matrix Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 31892 Accepted: 11594 Descript ...
- pix2code开发笔记
1.软件安装 首先需要安装Python3和pip (1) Python3 环境搭建 Window 平台安装 Python: https://www.python.org/downloads/wind ...
- 统一建模语言——UML
一.UML概述 Unified Modeling Language (UML)又称统一建模语言或标准建模语言,是始于1997年一个OMG标准,它是一个支持模型化和软件系统开发的图形化语言,为软件开发的 ...
- MapWinGIS使用
.net语言中使用MapWinGIS.ocx http://www.cnblogs.com/kekec/archive/2011/03/30/1999709.html 基于MapWinGis的开发探索 ...
- restTemplate访问接口
后端技术精选 每天推送精选技术好文,涉及Java.python.Linux及MySQL,欢迎关注微信公众号:后端技术精选 随笔 - 52, 文章 - 0, 评论 - 50, 引用 - 0 Spring ...
- Myeclipse - 问题集 - specified vm install not found
In Eclipse, click the ant file -- Run As -- External Tools Configuration and click on the JRE tab. S ...
- 「日常训练」Paths and Trees（Codeforces Round 301 Div.2 E）
题意与分析 题意是这样的,定义一个从某点出发的所有最短路方案中,选择边权和最小的最短路方案,称为最短生成树. 现在求一棵最短生成树,输出总边权和与选取边的编号. 我们首先要明白这样一个结论:对一个图求 ...