>웹 프론트엔드 >HTML 튜토리얼 >HTML 단락

태그에 대한 자세한 소개

HTML 단락

태그에 대한 자세한 소개

黄舟
黄舟원래의
2017-07-03 11:46:266244검색

e388a4556c0f65e1904146cc1a846bee 태그는 단락을 정의합니다.

p 요소는 자동으로 앞뒤에 공백을 만듭니다. 브라우저는 이러한 공백을 자동으로 추가하거나 스타일시트에서 지정할 수 있습니다.

단락 간격
IE의 기본값은 19px로, p의 margin-top 속성을 통해 설정되고
FF의 기본값은 1.12em으로, pmargin-bottom 속성을 통해 설정됩니다.
p 기본값은 블록 표시입니다. 단락 간격을 지우려면 일반적으로

p {
   margin-top:0;
   margin-bottom:0;
}


추가 읽기: 허용되는 단락 사용

단락 내에서만 지정할 수 있습니다. 블록을 사용하면 다른 단락, 목록, 양식 및 미리 서식이 지정된 텍스트와 함께 단락을 사용할 수도 있습니다. 일반적으로 이는 문서 본문, 목록 요소 내 등 적절한 텍스트 흐름이 있는 모든 곳에 단락이 나타날 수 있음을 의미합니다.
기술적인 관점에서 볼 때, 단락은 헤더, 앵커 또는 내용이 텍스트로만 엄격히 요구되는 기타 위치에 나타날 수 없습니다. 실제로 대부분의 브라우저는 이 제한을 무시하고 포함 요소 콘텐츠의 일부로 단락의 형식을 지정합니다.

<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p> 
</body>
</html>

HTML에서는 p 태그가 P 태그에 포함될 수 없습니다. 선 요소 및 HTML의 거의 모든 요소는 인라인 요소이거나 블록 요소이기 때문입니다.

인라인이라는 단어에 대한 해석은 inline, inline, inline, line level 등 다양합니다. 그러나 모두 동일한 의미를 의미합니다. 여기서는 관례적인 이름인 inline을 선택합니다.子 다음 예를 보면

& lt; p & gt; 블록 요소를 테스트하고 예를 들어 e388a4556c0f65e1904146cc1a846bee는 자체적으로 새 줄을 생성하지만 45a2772a6b6107b401db3c9b82c049c2은 CSS 렌더링이 없는 경우에만 적용됩니다. 마찬가지로 CSS 정의 p를 인라인 요소로 사용할 수도 있습니다. 그러나 HTML에서는 이를 임의로 변환할 수 없습니다. Block 요소에는 인라인 요소나 특정 블록 요소가 포함될 수 있습니다(위의 예는 실제로 잘못된 사용입니다. ->e388a4556c0f65e1904146cc1a846bee 안에 e388a4556c0f65e1904146cc1a846bee를 넣었습니다.) ),
그러나 인라인 요소는 블록 요소를 포함할 수 없으며 다른 인라인 요소만 포함할 수 있습니다
, 이것을 다시 살펴보세요:

<h2>我喜欢在
<a href="
http://bbs.blueidea.com/
 " >经典论坛</a>
讨论Web标准的原因。</h2>

여기서 c1a436a314ed609750bd7c7d319db4da는 블록 요소이고 3499910bf9dac5ae3c52d5ede7383485 ;는 인라인 요소이므로 3499910bf9dac5ae3c52d5ede7383485를 포함하는 데에는 아무런 문제가 없습니다. 마찬가지로 e388a4556c0f65e1904146cc1a846bee를 포함할 수도 있지만 3499910bf9dac5ae3c52d5ede7383485 다음과 같습니다. 인라인 요소에는 블록 요소가 포함되어서는 안 되기 때문에 잘못된 것입니다.

  <a href="#">
 <h2>这样是错误的用法!</h2>
</a>

또한 일부 블록 요소가 다른 블록 요소를 포함할 수 없는 상황이 있습니다. 예:

<p>测试文字
     < ul>
          <li>现阶段是不能这样用的,要等到XHTML 2.0才可以这样用。</li>
      </ul>
       测试文字
    </p>

而这样又是可以的。

  <ul>
         <li><p>这样是可以的</p></li>
    </ul>


     为什么呢?因为我们使用的DTD中规定了块级元素是不能放在e388a4556c0f65e1904146cc1a846bee里面的,再加上一些浏览器纵容这样的写法:

 <p>这是一个段落的开始
     <p>这是另一个段落的开始


当一个e388a4556c0f65e1904146cc1a846bee签还没结束时,遇到下一个块元素就会把自己结束掉,其实浏览器是把它们处理成这样:

 <p>这是一个段落的开始</p>
    <p>这是另一个段落的开始</p>


