文章目录

HTML
- 一.文字标签
- 二.段落标签
- 三.列表标签
- - 1.有序列表
  - 2.无序列表
  - 3.插入列表
- 四.链接标签
- - 1.文本链接
  - 2.书签链接
- 五.表格
- - 1.绘制表格
  - 2.行标签属性
  - 3.单元格标签
  - 4.表头标签
  - 5.表格的结构标签
  - - 1.表首
    - 2.表主体
    - 3.表尾

HTML

<!--
<!DOCTYPE html> 文档的声明
<html> 标记文档的开始和结束<head> 文档的头部<meta charset="utf-8" /> 源信息标记<title>测试</title> 标题</head><body>  主体内容</body>
</html>
-->

一.文字标签

特殊符号	符号码	特殊符号	符号码
回车	&quot	空格	&nbsp
&	&amp	"
<	&lt	«	&laquo
>	&gt	»	&raquo
©	&copy	®	&reg

<!--<h1>~<h6>显示标题文字，字号逐渐减小-->
<h1>文字内容</h1>
<u>下划线标签</u>
<sub>下标标签</sub>
<sup>上标标签</sup>
<em>斜体</em>
<stong>加粗</stong>
<strike>删除线标签</strike>
<front size="3" color="red" face="字体">改变文字的字体、字号以及颜色</front>

二.段落标签

<p>修饰段落，自动换行，《p》可也单独使用，也可以成对使用
</p>
<nobr>修饰段落，自动换行在HTML5中，使用了此标签后，当文字内容过长时，浏览器下方会出现滚动条。
</nobr>
<p align="left">align的属性值有left,center,right,align可用于多个标签，不是只有《p》
</p>

三.列表标签

1.有序列表

<ol type="A" start ="1"><li>小猫</li><li>小狗</li><li>小兔子</li><li>小马</li>
</ol>

运行结果：

“start”和“type”为有序列表的属性值。
start的属性值为数值。
type的属性值有1，a，A，i，I。
含义分别为：阿拉伯数字，小写英文字母，大写英文字母，小写罗马字母和大写罗马字母。

2.无序列表

<ul type="circle"><li>列表项1</li><li>列表项2</li>
</ul>

运行结果：

type”为无序列表的属性
type的属性值有circle，disc ，quare含义分别为：空心圆，实心圆和实心正方形。

3.插入列表

<dl><dt>需要解释的名词</dt><dd>对名词的解释说明</dd>
</dl>

运行结果：

四.链接标签

1.文本链接

<a href=""> </a>

双引号里面写链接地址。
在写链接地址时，既可以使用绝对地址，也可以使用相对地址。为方便起见，通常使用相对地址。

2.书签链接

步骤：
创建书签：

<a name ="link"> </a>

链接地址：

<a href="#link"> </a>

作用：返回到某一位置。
例如：回到顶部，回到底部。
注意：
建立书签链接时，两个步骤没有顺序之分。即在代码中，既可以先建立书签代码在上，链接地址代码在下，也可以链接地址代码在上，建立书签代码在下。

五.表格

1.绘制表格

border属性设置表格的边框。默认的情况下，表格的边框为0。
height设置表格的高度。
width设置表格的宽度。
align设置表格的对齐方式。左对齐left、右对齐right、居中center。
bgcolor定义表格的背景颜色。
background可以为表格的背景加入一张背景图片。
cellspacing是单元格内容与单元格外框之间的距离
cellpadding是单元格与单元格之间的距离

<table border="5" height="200" width="400" align="center" bgcolor="yellow" background="img/13.jpg">   </table>

运行结果：

2.行标签属性

某一行高度和其他行高度不相等时，需要使用height属性。
通过设置bordercolor的属性单独为边框设置颜色。
通过设置bgcolor的属性单独为行设置背景颜色。
通过设定行属性align的值，改变本行的水平对齐方式。
通过设定行属性valign的值，来改变本行的垂直对齐方式：居上(top)、居中(middle)和居下(bottom)。

<tr height="30" bordercolor="red" bgcolor="yellow" align="right" valign="top" ></tr>

3.单元格标签

height、width、align、valign、bgcolor、background与之前的相同。
colspan水平方向上是跨过多个列，用来合并单元格。
rowspan垂直方向跨过多少行。

<td height="30" bordercolor="red" bgcolor="yellow" align="right" valign="top" colspac="3" rowspan="2" ></td>

