Html5之基础-4 HTML文本

一、HTML 文本标记概述

文本标记的作用

(1)文本是网页上的重要组成部分

(2)直接书写的文本会用浏览器默认的样式显示

(3)包含在标记中的文本则会被显示为标记所拥有的样式

- 特殊字符

- 注释

- 标题元素

- 段落元素

- 换行元素

- 分区元素

- ...

文本与特殊字符

(1)空格折叠

- 多个空格或制表符压缩成单个空格,即只显示一个空格

(2)特殊字符(如空格),需要进行转义(使用字符实体)

Code:
<!DOCTYPE html>
<body>
    The &lt;p&gt; element.&nbsp;&nbsp;&nbsp;&nbsp;&copy; 2016 by Jason.
</body>
</html>

显示结果:

二、使用文本标记

文本样式

(1)文本样式的作用是对文本进行修饰,如加粗、倾斜等

- <b>...</b>:加粗

- <b>...</b>:倾斜

- <b>...</b>:下划线

- <b>...</b>:删除线

- <b>...</b>:上标

- <b>...</b>:下标

标题元素<hn>

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

(2)基本语法:<h#>...</h#>

- # = 1,2,3,4,5,6

- 从 <h1> 到 <h6>,即 标题1-标题6

段落元素<p>

(1)<p> 元素提供了结构化文本的一种方式

(2)<p> 元素中的文本会用单独的段落显示

- 与前后的文本都换行分开

- 添加一段额外的垂直空白距离,作为段落间距

- 常用属性:align

换行元素<br>

(1)使用<br>元素在任何地方创建收手工换行

- 空标记

分区元素<span>和<div>

(1)分区元素用于为元素分组,常用于页面布局

(2)块分区元素:<div></div>

(3)行内分区元素:<span></span>

- 设置同一行文字内的不同格式

行内元素与块级元素

(1)块级元素

- 默认情况下,块级元素会独占一行,即元素前后都会自动换行

- 如: <p>、<div>、<hn>

(2)行内元素

- 不会换行,可以和其他行内元素位于同一行

- 如: <span>、<b>、<i>、<u>

分割线元素<hr>

(1)<hr> 元素用于在页面上创建一条水平线

- 空标记

- 常用于将页面的不同部分隔开

- <hr>后面的文本将出现在新段落中

(2)常用属性

- size、width、align、color

预格式化<pre>

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

总结:本章内容主要介绍了HTML文本标记。

时间: 2024-11-06 19:49:21

Html5之基础-4 HTML文本的相关文章

HTML5 WebSockets 基础使用分享

摘要:HTML5之中一个很酷的新特性就是WebSockets,它可以让我们无需AJAX请求即可与服务器端对话.今天彬Go将让大家通过Php环境的服务器端运行WebSocket,创建客户端并通过WebSockets协议发送和接收服务器端信息. 什么是WebSockets? WebSockets是在一个(TCP)接口进行双向通信的技术,PUSH技术类型.同时WebSockets仍将基于W3C标准,目前为止,Chrome和Safari的最新版本浏览器已经支持WebSockets了. WebSocket

iOS系列 基础篇 08 文本与键盘

iOS系列 基础篇 08 文本与键盘 目录: 1. 扯扯犊子 2. TextField 3. TextView 4. 键盘的打开和关闭 5. 打开/关闭键盘的通知 6. 键盘的种类 7. 最后再扯两句 1. 扯扯犊子 与Label一样,TextField和TextView也是文本类控件,是可以编辑文本内容的. 在控件内容编辑方面,三者都可以通过代码.双击该控件和属性检查器中的Text属性来实现,但是TextField和TextView比Label多了一个键盘的使用. 另外,TextField和T

HTML5 在canvas中绘制文本

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/33333519 一.绘制文本 在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fillText(text,x,y) : (x,y)处绘制实心的文本. 二.在canvas中绘制文本 <!DOCTYPE html> <html> <head> <meta http-e

Uni-app基础实战富文本框解析 WordPress rest api实例(二)

Uni-app基础实战富文本框解析 WordPress rest api实例 文本是更具上篇文章uni-app上下拉刷新的续文有需要了解上文的请点击下面连接访问 传送门: Uni-app实战上加载新下拉刷新 WordPress rest api实例 那么我们就开始了,主要的要是去介绍了以下一个插件的使用方式.官方的富文本框有markdown和html两种方式,但是样式欠佳! 本文插件传送门:uParse修复版,优化表格,css等,html富文本加载 1.导入组件 官网可以一键导入,直接点击hbu

第一章:HTML5的基础

HTML5基础 1.DoctYpe声明 <!DCTYPE html>必须放在第一行. <title> <title> 百度</title> <meta> <meta charset="UTF-8"/> <h1></h1>------<h6></h6> 提供了六级标签,所有标题字体加粗.<h1>最大<h6>最小 <p></p&g

Html5之基础-3 HTML概述、基础语法、文档结构

一.HTML 概述 超文本 (1) Web 是一个超文本文件的集合 (2) 超文本文件是 Web 的基本组成单元,也称为网页或 HTML 文档.Web页等,通常是以.html或.htm为后缀的文件 (3) Web页上之间通过超文本中的超级链接组织在一起 HTML 概述 (1) HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言 - 使用带有尖括号的"标记"将网页中的内容逐一标识出来 (2) 用来设计网页的标记语言 (3) 用该语言编写的

《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本

在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 var form = document.getElementById("form1");//取得页面中id=form1的元素 var form1 = document.forms[0];//取得页面中的第一个表单 var myform = document.forms["myFo

HTML5/CSS3基础

1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编译,直接由浏览器执行 HTML文件是一个文本文件,包含了一些HTML元素,标签等 HTML文件必须使用.html或.htm为文件名后缀 HTML是大小写不敏感的,HTML与html是一样的 HTML是由W3C的维护的 HTML 是通向 WEB 技术世界的钥匙. 1.2 发展历史 HTML是从2.0版

HTML5 入门基础

HTML5概述HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳.在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作,仍须多年的努力. HTML 版本从 Web 诞生早期至今,已经发展出多个 HTML 版本:1.HTML           19912.HTML+         19933.HTML2.0      1995.1         RFC4.HTML3.2      1996.1         W3