所以刚才那样的写法会变成这样:

<p>测试文字</p>
    <ul>
         <li>现阶段是不能这样用的,要等到XHTML 2.0才可以这样用。</li>
    </ul>
测试文字<p></p>


这也是跟刚才说第一个例子中e388a4556c0f65e1904146cc1a846bee里面放e388a4556c0f65e1904146cc1a846bee不合理是同一个道理。

        那哪些块元素里面不能放哪些块元素呢?我知道你有这个疑问,也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的,我们已经知道100db36a723c770d327fc0aef2ce13b1是在最外层,100db36a723c770d327fc0aef2ce13b1下一级里面只会有93f0f5c25f18dab9d176bd4f6de5d30e、6c04bd5ca3fcae76e30b72ad730ca86d、f900b4fc197b16ab214eecf015bb6bd2、37f861bd36cef5b6406eba87d20a5bab,而我们已经知道了可视的元素只会出现在6c04bd5ca3fcae76e30b72ad730ca86d里,所以我们把6c04bd5ca3fcae76e30b72ad730ca86d划在第一个级里面,接着,把不可以自由嵌套的元素划在第三个级,其他的就归进第二个级。

       所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标记的4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355、3f7b3decd2dcafb07b84d2d3985d9f40、39318b6f72ed39310530dfd69d0078e1、4e9ee319e0fa4abc21ff286eeb145ecc、63bd76834ec05ac1f4c0ebbeaafb0994;段落标记的e388a4556c0f65e1904146cc1a846bee;分隔线f32b48428a809b51f04d3228cdf461fa和一个特别的元素73de882deff7a050a357292d0a1fca94(它只存在于列表元素5c69336ffbc20d23018e48b396cdd57a的子一级)。

       为什么说第二级的元素可以自由嵌套呢?我们可以把它们看成是一些容器(或者说是盒子), 这些容器的大小可以自由变化,例如我们可以把ff6d136ddc5fdfeffaf53ff6ee95f185嵌在e388a4556c0f65e1904146cc1a846bee里面,也可以把e388a4556c0f65e1904146cc1a846bee嵌在25edfb22a4f469ecb59f1190150159c6里面。

       在HTML里有几个元素是比较特别的:ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6、5c69336ffbc20d23018e48b396cdd57a、f5d188ed2c074f8b944552db028f98a1,它们的子一层必须是指定元素,ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6的子一级必须是25edfb22a4f469ecb59f1190150159c6;5c69336ffbc20d23018e48b396cdd57a的子一级必须是73de882deff7a050a357292d0a1fca94或者67bc4f89d416b0b8236eaa5f43dee742;f5d188ed2c074f8b944552db028f98a1的子一层必须是63bd76834ec05ac1f4c0ebbeaafb0994 或ae20bdd317918ca68efdc799512a9b39、06669983c3badb677f993a8c29d18845、92cee25da80fac49f6fb6eec5fd2c22a等,而再子一层必须是a34de1251f0d9fe1e645927f19a896e8 (a34de1251f0d9fe1e645927f19a896e8只存在于ae20bdd317918ca68efdc799512a9b39、06669983c3badb677f993a8c29d18845、92cee25da80fac49f6fb6eec5fd2c22a中),之后才是可放内容的b6c5a531a458a2e790c1fd6421739d1c或者b4d429308760b6c2d20d6300079ed38e。

        很多人在W3C校验无法通过也是这个原因-->错误的元素嵌套,然而把提示错误的标签改成e388a4556c0f65e1904146cc1a846bee或者45a2772a6b6107b401db3c9b82c049c2就可以通过,但是我们不能这样盲目的为了校验而校验,e388a4556c0f65e1904146cc1a846bee也不是神,e388a4556c0f65e1904146cc1a846bee代替不了语义化的标签。

下面有一张关于(X)HTML Strict下嵌套规则的图,可以参考:

 

其实在内联元素中,还是可以再区分一下的,有几个元素(a1f02c36ba31691bcfe87b2722de723b、d5fd7aea971a85678ba271703566ebfd等)比较特别,它们可以定义宽高。虽然在IE 浏览器里,所有的元素都可以定义宽高,但这是IE自己的标准,并非所有浏览器都支持,W3C称它们为replaced元素,我也找不到适合翻译的词,它们在属于in-line的情况下同样具有block-line的一些特性,在"dasplay:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素,你暂时也不用过多了解,等到后面再学习它。

e388a4556c0f65e1904146cc1a846bee 标签支持 HTML 中的全局属性

 5 = HTML5 中添加的属性。