4.表头标签

<th></th>

5.表格的结构标签

1.表首

表首，用于定义表格最上端表首的样式，可以设置背景颜色、文本对齐方式、文字对齐方式等。

<thead> </thead>

2.表主体

表主体标签用于定义表格主体的样式。

<tbody> </tbody>

3.表尾

使用标签用于定义表尾的样式。

<tfoot> </tfoot>

实例：

<table border="3" height="200" width="400" cellpadding="10" align="center"><caption>学生表</caption><!-- 表首 --><thead bgcolor="red" align="left" valign="center"><!-- align:文字水平居左，valign:文字垂直居中 --><tr><th>姓名</th><th>性别</th><th>年龄</th><th bgcolor="aqua">班号</th></tr></thead><!-- 表主体 --><tbody bgcolor="yellow" align="left" valign="center"><tr><td>张三</td><td>男</td><td rowspan="2">18</td><!-- 数值方向两个单元格 --><td>1班</td></tr><tr><td>李四</td><td rowspan="2">女</td><!-- 数值方向两个单元格 --><td>2班</td></tr><tr><td>王五</td><td>17</td><td>3班</td></tr><tr><td colspan="4">赵六</td></tr></tbody><!-- 表尾 --><tfoot bgcolor="pink" align="center"><<tr height="70"><td colspan="4">这是表尾哦！</td></tr></tfoot></table>

运行结果：

HTML 文字标签、段落标签、列表标签、链接标签和表格相关推荐

列表标签，自定义列表，img标签，超链接a标签
1.列表标签: 有序列表 ol创建有序列表 type="" li 列表项默认是数字1-n的列表符号,可以通过ol的type属性改变列表符号如果type属性值为:A, a, I, ...
Web前端技术基础实验报告二之格式化文本、段落与列表
目录实验题目:格式化文本.段落与列表实验目的:熟悉格式化文本与段落.列表的相关标签实验内容: 项目1 文本与段落标记的应用项目2 设计新闻访问列表项目3 设计制度宣传展板项目4 制作饭 ...
H5的段落标签、图片标签、列表标签与链接标签
段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...
HTML 字体标签图片标签列表标签链接标签 div span 语义化标签表格标签
文章目录 HTML 字体标签图片标签列表标签链接标签 div span 语义化标签表格标签 HTML 概念:是最基础的网页开发语言 Hyper text markup language 超文本 ...
【Web】HTML（No.03）HTML标签（一）标题标签、段落标签、水平线标签、换行标签、div/span标签、图像标签、链接标签、base标签、特殊字符标签、注释标签、文本格式化标签
HTML标签分类在HTML页面中,带有"< >"符号的元素被称为HTML标签,如上面提到的 HTML.head.body都是HTML骨架结构标签.所谓标签就是放在&q ...
图片标签|| 列表标签||链接标签||div和span|| 语义化标签
图片标签 img:展示图片 * 属性: * src:指定图片的位置相对路径 * 以.开头的路径 ...
【HTML】html基本标签-1（文字，列表，图片标签）
文章目录 1.html规范 2.文字标签和注释标签 3.标题标签,水平线标签,特殊字符 4.列表标签 5.图片标签 6.路径的介绍 7.列表标签案例 1.html规范 html的规范:(1)<h ...
帝国Cms列表页和内容页调用栏目名称与链接标签的说明(列表与标签模板)
帝国Cms列表页和内容页调用栏目名称与链接标签的说明(列表与标签模板) [!–this.classname–].[!–this.classlink–]是list.var里有效至于更多链接是:[!–t ...
Web学习第二天——HTML的基本标签（媒体标签、链接标签、列表标签、表格标签、表单标签）
第二天 HTML的常用标签(媒体标签.链接标签.列表标签.表格标签.表单标签) 一.媒体标签 (一).图片标签(img) 标签格式及属性介绍 (二).音频标签(embed.audio) embed标签 ...

HTML 文字标签、段落标签、列表标签、链接标签和表格

文章目录

HTML

一.文字标签

二.段落标签

三.列表标签

1.有序列表

2.无序列表

3.插入列表

四.链接标签

1.文本链接

2.书签链接

五.表格

1.绘制表格

2.行标签属性

3.单元格标签

4.表头标签

5.表格的结构标签

1.表首

2.表主体

3.表尾

HTML 文字标签、段落标签、列表标签、链接标签和表格相关推荐

最新文章

热门文章