使用文本

dfn标记将告诉浏览器以不同的样式显示短语“text-level
semantics”和句子其余部分。很多浏览器将该短语显示为斜体文本。

字体大小x-small可以粗略地转换越9pt的文本,字体大小x-large表示约16pt的文本。

  • 主流的4种度量值:像素(px),百分比(%),em(em),点(pt)。

<对于Web页面的列宽而言,200到400像素都是合理的。>

浏览器默认字体大小是16px(大多数浏览器如此),则将文本字体大小设置为50%,表示以8pt大小来显示文本。

以磅表示的字体大小是特定用于打印页面的。大多情况在两侧添加5%或10%的外边距。


页面结构

在HTML5之前,主要的内容元素是div元素(用于容纳通用的内容部分,主要出于对该部分内容应用样式表的目的),在HTML5之后提供了数种其他容器元素供我们使用。

  • HTML5新增的容器元素:

1;header和footer元素
用于容纳一个页面主要的header和footer区域,也可作为其他较小的header和footer部分。在单个页面上,可以存放多个header元素和footer元素。要求同时具有开始标记和结束标记。【header放在内容之中;元素放在Web页面的之外,表示页面的标志信息,该信息将被传送给浏览器和搜索引擎,如页面标题】

2;nav元素
既可用于单独使用,也可放在其他部分之内。

3;aside元素
边栏(aside)就是与主文章或部分有关的一块内容,通常情况,aside元素中的内容是重要的引文,传记信息和相关的广告或链接。

4;section和article元素
在Web上,聚合指的是使内容对其他Web网站可用,可复制这些内容。article元素用于可聚合内容;section元素更适合表示故事的章节以及其他非聚合的用于分组与主题相关的页面内容(如标题,标语,副标题),是专门为要存储在数据库中的一块内容而创建的,

5;element+ID
当在一个页面上多次使用这些容器元素时,最好为每一个容器元素添加一个id特性,为每一个内容区域定义一个名称。如果使用了id特性来定义选择器,在每一个内容区域名称之前的“#”号是必须的。

 Eg:<section  id=”introduction”>   <!--ID名称不包含空格,如果包含多个单词,首字母常采用大写来提高名称的可读性-->

section
content
</section>
#introduction{border:1px;}

6;element+class
想为多个区块定义相同的样式,或者仅仅进行少量的样式调整,用class特性来代替id特性,或在id特性之外再添加一个class特性(类选择器)。当使用class特性时,和id名称前使用“#”号一样,在样式表中必须始终使用一个点号作为类名的前缀。
【一个ID在某个页面中只能使用一次,但根据需要,类则可在多个标记中重复使用多次】


标题设置:HTML标题标记旨在以恰当的次序来使用,从第1级大标题h1直到第6级小标题h6
Eg:<h1>~~~~~~</h1>
    <h2>~~~~~~</h2>

文本组织:

1;段落

  p元素的具体功能是作为段落的一个容器,在段落开始处使用p元素的开始标记<p>,在段落的结尾处使用</p>。
  在默认情况下p标记会在段落前和后各强制产生一个空行,以提高可读性,因此没有进行缩进的必要。
  浏览器忽略使用键盘输入的任何制表符和多个空格字符。

2;换行符
使用br标记来添加换行符,br标记会导致浏览器在该行上停止输出文本,并换到页面上的下一行继续输出。只简单的在HTML文件中重复添加多个br标记即可进行多次换行。
pre是preformat (预格式化)的简写,pre标记通常以等宽字体来显示文本。

3;引用快
blockquote元素用于分隔从其他源引用的内容,默认情况,该元素将对整个引用的文本的左右两侧同时进行缩进,在文本的前后分别添加一个空行。不同的浏览器,引用文本的左右两侧的缩进不同。【在blockquote元素的内容中,可包含br元素或p元素,也可根据需要添加blockquote元素】

4;Box属性
Web页面上的每一个元素都包含在一个框模型中,通过调整框的维度可格式化页面上的内容,或指定该内容与浏览器边界的间距应该是多少。

  • box-sizing属性设置为border-box时,整个框的高度和宽度包含内容框和内边距值。
  • box-sizing属性设置为content-box时,整个框的高度和宽度不包含边框和内边距值。
    内边距值用padding属性来设置(可以分别按top,right,
    bottom,left来设置)也可写为
    blockquote {padding:25px  15px  20px  35px;}
    如果在4条边上都使用相同的内边距值,代码可简写为p {padding :  25px;}
    外边距值用margin属性来设置
  • 边框
    Eg:border-bottom-width:6px  border-radius:25px     <!--边框的width可以使用长度单位或关键字thin,medium,thick;颜色可设置1~4个颜色值;style也很多种-->
  • 5;对齐
posted on 2016-05-03 21:06  钎探穗  阅读(276)  评论(0编辑  收藏  举报