HTML常用标签

1、a标签

<a href="地址"> 显示文字 </a>

< a >标签定义超链接，用于从一个页面链接到另一个页面。

属性

href :

• 必填属性 连接路径

• 空着： 每次点击刷新一次

• #：回到顶部但不刷新

• target : 超链接打开方式， _blank 新页面打开；_self 本页面打开 ，默认。

路径

• 相对路径 001html入门.html 回到上一层路径: …/
• 绝对路径 从盘符开始 从http://www…

显示样式

在所有浏览器中，链接的默认外观如下：

• 未被访问的链接带有下划线而且是蓝色的

• 已被访问的链接带有下划线而且是紫色的

• 活动链接带有下划线而且是红色的

2、img标签

在html页面中用来引入一张图像。

<img src="Resource/66914746_cover.jpg" alt="加载错误"; title="我无法挽留，无法回头";>

属性

• src ： 图像地址 --必填

• title : 当鼠标悬停在内容上时候显示的提示字

• alt ： 当图片无法正常显示，显示的提示字

• width ： 宽度 px

• height : 高度
  如果宽高只设置一个，另一个会等比进行缩放

• border ： 边框 px 默认黑色

<a href="https://activity.books.com.tw/everylettermatters/sentence/everyday" target="_blank" width="512px">
    <img src="Resource/66914746_cover.jpg" alt="错误" width="512px"; title="可远观而不可亵玩焉";>
</a>

3、元素

元素： 标签+内容

块元素

• div,p,h header,section,ul,footer等标签

• 独占一行，前后换行

• 可以设置宽高

• 嵌套任意其他元素： 块元素 行内元素 普通的文本。

块元素共有属性：

align：设置块元素中的内容在当前块元素中的对其方式

• left ——左对齐 默认

• right ——右对齐

• center ——居中对齐

• justify ——两端对齐 多行文本下,两端对齐有效果

<div align="left">left</div>
<div align="right">right</div>
<div align="center">center</div>
<div align="justify">justify</div>

行内元素

• 可以与其它元素同行显示，宽度由内容撑起来。

• 不可以设置宽高

• 嵌套其他行内元素或者普通文本。
  比如：a标签等

<a href="helloworld.html">返回HTML首页</a>

4、div—块标签

• 可定义文档中的分区或节（division/section）。

• 可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

• 如果用 id 或 class 来标记 < div >，那么该标签的作用会变得更加有效。

• 正常显示，独占一行，前后换行。

• 嵌套其他元素，统一管理元素标签，统一设置样式。

• div+css布局，嵌套任意元素

<div>
    我的div前面：
    <div style="width:200px;height: 50px;background: red">我是一个可爱的小div</div>
    我是div后面
    <a href="#" style="width:200px;height: 200px;background: red">淘气的a标签</a>

    <hr>
    <div align="left">left</div>
    <div align="right">right</div>
    <div align="center">center</div>
    <div align="justify">justify</div>
    <hr>
</div>
<div>
    <h3 align="center"><a href="helloworld.html">返回HTML首页</a></h3>
    <h3 align="right"><a href="#">返回顶部</a></h3>
</div>

5、p标签—段落标签

• < p > 标签定义段落。
  p 元素会自动在其前后创建一些空白。

• 块元素，独占一行

• 语义化

• 内容个数没有限制

• 上下存在留白 16px外边距
  == 注意: 一般嵌套其他行内元素或者普通文本 ==

<div>
    <h3>p 段落标签</h3>
    <p style="text-indent:4em" >语义化</p>
    <p style="text-indent:4em">内容个数没有限制</p>
    <p style="text-indent:4em">块元素,自己独占一行</p>
    <p style="text-indent:4em">上下存在留白 16px外边距</p>
    <p style="text-indent:4em">注意: 一般嵌套其他行内元素或者普通文本</p>
</div>

6、h标签—标题标签

• 根据权重的不同,字体大小一次减小，< h1 > 定义最大的标题。< h6 > 定义最小的标题。

• 语义化

• 块元素，独占一行

<h1>h1~h6 标题标签</h1>
<h4 style="text-indent:4em">根据权重的不同,字体大小一次减小</h4>
<h4 style="text-indent:4em">语义化</h4>
<h4 style="text-indent:4em">块元素</h4>
<h4 style="text-indent:4em">样式:</h4>
<h4 style="text-indent:4em">字体变大,变小</h4>
<h4 style="text-indent:4em">字体加粗</h4>
<h3 align="center"><a href="helloworld.html">返回HTML首页</a></h3>
<h3 align="right"><a href="#">返回上面</a></h3>