HTML 学习笔记---基础知识(二)

144 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路


1. 网页布局

  • 定义HTML 文档标签  <html>
  • 文档标题标签  <title>
  • 文档主体标签  <body>
  • HTML标题标签  h (<h1>~<h6>)
  • 段落标签  <p>, 可以把 HTML 文档分割为若干段落
  • 水平线标签  <hr>
  • 换行标签  <br>
  • 网页布局最主要的2个盒子:<div><span>

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。 使用例子:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8"> 
    <title>div</title> 
</head>
<body>
    <p>这是一个文本。</p>
    <div style="color:#00FF00">
        <p>这是一个在 div 标签中的文本。</p>
    </div>
</body>
</html>

效果:

在这里插入图片描述

<span> 标签对文档中的行内元素进行组合;
它的宽度、高度都无法通过 CSS 样式设置,它的宽高受其本身内容控制,随着内容的宽高改变而改变

使用例子:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8"> 
    <title>span</title> 
</head>
<body>
    <p>这是含有 <span style="color:blue; font-weight:bold">span的文字</span></p>
</body>
</html>

效果:

在这里插入图片描述


2. 对文字

  • 文字粗体显示:<b><strong>
  • 文字斜体显示:<i><em>
  • 文字加删除线显示:<s><del>
  • 文字加下划线显示:<u><ins>

3. 对图像:使用 <img>


属性属性值描述
srcURL规定显示图像的 URL (即图像的路径)
alttext规定图像(不能显示时)的替代文本
widthpixels规定图像的宽度
heightpixels规定图像的高度
titletext规定有关元素的额外信息(鼠标悬停时显示的内容)

4. 链接标签 <a>

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

属性属性值描述
hrefURL规定链接目标的 URL 地址
target_blank
_self
_parent
_top
规定在何处打开目标 URL
(仅在 href 属性存在时使用)
_blank:在一个新的窗口打开被连接的的文档
_self:在当前页面打开被链接的文档
_parent:在父窗口中打开被链接的文档
_top:在整个窗口打开被链接的文档
  • 如果当时没有确定链接目标时,通常将链接标签的 href 属性值定义为 # (即 href= "#"),表示该链接暂时为一个空链接,点击之后跳转到当前页面的顶部