HTML基础之段落与文字

简介: HTML基础之段落与文字

一:首先进入HBuilderX,新建一个html项目会发现页面如下


d00658236cf54e61be1bbb4cc51e3f09.png


1:标题标签<h>


在html中一共有六个级别的标签:<h1>~<h6>.。其中 h 是英文header的简称,其中,<hi>的重要性最高,<h6>的重要性最低.


2:段落标签<p>


利用段落标签可以来标记一整段文字,段落标签会自动换行,并且段落与段落之间会有一定空隙。


3:换行标签 <br/>


与<p>标签在换行上不同的是,<br>标签会导致两文字段落之间会有一定的空隙,但是换行标签<br/>不会.<br/>标签用来给文字换行,<p>标签用来给文字分段。


4:粗体标签 <strong>


这一标签可以用来对文字的加粗。


5:斜体标签 <em>


用于对文本进行斜体设置。


6:上下标标签 <sup>和<sub>


想要将某个数字或文本变成上(下)标形式的效果,就把这个数字或文本放在上(下)标之间。


7:水平线标签<hr/>,属于自自闭合标签。


8:div标签


div标签可以放入body标签的任何内部标签,包括段落文字、表格、列表、图像等。加入div标签后和没有加的代码在浏览器上显示的是一样的,但是加入div标签可以使代码的逻辑性更强


9:网页的一些特殊符号


可输入的特殊符号


特殊符号      名称       代码
双引号 &quot

左单引号

&lsquo
右单引号 &rsquo
乘号 &times
除号 &divide
< 小于号 &lt
> 大于号 &gt
& 与符号 &amp
—— 长破折号 &mdash
| 竖线 &#124
空格 &nbsp
© 版权 &copy
® 注册商标 &reg
商标 &trade


10:自闭合标签


1一般标签由于有开始符号和结束符号,可以在标签内部插入其他标签或文字;


2自闭合标签由于没有结束符号,没办法再内部插入其他标签或文字,只能定义自身的一些属性。


常见的自闭合标签有:


<metal/> 定义页面的说明信息,供搜索引擎查看


<link/>用于连接外部的css文件或脚本文件


<base/>定义页面所有链接的基础定位


<br/>用于换行


<hr/>定义一个水平线


<input/>用于定义表单元素


<img/>图像标签


11:块元素和行内元素


html元素根据形式可以分为两类:块元素(block)和行内元素(inline)


块元素再浏览器中默认显示状态下独占整行,排斥其他元素与其位于同一行。块元素一般为矩形,可以容纳行元素和其他的块元素。


常见的块元素


块元素 说明
div div层

h1~h6

1到6级标题
p 段落,会在其前后创建一些空白
hr 分割线
ol 有序列表
ul 无序列表


块元素拥有一下特点:


1独占整行,排斥其他元素与其位于同一行。


2可以容纳行元素和其他的块元素。


3高度、行高、内外边距和外距均可控制。


4宽度缺省是它的容器的100%,除非设定一些宽度。


行内元素默认显示状态可以与其他行内元素共存一行。


常见的行内元素


行内元素 说明
strong 加粗强调
em 斜体强调
s 删除线
u 下划线
a 超链接
span 常用于行级,可定义文档中的行内元素
img 图片
input 表单


行内元素拥有的特点:


1可以与其他行内元素位于同一行;


2行内内部可以容纳其他行内元素,但不可容纳块元素。


二:总结和归纳


段落与文字标签


标签 语义 说明
<h1>~<h6> header 标题
<p> paragraph 段落
<br> break 换行
<hr> horizontal rule 水平线
<div> division 分割(块元素)
<span> span 区域(行内元素)


文本格式化标签


标签 语义 说明
<strong> strong 加粗
<em> emphasizd 斜体
<cite> cite 斜体
<sup> superscripted 上标
<sub> subscriped 下标



一般标签和自闭合标签


一般标签有开始符号和结束符号,而自闭合标签只有开始符号没有结束符号。


利用段落与文字的相关标签进行简单网页的制作


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>各科小常识</h1>
    <hr />
    <div>
      <h3>语文</h3>
      <p>语文是一个多义词,通常作为语言文字、语言文学、语言文化的简称,其本义为“语言文字”。</p>
      <br/>
      <hr/>
      </div>
      <div>
      <h3>数学</h3>
      <p>勾股定理直角三角形,a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
      <br/>
      <hr/>
    </div>
    <div>
         <h3>化学</h3>
       <p>H<sub>2</sub>SO<sub>4</sub>是一种重要的<strong>工业原料</strong>,用于制作肥料、洗涤剂等。</p>
       <br/>
       <hr/>
    </div>
    <div>
       <h3>经济</h3>
       <p>注册商标:&reg</p>
       <br/>
       <p>版权符号:&copy<p>
       <hr/>
    </div>
    <p><span style="color:blue">好好学习</span></p>
    <p><span style="color: red;">天天向上</span></p>
  </body>
</html>


浏览器预览结果


a4cd2dd3db694714879a2c36b3e5387e.png


相关文章
|
21天前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
18 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
27天前
html实现的破碎拼接文字动画特效代码
html实现的破碎拼接文字动画特效代码是一段会自动产生文字依次破碎再拼接的效果,非常的炫。欢迎对此段代码感兴趣的朋友前来下载使用。
24 1
HTML 段落2
在HTML中,若需在不创建新段落的情况下换行,可使用`&lt;br&gt;`标签,该标签无结束标记。注意,HTML中多余的空格与换行在浏览器中会被视为一个空格,故直接在代码中添加空格或换行无法改变输出效果。
HTML 段落1
HTML 使用 `&lt;p&gt;` 标签定义段落,浏览器会在段落前后自动添加空行。虽然多数浏览器能容忍未闭合的 `&lt;p&gt;` 标签,但为了代码的规范性和兼容性,建议始终闭合段落标签。未来版本的 HTML 将不允许省略结束标签。
html,web页面朗读文字,朗读中文,朗读英文
html,web页面朗读文字,朗读中文,朗读英文
|
4月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
117 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
5月前
|
开发者
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
40 0
|
6月前
|
存储 移动开发 前端开发
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
67 0
|
7月前
|
前端开发 JavaScript
HTML 段落
HTML 段落
|
7月前
|
前端开发
HTML段落标签与换行标签的详解与应用
HTML段落标签与换行标签的详解与应用
438 0