HTML标签笔记

父子级关系：

兄弟关系：

在sublime中在html文件中，输入!或html:5 再按TAB键直接出现HTML框架

语义化标签：

排版标签： （排版标签主要和CSS搭配使用，显示页面结构的标签，是网页布局最常用的标签）

标题标签：（单词缩写：head）

段落标签：（单词缩写：paragraph)

是HTML文档中最常见地标签，默认情况下，文本在一个段落中会根据浏览器窗口地大小自动换行。

水平线标签：（单词缩写: horizontal)

在网页中常常看到一些水平线将段落与段落之间分隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成

（输出一个标签再按TAB键高效噢！）

换行标签：(break)

div span标签

div span 是没有语义 是我们网页布局主要地2个盒子

div就是division的缩写 分别，分区的意思 其实有很多div来组成网页

span跨度，跨距；范围

语法格式：

span 是放在一行

文本格式标签：

图像标签img:

基本图像插入方式：

属性 属性值 描述

src URL 图像的路径

alt 文本 图像不能显示时的替换文本

title 文本 鼠标悬停时显示的内容

width 像素 设置图像的宽度

height 像素 设置图像的高度

border 数字 设置图像边框的宽度

链接标签：（anchor,锚)

href:用于指定链接目标的URL地址，当为标签应用href属性时，它就具有了超链接的功能，用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

注意：

（1）外部链接需要添加 http://www.baidu.com

（2）内部链接直接链接内部页面名称即可，比如<code>&lt;a href="index.html"&gt;首页&lt;/a&gt;</code>

（3）如果当时没有确定链接目标时，通常将链接标签href属性值定义为"#"（即href="$")，表示该链接暂时为一个空链接

（4）不仅可以创建文本超链接，在网页中各种网页元素，如图片、表格、音频、视频等都可以添加超链接。

锚点定位：（通过创建锚点链接，用户能够快速定位到目标内容）

创建锚点链接分为两步：

（1）使用"a href="#id名"链接文本/a"创建链接文本

（2）使用相应的id名标注跳转到目标位置

base标签：

base可以设置整体链接的打开状态

可以所有链接在新窗口打开，而不要在下目标链接中加打开方式

如果想要某一个特别的打开方式可以在链接中自己重新定义

特殊字符标签：

特殊字符 描述 字符的代码

我们的段落语法格式是：<code>&amp;lt;p&amp;gt; 段落 &amp;lt;/p&amp;gt;</code>

注释标签：

路径:(相对路径和绝对路径)

相对路径：

（1）图像文件和HTML文件位于同一文件夹，只需输入图像文件的名称即可，如<code>&lt;img src="logo.gif"/&gt;</code>

（2）图像文件位与HTML的下一级文夹，输出文件夹名和文件名，之间用"/"隔开，如

（3）图像位于HTML文件的上一级文件夹 ，在文件名之前加入"…/"，如果是上两级，则需要"…/…/"，以此类推，如：<code>&lt;img src="../logo.gif"/&gt;</code>

绝对路径:

“D:\web\img\logo.gif”,或完整的网络地址，例如"http://www.itcast.cn/images/logo.gif"

列表标签：

无序列表：

无序列表的各个列表之间没有顺序级别之分，是并列的。其基本语法格式如下：

有序列表：(ol)

（排名可以用

ol里只能放li，但li里面可以放其他

自定义列表：

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：