HTML基础标签总结

太过爱你忘了你带给我的痛 2022-03-27 01:52 362阅读 0赞

**HTML是以标签为主的超文本标记语言，标签是这门语言的灵魂。希望这篇笔记能帮助到同为初学的你！**  
PS:<>为标签，（）为属性，整理顺序按照本人菜鸟教程的学习顺序为主的。

## 基础 ##

`<!DOCTYPE html>` 声明为 HTML5 文档  
`<html>` 元素是 HTML 页面的根元素  
`<head>` 元素包含了文档的元（meta）数据，如 `<meta charset="utf-8">` 定义网页编码格式为 utf-8。  
`<title>` 元素描述了文档的标题  
`<body>` 元素包含了可见的页面内容  
`<h1>-<h6>` 元素定义一个标题  
`<p>` 元素定义一个段落  
`<a href="http://www.runoob.com">这是一个链接</a>`定义链接  
`target` （属性），你可以定义被链接的文档在何处显示  
`id`（属性）可用于创建在一个HTML文档书签标记  
`<img src="/images/logo.png" width="258" height="39" />`定义图像  
`<br>` 标签定义换行  
`<hr>` 标签在 HTML 页面中创建水平线  
``注释  
`<b>` 定义粗体文本  
`<i>`定义斜体字  
`<small>` 定义小号字  
`<sub>`定义下标字  
`<sup>`定义上标字  
`<ins>`定义插入字  
`<del>`定义删除字  
`<bdo>` 定义文字方向  
`<abbr>` 定义缩写  
`<address>` 定义地址  
`<base>` 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接  
`<link>` eg:外部样式表`<link rel="stylesheet" type="text/css" href="mystyle.css">`标签定义了文档与外部资源之间的关系  
`<style>` 标签定义了HTML文档的样式文件引用地址  
`<meta>`标签描述了一些基本的元数据  
`<script>`定义了客户端的脚本文件  
`background-color`（属性），定义一个元素的背景颜色  
`font-family`（字体）  
`color`（颜色）  
`font-size`（字体大小）  
`text-align`（文字对齐）

## 图像 ##

`<img>`图像  
`src`源属性的值是图像的 URL 地址  
`alt` 属性用来为图像定义一串预备的可替换的文本  
`height`（高度） 与 `width`（宽度）属性用于设置图像的高度与宽度  
`<area>`定义图像地图中的可点击区域  
`<map>`定义图像地图

## 表格 ##

`<table>` 表格  
`<tr>` 行  
`<td>` 列  
`border`(边框)  
`<th>` 表头  
`<caption>`表格标题  
`colspan（`跨行）  
`rowspan`（跨列）  
`cellspacing`（格间距）  
`cellpadding`（格边距）

## 列表 ##

`<ul>`无序列表  
`<ol>`有序列表，type（属性）可定义排序标志；start（开始位置属性）  
`<li>`有序和无序列表项  
`<dl>`自定义列表  
`<dt>`自定义列表项  
`<dd>`自定义列表项的定义

## 区块 ##

`<div>` 定义了文档的区域，块级 (block-level)  
`<span>` 用来组合文档中的行内元素， 内联元素(inline)

## 表单 ##

`<form>`表单标签  
`action`（表单数据将被发送到服务器上的位置）  
`<input>`输入表单  
`type="text"`（属性 表单输入文本域）  
`type="password"`（属性 表单输入密码字段）  
`type="radio"`例`<input type="radio" name="sex" value="male">Male<br>`（单选框）  
`type="checkbox"` 例 `<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>`（复选框）  
`checked="checked"`复选框的默认选项  
`type="button”`（按钮)  
`type="submit"`（提交）  
`<select>` 定义了下拉选项列表  
`<option>`下拉列表选项，`selected`（预选值）  
`<textarea>`定义文本域 (一个多行的输入控件)  
`<fieldset>` 定义了一组相关的表单元素，并使用外框包含起来  
`<legend>`定义了 `<fieldset>` 元素的标题

## 框架 ##

`<iframe>`定义一个内联的iframe  
`height` 和 `width` （属性用来定义iframe标签的高度与宽度）  
`frameborder` 属性用于定义iframe表示是否显示边框

## HTML字符实体 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzIwMDQ4_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzIwMDQ4_size_16_color_FFFFFF_t_70]: /images/20220327/52719c1c432f435b8bcfd9edaf1ef92a.png