文章目录

  • 前言:
  • 一、基本结构
  • 二、网页中的文字和段落
  • < 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的笔记_HTML5读书笔记


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