HTML5 文本标记

HTML5 文本标记

文本标记概述

文本标记的作用

文本是网页上的重要组成部分,直接书写的文本会用浏览器默认的样式显示,包含在标记中的文本则会被显示为标记所拥有的样式:

  • 特殊字符
  • 注释
  • 标题元素
  • 段落元素
  • 换行元素
  • 分区元素
  • ...
文本与特殊字符

在网页中输入多个空格或制表符会被压缩成单个空格,即只显示一个空格。特殊字符(如空格),需要进行转义才能正常显示(字符实体)。

  •   :一个空格
  • > : > greater than
  • &lt; : < less than
  • &copy; : ©
  • ...

使用文本标记

文本样式

文本样式的作用是对文本进行修饰:

  • <b>...</b>:加粗
  • <i>...</i>:倾斜
  • <u>...</u>:下划线
  • <s>...</s>:删除线
  • <sup>...</sup>:上标
  • <sub>...</sub>:下标
标题元素 <hn>

标题元素让文字以醒目的方式显示,往往用于文章的标题。

<h#> ... </h#>
# = 1,2,3,4,5,6

<h1></h1>一级标题 ,字最大。

<h6></h6>六级标题,字最小。

段落元素 <p>

<p> 元素提供了结构化文本的一种方式,<p> 元素中的文本会用单独的段落显示。特点如下:

  • 与前后的文本都换行分开
  • 添加一段额外的垂直空白距离,作为段落间距
换行元素 <br>

使用 <br> 元素在任何地方创建手工换行。

分区元素 <span> 和 <div>

分区元素用于为元素分组,常用于页面布局。

  • 行分区

<span></span>
主要作用是包裹文本,做文本的样式。

  • 块分区

<div></div>
div的主要工作,就是布局,没有显示效果,主要用于页面的布局或分组。

行内元素与块级元素
  • 块级元素

默认情况下,块级元素会独占一行,即元素前后都会自动换行,如 <p>、<div>、<hn>。

特点:修改文本样式。

  • 行内元素

不会换行,可以和其他行内元素位于同一行,如 <span>、<b>、<i>、<u>。

特点:主要场合是在布局上。

注意:

  1. 所有的行内元素不允许嵌套块级元素;
  2. 块级元素中可以嵌套所有的行内元素;
  3. p 标记是不允许嵌套其他块级元素;
  4. div 允许嵌套所有的元素;
  5. div 没有特殊情况是不允许被其他元素嵌套;
  6. div 能嵌套 div;
  7. td 能嵌套 div;
  8. li 能嵌套 div;
  9. dt,dd 能嵌套 div。
分隔线元素 <hr>

<hr> 元素用于在页面上创建一条水平线,常用于将页面的不同部分隔开。

属性:

size 尺寸
width 宽度
align 水平对齐方式
color 颜色

预格式化 <pre>

保留源文档中的格式,即保留原来换行和文本中的空白。

时间: 2024-10-24 15:23:35

HTML5 文本标记的相关文章

HTML5文本

1.重要文本.斜体文本 粗体:<strong></strong> 粗体:<b></b> 斜体:<em></em> 斜体:<i></i> 1 <DOCTYPE HTML> 2 <html> 3 <head> 4 <title>文本</title> 5 <meta charset = "utf-8"/> 6 <styl

编码规范(一)之文本标记

文本格式: 1. 文本标记 所有PHP文件,其代码标记均使用完整的PHP标签,不建议使用短标签,例如: <span style="font-family:Microsoft YaHei;font-size:18px;"><?PHP Echo 'hello world!'; ?> <?</span> <span style="font-family:Microsoft YaHei;font-size:18px;">

初识HTML之标记2(标题标记、段落标记、引用文本标记)

在<body></body>标记中的内容就是我们在页面看得见的内容. 定义正文标题标记:HTML支持6个级别的正文标题<h1></h1>...<h6></h6>.重要性由大到小.<h1>最大,<h6>最小.还正文标题标记中的元素内容会以较大的粗体显示.当然正文标题标记结束后它会自动换行. 定义段落标记:<p></p>例如<p>我在学习HTML</p>同样段落标记结

学习HTML第二天 学习格式标记和文本标记

<html> <head>  <title>  第二节学习格式标记和文本标记  </title>  <meta charset="UTF-8"> </head> <body> 开始学习格式标记 flash bird<br/>换行学习! <P> flash bird 段落学习 </P> <P> flash bird 段落学习  <p>  flas

html标记语言 --文本标记

html标记语言 --文本标记 二.文本标记 1.h1-h6 标题标记,h1最大 2.font 字体设置标记 2.1 size字体大小.<font size="3"> 取值范围1-7,默认3 2.2 color 颜色 <font color="red"> 2.3 face 字体 <font face="楷体"> 3.b 粗字体 4.i 斜字体 5.sub 下标 6.sup 上标 7.tt 打印机字体标记 8.c

文本标记

1.作用:过文本标记,改变文本的默认样式 2.特殊字符         < 表示 <        > 表示 >          表示 一个空格        © 表示 ?        ¥ 表示 ¥ 2.文本标记         1.文本样式             <b>...</b> : 加粗              <i>...</i> : 斜体              <u>...</u> :

HTML5文本元素解析

1.<b>表示关键字和产品名称 <b>HTML5</b> 解释:<b>元素实际作用就是加粗.从语义上来看,就是标记一段文字,但并不是特别强调重要性. 2.<strong>表示重要的文字 <strong>HTML5</strong> 解释:<strong>元素实际作用和<b>一样,就是加粗.从语义上来看,就是强调一段重要的文本. 3.<br>强制换行 <wbr>安全换行 <

DOM扩展之HTML5 插入标记

11.3.6 插入标记 当需要在文档中插入大量的HTML标记时,通过DOM操作就会是非常麻烦的,相对而言,使用插入标记的技术,直接插入HTML字符串不仅简单而且更快.以下插入标记相关的DOM操作已经纳入了HTML5规范. 1. innerHTML 属性 在读模式下,innerHTML属性返回调用元素所有的子节点对应的HTML标记,包括元素,注释和文本节点.在写模式下,innerHTML会根据指定的值创建新的DOM树,然后用该DOM树完全替换调用元素的所有的子节点. 不是所有的元素都支持inner

.NET回归 HTML----超文本标记语言(暂时无图)

HTML用来做网页,文件拓展名改为html可以形成网页 超文本标记语言==超越了文字的范畴,除了文字还可以有图片.视频.音频.动画特效等其它内容,由标记符号<>组成的一门计算机编程语言 HTML的格式: 注释:<!--注释内容-->  ctrl+k+c 快捷键 <HTML> 开始标记 <title>标题名称</title>  浏览器最上面那个标签 <head> 网页渲染,特效 </head> <body> 网页