HTML表格，列表，表单（笔记10）
网络安全自学笔记10
继续学习HTML，学习资料解压到了E盘根目录
浏览器打开E:/html教学资料/html教学版/index.htm，可以全部展开学习
HTML在线手册
表格是用<table>标签定义的。表格被划分为行（使用<tr>标签），每行又被划分为数据单元格（使用<td>标签）。td表示“表格数据”（Table Data），即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等
1、如何在HTML页面中创建表格
表格
2、想要显示一个有边框的表格，需要使用border属性
表格边框
3、如果不指定border属性，表格将不显示边框
没有边框的表格
4、表格头使用<th>标签指定
表格头
5、表格中的空单元格（在多数浏览器中，没有内容的单元格显示得不太好）
空单元格
6、可以在空单元格里加入不可分空格来占位，这样边框能正常显示
不可分空格
7、如何创建一个有标题的表格
有标题的表格
8、如何定义跨行或者跨列的单元格
单元格跨行（列）的表格
9、如何在元素中显示其他元素
10、如何使用cellpadding属性在表格内容和边框之间留出更多空白
cellpadding属性
11、如何使用cellspacing属性来增加单元格间距
cellspacing
12、给表格增加背景色或者背景图像
表格增加背景
单元格增加背景
13、如何使用“align”属性来设置单元格的对齐方式，让表格好看一些
给单元格内容设置对齐方式
14、如何使用“frame”属性来控制表格周围的边框
HTML支持有序、无序和自定义列表
1、无序列表是一个项目的序列。各项目前加有标记（通常是黑色的实心小圆圈），以<ul>标签开始，每个列表项目以<li>开始
无序列表
无序列表的不同类型
2、有序列表也是一个项目的序列。各项目前加有数字作标记，以<ol>标签开始，每个列表项目以<li>开始
有序列表
有序列表的不同类型
3、自定义列表不是一个项目的序列，它是一系列条目和它们的解释，以<dl>标签开始，自定义列表条目以<dt>开始，自定义列表的定义以<dd>开始
自定义列表
4、怎样嵌套列表
表单是一个能够包含表单元素的区域。表单元素是能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等），表单是用<form>元素定义的
1、如何创建文本框
文本框
2、如何创建密码框
密码框
3、如何创建单选按钮
单选按钮
4、创建复选框
复选框
5、表单的action属性和提交按钮。当用户点击提交按钮的时候，表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件，该目的文件收到信息后通常进行相关的处理
含有文本框和提交按钮的表单
6、如何从一个表单发送电子邮件
从表单发送电子邮件
总结：
1、继续了解HTML语言
2、学习HTML表格，列表，表单
前端入门——html 文字格式、标题与段落
在制作网页时，文字是最基本的元素之一。让阅读者更容易阅读，短时间里获得更多信息，是网页创作者的目标。本篇将介绍各种文字格式标签的使用方法。
本篇主要针对初学者的一篇教程，如果你非常熟悉html，可以忽略本篇文章。
- 标题文字
- 文字格式标签
- 段落标签
- 其它标签
在网上浏览时经常看到一些标题文字，用来对应章节划分，它们以固定的字号显示，总共有6种级别的标题，从 h1 至 h6 依次减小，如下图：
html 代码：
标题对齐方式可以使用 align 属性，分别有三个属性：
- left —— 左对齐
- center —— 居中对齐
- right —— 右对齐
如下图：
html代码：
除了标题，网页中普通文字也是不可缺少的，而各种文字效果可以使网页更加漂亮。
只需在<body>和</body>之间输入文字，就会直接在页面中显示，如何设置这些文字的格式，这里使用<font>标签，下面将逐一介绍各种文字格式用法。
一、设置字体、字号、颜色 —— <font> 标签
<font> 标签在HTML 4 中用于指定字体、字体大小和文本颜色，但在HTML5 中不支持。
- face 属性：字体类型
- size 属性： 字体字号大小
- color 属性：字体颜色
html代码：
在html5中不建议使用，请用 css 样式代替。
二、粗体、斜体、下划线、删除线—— strong、em、u、del
效果如下：
html代码：
注：html 5 和 html 4 相关标签存在巨大差异，比如 strong 和 b 、del 和 s、em 和 i 等效果相同，在html5 中不支持，b、s、i 标签，已不建议使用，关于各种差异，可自己了解下就可以了。
3、上标和下标 —— sup、sub
效果如下：
html代码：
4、空格——
一般在网页中输入文字时，在段落中明明增加了空格，却在页面中看不到，这是因为在html中，浏览器本身会将2个句子之间的所有半角空白仅当做一个空白来看待。所以在这里使用空格符代替，每个空格符代表一个半角空格，多个空格可以使用多次。
html代码：
由于头条不显示空格字符，所以用图片代替
效果：
5、其它特殊字符
除了空格字符，在网页中还有一些特殊字符也需要使用代码来代替，一般情况下，特殊字符由前缀 “&” 开始、字符名和后缀 “;” 组成，和空格符类似。如下表
特殊字符有很多，这里只列出一些例子，具体自己搜索了解下。
在网页中要把文字有条理地显示，需要使用到段落标签，下面介绍一些与段落相关的标签。
- 段落标签——p
在网页中，通过 <p>定义为一个段落。
html代码：
效果：
- 换行标签——br
在写文字时，除了自动换行外，换可以使用<br>标签强制文字换行，这个和 p 段落标签不一样。段落标签的换行是隔行的，而br不是，时2行文字更加紧凑。
html代码：
效果如下：
如果不想文字被浏览器自动换行，可以使用<nobr></nobr>标签处理，如下图：
改行文字不会被自动换行，会看到出现横向滚动条。
- 保留原始排版方式——pre
在网页制作中，有时需要保留一些特殊的排版效果，这是使用标签控制就会很麻烦，使用<pre>标签就可以保留文本的格式排版效果。如下图：
html代码：
- 右缩进—— blockquote
使用<blockquote>可以实现文字段落缩进，每使用一次，段落就缩进一次，可以嵌套使用。
实例代码：
效果如下：
请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。
- 水平线——hr
在段落和段落之间加上一行水平线，将段落隔开。如下效果：
html代码：
- 文字标注——ruby
在网页中可以通过添加对文字的标注来说明某段文本。
效果如下：
html代码：
- 其它标签——var、code、kbd等
本篇介绍了大部分常用的文本格式标签，在制作网页时会经常使用到。如何掌握这些标签使用，很简单，可以使用文本编辑器或类似w3cshool 在线可编辑预览的工具，亲手写一写，熟悉每个标签的用处，无需死记硬背，关键在于理解。
最后，感谢您的阅读及关注，祝你学习愉快。
上篇：
下篇：
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
