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标记与文档结构的更多相关文章

  1. CSS 基础：HTML 标记与文档结构(1)<思维导图>

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  2. WEB笔记-1、HTML 标记与文档结构

    1.HTML 标记与文档结构   1.1 块级(block)和行内(inline)标签   块级标签 <h1>-<h6> : 6级标签,h1表示最重要(h1 不仅仅是最大最突出 ...

  3. 《CSS 设计指南》学习笔记 一

    本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...

  4. CSS 设计指南(第3版) 初读笔记

    第1章 HTML标记与文档结构 关于<title>标签:搜索引擎会给<title>标签中的文字内容赋予很高的权重.而且这些文字也会作为网页标题出现在搜索结果列表中. 无论你想了 ...

  5. CSS设计指南之浮动与清除

    原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...

  6. CSS设计指南之定位

    原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...

  7. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  8. 重温CSS之文档结构

    我们来看看几个基本的HTML页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. HTML5的文档结构和新增标签

    一．HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...

随机推荐

  1. Java学习笔记二十三:Java的继承初始化顺序

    Java的继承初始化顺序 当使用继承这个特性时,程序是如何执行的: 继承的初始化顺序 1.初始化父类再初始子类 2.先执行初始化对象中属性,再执行构造方法中的初始化 当使用继承这个特性时,程序是如何执 ...

  2. java入门---基本数据类型之内置数据类型

        变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间.内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据.     因此,通过定义不同类型的变 ...

  3. Java基础——NIO（二）非阻塞式网络通信与NIO2新增类库

    一.NIO非阻塞式网络通信 1.阻塞与非阻塞的概念  传统的 IO 流都是阻塞式的.也就是说,当一个线程调用 read() 或 write() 时,该线程被阻塞,直到有一些数据被读取或写入,该线程在 ...

  4. WPF 应用程序资源、内容和数据文件

    MSDN相关介绍: http://msdn.microsoft.com/zh-cn/library/aa970494(v=vs.100).aspx 内容文件(Content Files)内容文件简单的 ...

  5. git忽略项gitegnore配置

    在git中如果想忽略掉某个文件, 不让这个文件提交到版本库中,可以使用修改 .gitignore 文件的方法.这个文件每一行保存了一个匹配的规则 例如 # 此为注释 – 将被 Git 忽略 *.a # ...

  6. [bzoj5278][Usaco2018 Open]Out of Sorts

    有点厉害,,,不会啊 答案就是所有前i个数有多少不在前i个里的max? 为啥啊求助

  7. 重庆Uber优步司机奖励政策（12月28日到1月3日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  8. Andorid自定义attr的各种坑

    本文来自网易云社区 作者:孙有军 在开发Andorid应用程序中,经常会自定义View来实现各种各样炫酷的效果,在实现这吊炸天效果的同时,我们往往会定义很多attr属性,这样就可以在XML中配置我们想 ...

  9. path.resolve()和path.join()的区别

    path.join()  组装路径.该方法的主要用途在于,会正确使用当前系统的路径分隔符,Unix系统是/,Windows系统是\.路径字符中可以使用..或../进行相对路径的计算,其它路径表示符会被 ...

  10. EditorGUI控件输入监听

    EditorGUI控件输入监听 在做编辑器开放的过程中,有时候要对用户输入进行判断和限制,但EditorGUI控件却没有触发回调,而是提供了一种麻烦的办法--使用EditorGUI.BeginChan ...