属性 描述 例子 浏览器支持
class classname 规定元素的一个或多个类名(引用样式表中的类) e2ce4653c57e0c292b6bbe05eaf08ac394b3e26ee717c64999d7867364b1b4a3 所有浏览器都支持。
contenteditable  5 

true(可编辑)

false(不可编辑)

规定元素内容是否可编辑 7b6221b7124ff54779c7e1236401f1bb这是一个可编辑的段落。94b3e26ee717c64999d7867364b1b4a3 所有主流浏览器都支持。
contextmenu      menu_id(要打开的 5c0e96d12fc7501cef2ae2efde646ee0 元素的 id。) 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。

0bd8f026387dd410800849e078948af7本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。94b3e26ee717c64999d7867364b1b4a3

<menu id="supermenu">
  <command label="Step 1: Write Tutorial" onclick="doSomething()">
  <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>


目前只有 Firefox 支持 contextmenu 属性。
data-*              somevalue  (规定属性的值(以字符串)。)

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:

  • 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符

  • 属性值可以是任意字符串

注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。

<p id="test" data-age="24">
        Click Here
</p>
所有主流浏览器都支持 data-* 属性。
dir

ltr  (默认。从左向右 的文本方向。

rtl   (从右到左的文本方向。)

规定元素中内容的文本方向。
<p 
dir="rtl"
>Write this text right-to-left!</p>
所有浏览器均支持 dir 属性。
draggable          5 

true  (规定元素的可拖动的。)

false  (规定元素不可拖动。)

auto  (使用浏览器的默认行为。)

draggable 属性规定元素是否可拖动。

提示:链接和图像默认是可拖动的。

<p draggable="true">这是一个可拖动的段落。</p>

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。

注释:Internet Explorer 8 以及更早的版本,不支持 draggable 属性。

dropzone           5 

copy  (拖动数据会产生被拖动数据的副本。)

move  (拖动数据会导致被拖动数据被移动到新位置。)

link  (拖动数据会产生指向原始数据的链接。) 

dropzone 属性规定在元素上拖动数据时,是否拷贝、移动或链接被拖动数据。
<p dropzone="copy"></p>
目前所有主流浏览器都不支持 contenteditable 属性。
hidden              5   

hidden 属性是布尔属性。

如果设置该属性,它规定元素仍未或不再相关。

浏览器不应显示已规定 hidden 属性的元素。

hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden 属性,以使此元素可见。

8f46474ce997f11c6876328078df6077这是一段隐藏的段落。94b3e26ee717c64999d7867364b1b4a3 所有主流浏览器都支持 hidden 属性,除了 Internet Explorer。
id idname

id 属性规定 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。

a4c0f94987a69075544ba5a088c4d91b94b3e26ee717c64999d7867364b1b4a3 所有浏览器都支持。
lang language_code  (规定元素内容的语言代码。) lang 属性规定元素内容的语言。
<p lang="fr">Ceci est un paragraphe.</p>
所有浏览器均支持 lang 属性。
spellcheck         5 

true  (对元素进行拼写和语法检查.)

false  (不检查元素。)

spellcheck 属性规定是否对元素进行拼写和语法检查。

可以对以下内容进行拼写检查:

  • input 元素中的文本值(非密码)

  • 4750256ae76b6b9d804861d8f69e79d3 元素中的文本

  • 可编辑元素中的文本

实例

进行拼写检查的可编辑段落:

<p contenteditable="true" spellcheck="true">这是一个段落。</p>
 

Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。

注释:Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。

 style  style_definition   (一个或多个由分号分隔的 CSS 属性和值。)  

style 属性规定元素的行内样式(inline style)

style 属性将覆盖任何全局的样式设定,例如在 c9ccee2e6ea535a969eb3f532ad9fe89 标签或在外部样式表中规定的样式。

 

实例

在 HTML 文档中使用 style 属性:

<p style="color:red">This is a paragraph.</p>
 所有浏览器都支持。
 title  text   (规定元素的工具提示文本(tooltip text)。)  

title 属性规定关于元素的额外信息。

这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。

提示:title 属性常与 form 以及 a 元素一同使用,以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。

 

实例

在 HTML 文档中使用 title 属性:

<p title="Free Web tutorials">W3School.com.cn</p>
 所有浏览器都支持。
 translate          

 yes  (规定应该翻译元素内容。)

  no   (规定不应翻译元素内容。)

 

translate 规定是否应该翻译元素内容。

提示:请使用 class="notranslate" 替代。

 

实例

规定不应翻译某些元素:

<p translate="no">请勿翻译本段。</p>
<p>本段可被译为任意语言。</p>
 所有主流浏览器都无法正确地支持 translate 属性。


위 내용은 HTML 단락

태그에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.