上一篇文章主要介绍了web基础和html的结构、头标记。这一篇用来介绍body中的标签。
一、文字与段落标记
- 首先，先来强调一个重点，前面已经说过，html将除了文字以外的所有东西，包括空格、回车等等都转化为标签形式，所以在body中你输入文字，它帮你直接输出，但你要输入空格，回车它看都不会看一眼。
- 这样我们就可以进一步理解到html语言，它将所有的一切都以标记的形式体现，你写了一行文字突然想加个图片，那就用
标签呗，浏览器一行一行读取显示，可以看到html主要还是在于标签，记住用的时候拿出来就好。
- 文字内容的输入
- 普通文字输入：英文和汉字字符直接输出
- 空格的输入： 要记住的是四个 相当于空一个汉字位置。
- 特殊文字输入：
第一种是无法通过键盘输入，这种特殊字符有对应的字符实体。
| 特殊字符 | 字符实体 |
|---|---|
| Γ | Α |
| Ω | Ω |
| ρ | ρ |
第二种是有些字符在html有特殊的含义：如"<"表示html标记的开始，“>”表示html标记结束。也需要通过字符实体显示。
2. 设置文字格式
标签：<font></font>
| 属性 | 功能 | 备注 |
|---|---|---|
| face | 字体设置 | 默认是宋体，可以设置多个，叫字体族，顺序优先，若不存在，换下一个 |
| size | 字号设置 | 范围1-7，超出去就按就近原则处理 默认字号3，+1-+7或者-1- -7，带正负号是在默认数值上加减 |
| color | 文字颜色 | 默认是黑色 |
sup文字修饰标记（行内块标签）
| 标记 | 完整英文/中文 | 描述 |
|---|---|---|
| <b>…</b>、<strong>…</strong> | bold/加粗 | 加粗 |
| <i>…</i> 、<cite> …</cite> 、<em> …</em> 、<var> …</var> | italic/斜体字、emphasize/强调 | 斜体 |
| <sup>…</sup> | superscript/上标 | |
| <sub>…</sub> | subscript/下标 | |
| <big>…</big> | 大号字 | |
| <small>…</small> | 小号字 | |
| <u>…</u> | underline | 下划线 |
| <s>…</s>、<strike>…</strike> | 删除线 |
- 案例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<font color="red" size="5">离子方程式:<b>CO<sub>3</sub><sup>2</sup>‾+SO<sub>2</sub>=SO<sub>3</sub><sup>2</sup>‾+CO<sub>2</sub>↑</b></font>
</body>
</html>
- 运行结果
3. 标题字（块标签）
- 一共有6级标题，标题号越大，对应字号越小。能够超过6但是还是按照普通文本显示
- 标题上空一行下空一行
-属性align，详情见下面代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<h0>零级标题</h0>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4 align="center">四级标题</h4>
<h5 align="right">五级标题</h5>
<h6 align="left">七级级标题</h6>
<h7>六级标题</h7>
<h8>八级标题</h8>
</body>
</html>
- 段落标记&&缩排标记&&预格式
-
预格式里面还是会识别对应的标签的，我感觉预格式最重要的作用就是在文字较多的时候很好地对空格和回车做了处理。
-
缩排工具是对整个标签内的文本进行整体缩排，有人想用它实现开头空两格的效果，但不现实。因为标签结束之后会空行，会使得段落看起来很离散。
-
段落标记具有对齐属性
在HTML中既可以使用单标记，也可以使用双标记。单标记和双标记都能创建一个段落
单标记创建的段落会跟上文产生一空行的间隔；而双标记创建的段落则与上下文同时有一空行的间隔。
<html>
<head>
</head>
<body>
<p> 今天我们来学习李白的一首诗，题目叫做<<静夜思>>。</p>
<pre>
<h2> 静夜思</h2>
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>
<blockquote>
这首诗的文体为四言绝句。<br>
绝句这首诗的文体为四言绝句这首诗的文体为四言绝句这首诗的文
这首诗的文体为四言绝句。
</blockquote>
<p>绝句这首诗的文体为四言绝句这首诗的文体为四言绝句这首诗的文
<p>绝句这首诗的文体为四言绝句这首诗的文体为四言绝句这首诗的文
</body>
</html>
运行结果：
注：p:paragraph br:barter rabbet pre:preformatted
5. hr标签（块标签）
| 属性 | 功能 |
|---|---|
| width | 单位像素或浏览器窗口百分比 |
| size | 水平线高度，单位像素 |
| align | 对齐方式，left、center、right，默认center |
| color | 水平线颜色 |
| noshade | 设置水平线为实心不带阴影效果 |
二、列表（块标签）
- 有序列表
<ol type=“A” start=“2” >
<li> </li>
<li> </li>
……
</ol>
type 前导符设置（前导符有：1<默认前导>，a，A，i，I）
start 起始编号
代码：
扫描二维码关注公众号，回复：
4581286 查看本文章
<html>
<head>
</head>
<body>
<h3>水果</h3>
<ol type="1" start="3">
<li>apple</li>
<li>香蕉</li>
<li>梨</li>
</ol>
<hr>
<h3>水果</h3>
<ol type="a" start="3">
<li>apple</li>
<li>香蕉</li>
<li>梨</li>
</ol>
<hr>
<h3>水果</h3>
<ol type="i" start="3">
<li>apple</li>
<li>香蕉</li>
<li>梨</li>
</ol>
</body>
</html>
运行结果：
- 无序列表
<ul type=“disc” >
<li> </li>
<li> </li>
……
</ul>
属性type取值：disc:实心原点。circle：空心原点。square:实心小方块
<html>
<head>
</head>
<body>
<h3>水果</h3>
<ul>
<li>apple</li>
<li>香蕉</li>
<li>梨</li>
</ul>
<hr>
<h3>水果</h3>
<ul type="circle">
<li>apple</li>
<li>香蕉</li>
<li>梨</li>
</ul>
<hr>
<h3>水果</h3>
<ul type="square">
<li>apple</li>
<li>香蕉</li>
<li>梨</li>
</ul>
</body>
</html>
嵌套列表：
<html>
<head>
</head>
<body>
<ul>
<li><u><h3>水果</h3></u>
<ol>
<li>apple</li>
<li>香蕉</li>
<li>梨</li>
</ol>
</li>
<li><u><h3>水果</h3></u>
<ol>
<li>apple</li>
<li>香蕉</li>
<li>梨</li>
</ol>
</li>
</body>
</html>
运行结果：
三、超链接
1.超链接的分类
a:anchor（锚）
- 按照目标端点分：
- 内部链接
- 外部链接
- 书签链接
- 脚本链接
- 下载链接
- 按照源端点分：
- 文本链接
- 图像链接
- 属性
- target：有四个值分别是：_top（新页面覆盖之前所有）_parent（就覆盖上一级）、_blank（在新页面打开）、_self（在本页面加载）
- href搞清楚相对路径就好
- title设置链接提示文字
四、表格
1.表格关键字一览
注意：th表头会有加粗效果
tr:table row td:table date cell th:table head
- 代码
<html>
<body>
<table border="1" height="90"width="100" bgcolor="gray">
<tr height="20" align="right" bgcolor="red">
<td align="left" bgcolor="green">
1111
</td>
<td>
222
</td>
</tr >
<tr height="50" bgcolor="pink">
<td>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
运行结果：
- 表格的属性
- 表格的使用其实很简单，你只要弄清楚你所要做的表格是几行几列，然后设置对应的属性就OK，我认为表格最重要的就是其属性。
- 表格主要属性：
| 拥有该属性的标签 | 属性 | 说明 |
|---|---|---|
| <table><tr> <td> | align | 1.table指的是整个表格在页面中的对齐方式 2.td对齐优先于tr对齐 |
| <table><tr> <td> | bordercolor | 1.table的边框颜色设置是指的外边框的颜色设置 2.td优先于tr |
| <table><tr> <td> | bgcolor | 设置背景颜色原理同上 |
| <table><tr> <td> | background | 设置背景图片原理同上 |
| <table><tr> <td> | height | 1.先得满足我能放的下所设置内容的宽和高的要求,如果你设置的不够，我也按照刚需来 2.谁设置的高度大就听谁的 |
| <table><td> | width | 1.内容刚需的宽度必须满足。 2.table说宽度多大就多大 3.内容刚需宽度<td所设宽度<table所定宽度，超出这个范围，td所设宽度作废 |
| <tr> <td> | valign | 设置内容垂直对齐方式.原理同align |
| <table> | border | 外面边框的宽度，单位像素，不设置为0，不显示边框 |
-
<table>的cellspacing和cellpadding：
-
rowspan和colspan用法相同，选定一个表格为原点进行跨行或者跨列，之后的tr中不需要再写对应的td。
-
<th>设置表头。<caption>为标题，要区分这两个的用法。
说明：本文参考《Web前端开发技术》以及部分学院PPT