zoukankan      html  css  js  c++  java
  • lesson-4 段落标记

    lesson-4 段落标记

    基本段落标记

    段落标记

    基本语法:

    <p align="right|center|left">...</p> 
    注:大部分的块级标记都会有align属性,但<p>中应用比较少
    

    p标记的嵌套:p标记里不能嵌套块级标记。(可以理解为p标签为最基本的块级标记。)

    p标记也不能嵌套p标记

    p标签嵌套p标签时,文章会被切割的七零八落,因为浏览器会在从前到后自动为p标签进行配

    对,如果没发现尾标记,则会自动添加一个p的尾标记。

    段间距默认18px。

    换行标记

    对文字进行强制换行

    基本语法:

    <br> 
    单标记 没有属性 与之对应的是<nobr>,强制不换行。
    内容超出时,网页就会出现水平滚动条
    

    注:这里的换行不是另起一段,而仅仅是简单的换行。(换行后由于仍然属于同一段,因此间距还是行

    间距)

    单标记属于空标记,和块级标记和行内标记并列。

    居中标记

    可以对任何东西居中(图片、表格等)

    基本语法:

    <center>...</center> 没有属性
    

    水平分割线

    单标记

    作为段落与段落的分割线

    基本语法:

    <hr width="" size="" align="" noshade> 
    
    -- width 宽度(默认为100%,此时铺满界面,也可以用像素表示) 
    -- size 粗细 
    -- color 颜色 
    -- align 水平对齐方式(在线没有充满是使用,默认居中) 
    -- noshade 去掉阴影,在设置颜色后自动失效(noshade="noshade")
    

    预格式化标记

    默认是空格和回车会自动压缩为一个空格,进行预格式化处理后会进行原样输出(空格就显示空格,回

    车就是换行)

    基本语法:

    <pre>...</pre> 
    
    pre套p出现于就近原则冲突问题。
    

    段落缩进

    基本语法:

    <blockquote>...</blockquote> 
    用来表示引用内容,整体缩进5个字符。如果嵌套,则缩进距离叠加。
    

    总结:

    标记 属性 作用
    <p >....</p> align 段落标记 块级
    <br/> 换行 单标记
    <center>.../center> 居中 块级
    <hr> width
    size
    color
    align
    noshade
    分割线 单标记
    <pre>...</pre> 预格式化处理 块级
    <blockquote>...</blockquote> 段落缩进 块级

    结构性标记(容器)

    旧版本容器

    <div>和<span>

    div作用:相当于一个容器,里面可以写段落、标题、表格、图片等,可以把里面的内容看成一个独立

    的对象,用css控制,整体的样式都会改变。

    div是块级容器,span是行内容器。

    注:div与span的区别

    H5新增容器

    H5新增容器(通过细分,使其更加的语义化):

    • <article> 用于指定页面上独立、完整的一片文章或区域。

    • <section> 对页面元素进行分块(UI版嵌套在article里面) section侧重于文章分块,article侧重

      于整片文章。

    • <nav> 用于定义导航

    • <aside> 用于定义当前页面的附属信息。(即网页的侧边栏)

    • <header> 用于定义article元素文章头部信息

    • <footer> 用于定义脚注部分(包含文章的版权作者等)

  • 相关阅读:
    如何在一个页面调用另一个页面
    CSS3新增的选择器和属性
    js中函数和方法的区别
    jQuery中哪几种选择器
    关于JS数组的栈和队列操作
    HDU1232 畅通工程(并查集)
    并查集
    有关素数的基础算法
    二分教室
    蚂蚁下桥(思维)
  • 原文地址:https://www.cnblogs.com/wind-zhou/p/13952896.html
Copyright © 2011-2022 走看看