HTML5的标签属性

今天没有盐
122 阅读3分钟

一、什么是 HTML5？

定义

  • HTML5 是用来描述网页的一种语言，全称为超文本标记语言。用 HTML5 编写的文件，后缀以 .html 结尾。
  • HTML 是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：<html>

标签

  • 单标签：<img/>
  • 双标签：<html></html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="stylesheet">
</head>
<body>
</body>
</html>

二、<!DOCTYPE html> 的声明

定义

DOCTYPE 是 document type（文档类型）的缩写。<!DOCTYPE html> 是 H5 的声明，位于文档的最前面，处于标签之前。它是网页必备的组成部分，用于避免浏览器的怪异模式。

三、HTML5 的基本骨架

html 标签

定义 HTML 文档，这个元素让浏览器明白这是 HTML 文档，所有其他元素都要包裹在它里面，标签限定了文档的开始点和结束点。

head 标签

head 标签用于定义文档的头部。文档的头部描述了文档的名称属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的类型等。绝大多数文档头部包含的数据都不会真正作为内容显示给用户。

title 标签

  1. 定义文档的标题
  2. 它显示在浏览器窗口的标题栏或状态栏上
  3. <title> 标签是 <head> 标签中唯一必须要包含的东西，就是说写 head 一定要写 title

Meta 标签

meta 标签用来描述一个 HTML 网页文档的属性、关键词等，例如：charset="utf-8" 是当前使用的 utf-8 编码格式。在开发中我们经常会看到 utf-8，或是 gbk，这些都是编码格式，通常使用 utf-8。

body 标签

body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等），它直接在页面中显示出来，也就是用户可以直观看到的内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页标题</title>
</head>
<body>
    我会显示在浏览器中
</body>
</html>

四、段落与标题标签

段落标签 <p>

<p>这是大家网页设计第一课</p>
<p>个人名片</p>
<p>姓名：梁雅</p>

标题标签 <h>

  • <h1> 定义最大标题，<h6> 定义最小标签
<h1 align="center">这是 h1 标签</h1>
<h2>这是 h2 标签</h2>
<h3>这是 h3 标签</h3>
<h4>这是 h4 标签</h4>
<h5>这是 h5 标签</h5>

标题标签的摆放位置属性

  • align="left" 靠左（默认）
  • align="right" 靠右
  • align="center" 居中

五、水平线与图片标签

<br/> 单标签

  • 换行

<hr/> 单标签

  • 水平线
<hr width="500" size="1" color="blue" align="left">
<hr width="500" size="10" color="blue" align="center">
<hr width="500" size="30" color="blueviolet" align="right">

属性

  1. color 设置水平线的颜色
  2. width 设置水平线的宽度
  3. size 设置水平线的大小
  4. align 设置水平线的对齐方式（默认居中）
    • align="left" 靠左对齐
    • align="right" 靠右对齐
    • align="center" 居中对齐

<img/> 图片标签

  • 单标签
  • <img/> 标签定义 html 页面中的图像

属性

  1. src 路径（图片地址与图片名）
  2. width 设置图片的宽度
  3. height 设置图片的高度
  4. title 鼠标在图片上给出的提示
<img src="2.jpg" width="400px" height="400px" title="这是一个可爱的小狗狗"/>
  1. alt 图像的替换文本属性，在图像无法显示时告诉用户该图片的内容
  2. border 为图像添加边框，设置边框宽度（但边框颜色的调整仅仅通过 HTML 属性是不能够实现的）
<img src="2.jpg" width="200px" height="200px" vspace="30px" hspace="30px">
  1. vspace HTML 中通过 vspace 调整图像的垂直边距
  2. hspace HTML 中通过 hspace 调整图像的水平边距
<img src="2.jpg" width="400px" height="400px" align="right">
  1. align 对齐方式
    • align="left" 靠左对齐（默认）
    • align="right" 靠右对齐
<img src="2.jpg" width="400px" height="400px" align="right">
avatar
文章
阅读
粉丝