TML 基础

非常简单的HTML文档

HTML 标题

HTML 段落

HTML 链接

HTML 图片

实例解析

HTML 标题

HTML 标题

在html源码中插入注释

插入水平线

实例解析

HTML 段落

HTML 段落

更多段落

本例演示在 HTML 文档中折行的使用。

HTML 格式化的某些问题。

实例解析

HTML 文本格式化

文本格式化

此例演示如何使用 pre 标签对空行和空格进行控制。

此例演示不同的"计算机输出"标签的显示效果。

此例演示如何在 HTML 文件中写地址。

此例演示如何实现缩写或首字母缩写。

此例演示如何改变文字的方向。

此例演示如何实现长短不一的引用语。

文本下划线与删除线

实例解析

HTML 样式

HTML Style 元素

背景色样式

字体样式，颜色，大小

文本对齐样式

设置文本字体

设置文本字体大小

设置文本字体颜色

设置文本字体，字体大小，字体颜色

HTML使用不同样式

没有下划线的链接

链接到一个外部样式表

实例解析

HTML 链接

创建超级链接

将图像作为链接

在新的浏览器窗口打开链接

链接到同一个页面的不同位置

跳出框架

创建电子邮件链接

创建电子邮件链接 2

实例解析

HTML 图像

插入图像

从不同的位置插入图片

排列图片

本例演示如何使图片浮动至段落的左边或右边。

制作图像链接

创建图像映射

实例解析

HTML 表格

简单的表格

没有边框的表格

表格中的表头

带有标题的表格

跨行或跨列的表格单元格

表格内的标签

单元格边距(Cell padding)

单元格间距(Cell spacing)

实例解析

HTML 列表

无序列表

有序列表

不同类型的有序列表

不同类型的无序列表

嵌套列表

嵌套列表 2

定义列表

实例解析

HTML Forms 和 Input

创建文本域(Text fields)

创建密码域

复选框

单选按钮

简单的下拉列表

预选下拉列表

本例演示如何创建一个文本域（多行文本输入控件）。

创建一个按钮

本例演示如何在数据周围绘制一个带标题的框。

带有文本域与输入域的表单

带有复选框与提交按钮的form表单

带有单选框与提交按钮的表单

发送邮件表单

实例解析

HTML iframe

内联框架 (HTML页面中插入框架)

实例解析

HTML 头部元素

描述了文档标题

HTML页面中默认的URL链接

提供文档元数据

实例解析

HTML 脚本

插入一个脚本

使用 <noscript> 标签

实例解析

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容：这是HTML课程的第四课，主要讲解HTML的文字标签和格式标签。在今天我们做一个属于自己的简历。

上节回顾

在上一节中主要讲解了HTML的标题标签（h1~h7）以及加粗、斜体、下划线、上下标等格式的标签。上节请戳→HTML电脑编程03 标题物理字体标签的使用，大学生学编程

HTML

font标签

font标签通过字面意思来看，就是字体的意思。是的这是一个用来显示文字的标签。不过值得说的是，这个文字可以通过属性的方式，指定颜色和字体大小。比如：

font标签的写法

效果：

font标签的显示效果

从书写的HTML代码可以看出，font标签包括两个参数：

1. color（字体的颜色）：颜色的值可以为英文，也可以为RGB数值。
   

2. size（字体的大小）：通过数字1~7可以控制字体的大小。

3. face（文字的显示字体）：这个属性可以设置显示的字体。如可以写为：face="楷体"

颜色体系

在HTML中包括两种颜色体系。一种就是直接写颜色的英文，如：red（红色）、blue（蓝色）、green（绿色）等。

不同颜色

另外一种颜色体系是RGB。由R（Red）、G（Green）、B（Blue）三种颜色组成。相信小时候很多人都知道两种不同的颜料，可以转换为不同的颜色。RGB就是通过红绿蓝不同的明暗程度。来表示所有的颜色的。

RGB

RGB中的每一个颜色都是以六位十六进制进行表示。数值越大颜色越深。如：000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#号。

段落标签

段落标签为p。会为里面的文字自动分段显示：

p标签自动分段

换行标签

换行标签为br，这是个单标签。写法为：<br/>。

br标签的形式

效果：

换行标签的效果

默认情况下，HTML的文档排列形式为自上而下，自左而右。标签包括行级标签和块级标签。如果想要对块级标签进行换行，你就需要使用br标签。

其他几个标签

下面是几个标签，大家直接Sublime中写入看一下效果哦。在以后就直接使用啦

居中预格式化标签

的网站不在于网页的眩目多彩，而在于信息的流量和浏览者的视觉感受。小小的文字在不同的设计师手中会演绎成不同的艺术乐章。作为网页设计师，必须下工夫做好网页文本的排版设计，希望下面介绍的网页文本编排秘招能给大家一点启示。

本文主要介绍在网站设计过程中文本排版应注意的基本问题和常规解决方法。

不合理的网页文本排版会对浏览者的视力产生消极的影响，不亚于庸俗的网页内容对于浏览者心灵的毒害。设计师要避免这样的问题出现，其实也很简单，记住5要素：字体大小、字间距离、行内字数、行间距离和段落距离。

1．字体大小

标准正文字体大小一般为9pt（点数）或12px（像素）。由于显示器屏幕越来越大，同一字体大小设置会比以前显示得小，现在有些网页正文字体大小设计趋向增大，可以在这个基础上增加2个单位，但不能超过16像素，否则就会觉得太大，显得版面内容太空。

在网页正文中适合视觉阅读的字体大小为12pt，但由于在一个页面中需要安排的内容较多，通常采用9pt，所以建议根据个人网页内容而设定。

较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字体容易产生整体感和精致感，但可读性较差。

2．字间距离

正文字距一般保持正常即可，即为0em（字体高度），不要超过1em，否则就显得不连贯。

3．行内字数

行内字数一般根据版面大小而定，建议正字数保持在40个字左右为宜。

4．行间距离

正文行距一般设为1.6em（字体高度）左右，正常范围为1.2-2em（字体高度）。不宜太小，否则会挤在一起，无法识别；太大就容易产生断行现象。

行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。这主要是因为适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。

除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独具匠心。

5．段落距离

正文段距一般可设为1em（字体高度），即相当于空一行，由于在CSS样式表中没有直接的段距设置，可通过设置margin（边距）、padding（填充）属性来实现。

1.阅后如果喜欢，不妨点赞、评论和关注一下。

2.如果喜欢玩软件，请关注本头条号阅读相关文章。

3.在学习中有什么问题，欢迎与我沟通交流，号搜索：微课传媒，我在这里等你哟！