前言
HTML5,作为当今网页开发的核心技术,拥有丰富的元素和属性。掌握这些符号可以帮助开发者快速构建高效、美观的网页。本文将为你提供一份HTML5常用符号速查表,助你快速入门。
元素与属性
标题元素
| 标签 |
用途 |
属性 |
示例 |
<h1>-<h6> |
标题,<h1>级别最高,<h6>级别最低 |
align |
<h1 align="center">这是一个标题</h1> |
<hgroup> |
标题组 |
|
<hgroup><h1>主标题</h1><h2>副标题</h2></hgroup> |
段落元素
| 标签 |
用途 |
属性 |
示例 |
<p> |
段落 |
|
<p>这是一个段落。</p> |
<address> |
地址 |
|
<address>地址信息</address> |
块级元素
| 标签 |
用途 |
属性 |
示例 |
<div> |
用于组合内容、代码或分组元素 |
class |
<div class="container">内容</div> |
<span> |
用于文本中的行内元素 |
|
<span>文本内容</span> |
<pre> |
格式化文本 |
|
<pre>格式化文本</pre> |
<br> |
换行 |
|
<br> |
<hr> |
分隔线 |
|
<hr> |
<ol>-<ul> |
列表 |
type |
<ul type="circle"><li>列表项</li></ul> |
<li> |
列表项 |
|
<li>列表项</li> |
<dl>-<dt>-<dd> |
定义列表 |
|
<dl><dt>标题</dt><dd>描述</dd></dl> |
行内元素
| 标签 |
用途 |
属性 |
示例 |
<a> |
链接 |
href |
<a href="http://www.example.com">链接文本</a> |
<img> |
图片 |
src |
<img src="image.jpg" alt="图片描述"> |
<input> |
输入框 |
type |
<input type="text" name="username"> |
<label> |
表单标签 |
for |
<label for="username">用户名</label> |
<button> |
按钮 |
|
<button>提交</button> |
<select> |
下拉菜单 |
name |
<select name="cars"><option value="volvo">Volvo</option></select> |
<option> |
下拉菜单中的选项 |
value |
<option value="saab">Saab</option> |
<textarea> |
文本区域 |
name |
<textarea name="message" rows="4" cols="50">请输入内容</textarea> |
<fieldset> |
表单字段集 |
|
<fieldset><legend>用户信息</legend><label for="username">用户名:</label><input type="text" name="username"></fieldset> |
<form> |
表单 |
|
<form action="submit.html" method="post"><input type="text" name="username"><input type="submit" value="提交"></form> |
媒体元素
| 标签 |
用途 |
属性 |
示例 |
<audio> |
音频 |
src, controls, autoplay |
<audio src="audio.mp3" controls autoplay> |
<video> |
视频 |
src, controls, autoplay |
<video src="video.mp4" controls autoplay> |
<embed> |
插入外部媒体 |
src, type, width, height |
<embed src="plugin.swf" type="application/x-shockwave-flash" width="640" height="480"> |
<iframe> |
内联框架 |
src, name, frameborder, scrolling |
<iframe src="example.html" frameborder="0" scrolling="no"></iframe> |
文档元数据
| 标签 |
用途 |
属性 |
示例 |
<html> |
网页文档根元素 |
manifest |
<html manifest="cache.manifest">...</html> |
<head> |
包含文档的元数据(如标题、链接、脚本) |
|
<head><title>标题</title><link rel="stylesheet" href="style.css"></head> |
<title> |
网页标题 |
|
<title>页面标题</title> |
<base> |
指定网页中的基准URL |
href, target |
<base href="http://www.example.com/" target="_blank"> |
<link> |
链接到样式表或资源 |
href, type, rel, media |
<link rel="stylesheet" href="style.css"> |
<meta> |
网页元数据 |
http-equiv, name, content |
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<script> |
网页脚本 |
src, type, async, defer |
<script src="script.js" type="text/javascript"></script> |
<style> |
内联CSS样式 |
type |
<style type="text/css">body { background-color: #f5f5f5; }</style> |
<body> |
网页的主体内容 |
|
<body>… |