文章目录

  • 前言：
  • 一、基本结构
  • 二、网页中的文字和段落
  • < h>标签
  • < p>标签
  • < font>标签
  • < b>标签
  • < u>标签
  • < br>标签
  • < nobr>标签
  • < strike>标签
  • align属性
  • 二、网页中的图片样式
  • < img>标签
  • 三、表格布局网页
  • < table>标签
  • < caption>标签
  • < tr>标签
  • < td>标签
  • < th>标签
  • 表格属性(放在table标签里面)
  • 表格行属性(放在tr里面)
  • 表格单元格属性(放在td里面)
  • 四、列表
  • ul列表（无序列表）
  • menu列表（菜单列表）
  • ol列表（有序列表）
  • dl列表（定义列表）
  • dir列表（目录列表）
  • 五、超链接


前言：

本文记载的是学习HTML时根据书本记录的一些知识点，若有不当之处望指出，愿与大家共同进步。
附一份参考链接：HTML标签参考手册

一、基本结构

<!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" Content="text/http; charset=utf-8"/>
        <title>网页标签内容</title>
        <style>
        ·······
        </style>
    </head>
    <body>
    ······
    </body>

二、网页中的文字和段落

< h>标签

  • 功能:用于制作大小不同的标题，从h1到h6标题大小依次减小。
  • 用法:< h1>标题内容< /h1>，放在body标签下。

< p>标签

  • 功能:用于定义段落。
  • 用法:< p>段落内容< /p>，放在body标签下。

< font>标签

  • 功能:设置字体的大小、颜色和类型。
  • 属性:color、size、face(字体类型，如楷体，尽量用常见字体)
  • 用法:< font>内容< /font>，放在body标签下。

< b>标签

  • 功能:加粗文字
  • 用法:< b>需要加粗的内容< /b>

< u>标签

  • 功能:给内容添加下划线。
  • 用法:< u>需要加下划线的内容< /u>

< br>标签

  • 功能:给文字换行。
  • 用法:< br>下一行内容，或者：上一行内容< br/>
  • 注意:< br>是空标签，即无结束标签(< br>< /br>则错误)

< nobr>标签

  • 功能:不让文字换行。
  • 用法:< nobr>不需要换行的内容< /nobr>

< strike>标签

  • 功能:绘制删除线。
  • 用法:< strike>需要添加删除线的内容< /strike>，或者< s>内容< /s>

align属性

  • 功能:设置文字、图片等元素的对齐方式。
  • 属性值：left(默认)、right、center
  • 用法:放在< h>< p>< img>标签里面。

二、网页中的图片样式

< img>标签

  • src：指定图片的URL
  • alt：图片出问题的时候的替换文字
  • title：网页未加载完图片或鼠标停留时的提示文字
  • width：设置图片的宽度
  • height：设置图片的高度
  • border：设置图片边框的粗细
  • hspace：设置图片间的水平间距
  • vspace：设置图片间的垂直间距

HTML5读书笔记 html5的笔记_html


HTML5读书笔记 html5的笔记_HTML5读书笔记_02

三、表格布局网页

< table>标签

  • 功能:创建表格
  • 用法:< table>···< /table>，放在< body>标签下。

< caption>标签

  • 功能:给表格设置标题。
  • 用法:< caption>表格的标题< /caption>，放在< table>标签内。

< tr>标签

  • 功能:设置表格的行标记。
  • 用法:< tr>行内容< /tr>，放在< table>标签内。

< td>标签

  • 功能:设置表格的单元格标记。
  • 用法:< td>单元格内容< /td>，放在< /tr>标签内。

< th>标签

  • 功能:设置表格的表头。
  • 用法:< th>表格的表头内容< /th>，放在第一个< /tr>标签内。

表格属性(放在table标签里面)

  • border：设置表格边框的粗细。
  • bordercolor：设置表格边框的颜色。
  • cellspacing：设置单元格之间的间距。
  • cellpadding：设置的文字与边框的间距。
  • background：设置表格的背景图片。

表格行属性(放在tr里面)

  • height：设置表格行高度。
  • bgcolor：设置表格行背景色(会被单元格的颜色覆盖)。
  • align：设置行内文字水平对齐方式(left、center、right)
  • vlign：设置行内文字垂直对齐方式(top、middle、bottom)

表格单元格属性(放在td里面)

  • height：设置单元格的高度。
  • width：设置单元格的宽度。
  • bgcolor：设置单元格的背景色。
  • bordercolor：设置单元格边框颜色。
  • colspan：合并水平单元格（列相邻单元格）。
  • rowspan：合并垂直单元格（行相邻单元格）。
四、列表

ul列表（无序列表）

  • 用法： 其中type的值可为disc(实心圆(default))、circle(空心圆)、square(实心正方形)。
<ul type=符号类型>
	<li>第1项<li>
	<li>第n项<li>
</ul>

menu列表（菜单列表）

  • 和ul列表类似，把ul换成menu即可。

ol列表（有序列表）

  • 用法： 其中type的值可为1(数字(default))、a(字母)、Ⅰ(落马数字)。其中start可以设置序号起始值。
<ol type=符号类型 start=起始数值>
	<li>第1项<li>
	<li>第n项<li>
</ol>

dl列表（定义列表）

  • 用法：< dt>后面是要解释的名词，< dd>后面是解释。
<dl>
	<dt>名词</dd>解释
	<br/>
	<dt>名词</dd>解释
	<br/>
或者
	<dt>名词</dt>
	<dd>解释1</dd>
	<dd>解释2</dd>
或者
	<dt>
		名词
		<dd>解释1</dd>
		<dd>解释2</dd>
	</dt>
</dl>

dir列表（目录列表）

  • 不推荐使用

注:列表之间可以嵌套使用。

五、超链接
  • 用法：
<a href=链接目标的url target=目标窗口的打开方式>

其中目标链接的url可以是其他html的文件路径，也可以是网页链接的url。
其中目标窗口的打开方式属性值 可以为 _self、_blank、_top、_parent。