html语法-文本格式化标签 #html5开发

eb前端开发课程：html语法文本格式化标签。

讲课人：波波老师。

讲完段落，接下来看文本格式化标签，像word中一样，在文本中也可以为文字设置粗体、斜体、下划线等效果。为此，html准备了专门的文本格式化标签，使文本以特殊的方式显示。常见的文本格式化标签有这些。

然后是看斜体，然后是删除线、下划线、上标、下标文本、不要代码片段。然后看还有small、小字体。

、常用的标签

<h1>~<h6> 表示是一个标题

<p> 段落标签

<hr/> 水平线标签

<br/> 换行标签

<sub> 下标

<sup> 上标

<pre> 原样标签：原样标签会保留空格和换行符。

<ol> <li> 有序的列表标签、

<ul> <li> 无序的列表标签。

项目列表标签(dl dt dd)

行内标签(span)

块标签<div> div标签的内容会独立占一行。

二、实体标签

空格  

小于号 <

大于号 >

-----------------------------

人民币 &yen；

版权 ©

商标 ®

三、媒体标签

<embed></embed>

hidden ：设置隐藏插件是否隐藏。

src ：用于指定音乐的路径

<marquee> 飘动标签direction : 指定飘动的方向

scrollamount : 指定飘动的速度。

loop :指定飘动的次数

四、超链接标签

<a> 超链接标签

a标签常用的属性：

href : 用于指定链接的资源

target: 设置打开新资源的目标。

_Blank 在独立的窗口上打开新资源

_self 在当前窗口打开新资源

file: file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的。

格式：

file:///f:/美女/1.jpg

邮件的协议： mailTo迅雷的协议： thunder

超链接标签的作用：

1. 可以用于链接资源。

2. 锚点点位.

1. 首先编写一个锚点锚点的格式： <a name="锚点名字"> 数据</a>

2. 使用a标签的herf属性连接到锚点出。 href=”#锚点的名字“

五、图片标签

img标签常用的属性:

width：设置图片宽度

height 设置图片高度

alt: 如果图片资源无法找到，那么就显示对应的文字对图片进行说明。

六、表格标签

表格使用到的标签：

<table> 表格

<tr> 行

<td> 单元格

<th> 表头默认的样式是居中，加粗。

<caption> 表格的标题

表格常用的属性：

border 设置表格的边框

width : 设置表格的宽度

height: 设置表格的高度的。

colspan: 设置单元格占据指定的列数。

rowspan : 设置单元格占据指定的行数。

<thead> 标签用于组合 HTML 表格的表头内容。

<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

七、表单标签

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 表单标签： 表单标签的作用是用于提交数据给服务器的表单标签的根标签是<form>标签常用的属性action: 该属性是用于指定提交数据的地址。method： 指定表单的提交方式。get : 默认使用的提交方式。 提交的数据会显示在地址栏上。post ： 提交的数据不会显示在地址栏上。注意： 表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值 -->

</head>
<body>
<form action="http://www.baidu.com" method="post"> <!-- 文本输入框 单 行- -> 用户名：<input name="userName" type="text"/><br/>
<!-- 密码框 -->
密码：<input name="password" type="password"/><br/>
<!-- 单选框 -->
性别： 男<input checked="true" value="man" name="sex" type="radio"/>
女<input name="sex" value="woman" type="radio"/><br/>
< !-- 下拉框 -->
来自的城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">广州</option>
<option value="SZ">深圳</option>
</select><br/>
<!-- 复选框 同一组的复选框name的属性值要一致 -->
兴趣爱好：java <input value="java" name="hobit" checked="checked" type ="checkbox" />
javascript <input type="checkbox" value="javascript" name="hobit" />
android <input value="android" name="hobit" type="checkbox" /><br/> <!-- 文件上传框-->
大头照：<input name="image" type="file" /><br/>
个人简介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按钮 -->
<input type="submit" value="注册"/>
<!-- 重置按钮 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>

