02 基础标签

5/9/2021 html

# 基础标签

# div

# span

# br

<br/> 换行

# hr

<hr/> 水平分隔线

# a

a - HTML(超文本标记语言) | MDN (opens new window)

target

该属性指定在何处显示链接的资源。 取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:

  • _self: 当前页面加载,即当前的响应到同一HTML 4 frame(或HTML5浏览上下文)。此值是默认的,如果没有指定属性的话。
  • _blank: 新窗口打开,即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
  • _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式与 _self 相同。
  • _top: IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self

# img

img:图像嵌入元素 - HTML(超文本标记语言) | MDN (opens new window)

  • src: 图像的 URL,这个属性对 <img> 元素来说是必需的。
  • alt: 定义了图像的备用文本描述。(加载不成功时显式)
  • title: title 元素的值一般作为提示条(tooltip)呈现给用户,在光标于图片上停下后显示出来。

# ul ol li

ul: unordered list
ol: ordered list
li: list item

ul - HTML(超文本标记语言) | MDN (opens new window) ol - HTML(超文本标记语言) | MDN (opens new window)

# 文本格式化标签

# b strong i em

都是行内标签

加粗 <b></b>
加粗+强调 <strong></strong>

斜体 <i></i>
斜体+强调 <em></em>

# pre

块标签

预格式化文本, 保留空格和换行,宽度。

# small sub sup

行内标签

  • small 小型文本
  • sub 下标
  • sup 上标

# HTML 实体转义

字符 十进制 转义字符
" &#34; &quot;
& &#38; &amp;
< &#60; &lt;
> &#62; &gt;
不断开空格(non-breaking space) &#160; &nbsp;

# 块级元素 行内元素

  • 块级元素 (display: block)

独占一行,宽度和高度可控;如果没有设置宽度,将默认铺满整行。
其内可以包含块级元素和行内元素

  • 行内元素(display: inline)

不单独成行,宽高不可控,由内容决定。
其内只能包含行内元素。

可以通过显式指定 display 属性的值来修改。


  • 块级元素可以包含行内元素或默写元素,行内元素不能包含块级元素

  • 块级元素不能放在 <p></p> 里面

  • 有几个特殊的块级元素只能包含行内元素,不能包含块级元素 h1 h2 h3 h4 h5 h6 p dt

  • 块级元素与块级元素并列,行内元素与行内元素并列


<!-- 错误示范 -->
<div>
    <h2>块级元素</h2>
    <span>行内元素</span>
</div>

# 标签的通用属性

所有标签都有的属性

  • id 唯一标识

  • class 类名

  • style 设置行内样式

  • title 鼠标 hover 时的提示文本

# 标签的自定义属性

通常的命名格式:data-*

用于传值或图片懒加载等。

更新时间: Wednesday, May 12, 2021 23:10