HTML学习总结(3)——标签a/head/style/img

  • 时间:
  • 来源:互联网
  • 文章标签:

HTML链接

1.<a>标签

HTML 使用 <a>标签来设置超文本链接。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

  • <a> 标签中,使用 href 属性来描述链接的目标地址。 <a href="url">链接内容</a>
  • 默认情况下,链接将以以下形式出现在浏览器中:一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时,链接显示为红色并带有下划线。
    <a href="https://www.csdn.net">访问CSDN</a>
    在这里插入图片描述

2. HTML <a> target 属性

<a>标签中使用 target 属性,你可以规定在何处打开链接文档。
target 属性值有:

  • _blank:在新窗口中打开被链接文档。
  • _self:默认。在相同的框架中打开被链接文档。
  • _parent:在父框架集中打开被链接文档。
  • _top:在整个窗口中打开被链接文档。 framename:在指定的框架中打开被链接文档。
    <a href="https://www.CSDN.net" target="_blank">访问CSDN</a>

HTML头部标签

<head> 元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
下面是 <head> 元素包含的头部标签元素列表:

标签 描述
head 定义了文档的信息
title 定义了文档的标题
base 定义了页面链接标签的默认链接地址
link 定义了一个文档和外部资源之间的关系
meta 定义了HTML文档中的元数据
script 定义了客户端的脚本文件
noscript 定义在脚本未被执行时的替代内容(文本)
style 定义了HTML文档的样式文件

<title>标签

<title> 标签定义了 HTML 文档的标题,在所有 HTML 文档中是必需的。
<title> 元素:

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时的标题
  • 显示在搜索引擎结果中的页面标题

HTML CSS

CSS 可以通过以下方式添加到HTML中:

  • 内联样式:在HTML元素中使用“style”属性。
  • 内部样式表:在HTML文档头部 <head>区域使用<style> 元素来包含 CSS。
  • 外部引用:使用外部CSS文件。
    最好的方式是通过外部引用CSS文件

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

  • 使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式。
    <h1 style="text-align:center;">居中对齐的标题</h1>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 部分通过

<style type="text/css">
 h1 {color:orange;}
 p {color:green;}
</style>

在这里插入图片描述

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。

<head>
<link rel="stylesheet" type="text/css" href="/statics/styles.css">
</head>

<img>标签

  • 在 HTML 中,图像由 标签定义。<img>是空标签,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。源属性的值是图像的 URL 地址。 <img src="url">
  • URL 指存储图像的位置,你需要为位于引号之间的 src 属性放置图像位置。
  • alt属性用来为图像定义一串预备的可替代的文本。替代文本属性的值是用户定义的。在浏览器无法载入图像时,替代文本属性告诉读者他们失去的信息。
    <img src="test.png" alt="我的图片">
  • width(宽度)与 height(高度)属性用于设置图像的宽度与高度。width 与 height 属性值可以以 px(像素)或 %(百分比)形式指定,默认单位为 px(像素)。
    <img src="test.png" alt="随时随地学编程" width="105" height="80">
    在这里插入图片描述

本文链接http://www.taodudu.cc/news/show-82949.html