更多精彩内容在微信公众平台：网页设计自学平台

干货！免费领取Adobe高级讲师前端教程

点我领取

传统的技术相比，HTML5 的语法特征更加明显，可以更加便捷地处理多媒体内容，而且 HTML5 中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。

HTML5 的优势

1. 解决了跨浏览器问题

在 HTML5 之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的标准。使用不同的浏览器，常常看到的页面效果也不同。在 HTML5 中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式 IE 浏览器，只需简单地添加 JavaScript 代码就可以使用新的元素。

2. 新增了多个新特性

HTML 语言从 1.0 到 5.0 经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。 HTML5 新增的特性如下。

新的语义标签，比如 header、nav、section、article、footer。
新的表单元素，比如 calendar、date、time、email、url、search。
用于绘画的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
对本地离线存储的更好支持。
地理位置、拖曳、摄像头等 API。

3. 用户优先的原则

HTML5 标准的制定是以用户优先为原则的，一旦遇到无法解决的冲突时，规范会把用户放在第一位。另外，为了增强 HTML5 的使用体验，还加强了以下两方面的设计。

安全机制的设计

为确保 HTML5 的安全，在设计 HTML5 时做了很多针对安全的设计。HTML5 引入了一种新的基于来源的安全模型，该模型不仅易用，而且对不同的 API（Application Programming Interface ，应用程序编程接口）都通用。使用这个安全模型，不需要借助于任何不安全的 hack 就能跨域进行安全对话。

表现和内容分离

表现和内容分离是 HTML5 设计中的另一个重要内容。实际上，表现和内容的分离早在 HTML4.0 中就有设计，但是分离得并不彻底。为了避免可访问性差、代码复杂度高、文件过大等问题，HTML5 有了更加明晰的规范。但是考虑到 HTML5 的兼容性问题，一些陈旧的内容还是可以兼容使用的。

4. 化繁为简的优势

作为当下流行的通用标记语言，HTML5 尽可能地简化，严格遵循了简单至上的原则，主要体现在这几个方面：

简化的字符集声明;
简化的 DOCTYPE;
简单而强大的 HTML5 API;
以浏览器原生能力替代复杂的 JavaScript 代码。

从新增的标签来看，HTML5 有以下几个特点：

HTML5 的文档类型可以简写为 <!DOCTYPE html>。
HTML5 的字符编码可以简写为 <meta charset=“utf-8”/>。
标签不分大小写，但实际开发中，建议所有标签都使用小写。
允许属性值不加引号。
允许部分属性值可以省略。

随着 HTML 的不断发展，其经历了“从 HTML4 的宽松到 XHTML 的严格再到 HTML5 宽松”的发展路程。

相比较 HTML4 和 XHTML 的结构标签而言，HTML5 对结构标签进行了较大简化，精简了声明部分标签的定义过程，使得结构标签更加的简洁。

语义化标签

在引入语义化标签之前，我们常常采用 DIV + CSS 来布局，这样的布局方式使得文档的结构不清晰。为了解决这个问题，在 HTML5 中新增了一些标签，来帮助我们更清晰地展现文档的结构。

所谓语义化标签就是一看标签名，我们就知道该标签里内容的作用。

语义标签的优点：

在样式丢失的情况下，页面也能呈现出很好地内容结构、代码结构。
比 <div> 标签有更加丰富的含义，方便开发与维护。
有利于 SEO，提高搜索引擎的有效爬取。
方便其他设备解析（如移动设备）。

在我们的课程中会给大家讲解如下所示的语义化标签：

header 标签
nav 标签
section 标签
article 标签
aside 标签
footer 标签

在线咨询

上一篇：HTML 颜色
下一篇：用 vue3 + phaser 实现经典小游戏：飞机大战

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html语法-文本格式化标签 #html5开发

HTML5 的优势

语义化标签

您的项目需求