上一篇文章主要介绍了web基础和html的结构、头标记。这一篇用来介绍body中的标签。
第一种是无法通过键盘输入，这种特殊字符有对应的字符实体。
| 特殊字符 | 字符实体 |
|---|---|
| Γ | Α |
| Ω | Ω |
| ρ | ρ |
第二种是有些字符在html有特殊的含义：如"<"表示html标记的开始，“>”表示html标记结束。也需要通过字符实体显示。
标签：<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>
<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 起始编号
代码：
<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（锚）
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>
运行结果：
| 拥有该属性的标签 | 属性 | 说明 |
|---|---|---|
| <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
本文发布于:2024-02-02 21:54:09，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170688204746684.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
