HTML 基础

最新推荐文章于 2022-08-11 19:18:25 发布

「已注销」

最新推荐文章于 2022-08-11 19:18:25 发布

阅读量445

点赞数 1

分类专栏： Web前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_43342381/article/details/118581222

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 HTML 标签参考手册——基础

1.1 模板中的标签

标签	描述
<!DOCTYPE>	定义文档类型
<html>	定义 HTML 文档
<head>	定义关于文档的信息
<meta>	定义关于 HTML 文档的元信息
<title>	定义文档的标题
<body>	定义文档的主体

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<base> 标签：

HTML <head> 中的 <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接：

<base href="http://www.runoob.com/images/" target="_blank">

<link> 标签：（外部样式表）

<link rel="stylesheet" type="text/css" href="mystyle.css">

<style> 标签：（内部样式表）

<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

<meta> 标签：

为搜索引擎定义关键词：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容：

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者：

<meta name="author" content="Runoob">

每30秒钟刷新当前页面：

<meta http-equiv="refresh" content="30">

显示标题中的logo：

HTML <title>元素不仅可以显示文本，也可以在左侧显示logo等图片。显示时，要将 <link>标签放入 <head>里。

<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>

1.2 多媒体标签

标签	描述
<audio>	定义音频内容
<img>	定义图像
<video>	定义视频，比如电影片段或其他视频流

示例代码：

audio标签的使用：

<audio controls>
  <source src="horse.ogg" >
  <source src="horse.mp3" >
  您的浏览器不支持 audio 元素。
</audio>

img标签的使用：

<img src="smiley-2.gif" loading="lazy" alt="Smiley face" width="42" height="42">

注：指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

video标签的使用：

<video width="320" height="240" controls>
  <source src="movie.mp4"  type="video/mp4">
  <source src="movie.ogg"  type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

1.3 重要标签

标签	全称	描述
<!–…-->		定义注释
<a>	anchor	定义超文本链接
<br>	break	定义换行
<button>		定义一个点击按钮
<div>	division	定义文档中的节
<h1> to <h6>	header 1 to header 6	定义 HTML 标题
<hr>	horizontal rule	定义水平线
<iframe>	inline frame	定义内联框架
<link>		定义文档与外部资源的关系
<main>		定义文档的主体部分
<p>	paragraph	定义段落
<span>		定义文档中的节

示例代码：

anchor标签的使用：

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

运行结果：

target="_blank"：在新窗口打开文档。

rel=“noopener noreferrer”：不会打开其他的网站，因为恶意病毒可能会修改你的浏览器空白页地址。

<a id="tips">有用的提示部分</a>

<a href="#tips">访问有用的提示部分</a>

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

注意：
请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“https://www.runoob.com/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“https://www.runoob.com/html/”。

button标签的使用：

<button type="button" onclick="alert('你好，世界!')">点我!</button>

运行结果：

div标签的使用：

<p>这是一些文本。</p>
<div>
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>
<p>这是一些文本。</p>

运行结果：

iframe标签的使用：

<iframe src="//www.runoob.com">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

运行结果：
在这里插入图片描述

link标签的使用：

<link rel="stylesheet" type="text/css" href="styles.css">

运行结果：

main标签的使用：

<main>
  <h1>Web 浏览器</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>

  <article>
    <h1>Google Chrome 浏览器</h1>
    <p>Google Chrome 浏览器是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
  </article>
</main>

运行结果：
在这里插入图片描述
span标签的使用：

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

运行结果：

1.4 次要标签

标签	全称	描述
<blockquote>		定义长的引用
<code>		定义计算机代码文本
<q>	quotation	定义短的引用
<canvas>		定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<cite>	citation	定义引用
<del>	deleted	定义被删除文本
<ins>	inserted	定义下划线文本
<strong>		定义强调文本
<em>	emphasized	定义强调文本

blockquote标签的使用：

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

运行结果：

code、strong、em标签的使用：

<em>强调文本</em><br>
<strong>加粗文本</strong><br>
一段电脑代码 <code>print("Hello World")</code><br>
<var>变量</var>

运行结果：

quotation标签的使用：

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

运行结果：

canvas标签的使用：

<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

运行结果：

del、ins标签的使用：

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

运行结果：

2 表格

2.1 表格标签

列表标签	全称	描述
<table>		定义表格
<th>	table header cell	定义表格的表头
<tr>	table row	定义表格的行
<td>	table data cell	定义表格单元
<caption>		定义表格标题

2.2 表格实例

<table border="1" cellspacing="0">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

运行结果：

3 列表

3.1 列表标签

列表标签	全称	描述
<ol>	ordered lists	定义有序列表
<ul>	unordered lists	定义无序列表
<li>	list item	定义列表项
<dl>	definition lists	定义列表
<dt>	definition term	自定义列表项目
<dd>	definition description	定义自定列表项的描述

3.2 列表实例

3.2.1 有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

运行结果：

3.2.2 无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

运行结果：

3.2.3 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

运行结果：

4 表单

4.1 表单标签

表单标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<select>	定义了下拉选项列表
<option>	定义下拉列表中的选项

表单标签	描述
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<label>	定义了 <input> 元素的标签，一般为输入标题
<textarea>	定义文本域（一个多行的输入控件）
<datalist>	指定一个预先定义的输入控件选项列表

4.2 文本（text）、密码（password）

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

运行结果：

4.3 单选按钮（radio）

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

运行结果：

4.4 复选框（checkbox）

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

运行结果：

4.5 提交按钮（submit）

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

运行结果：

假如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。

4.6 下拉列表

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

运行结果：

4.7 fieldset、legend

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

运行结果：

4.8 label

<form action="demo_form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

运行结果：

4.9 textarea

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

运行结果：

4.10 datalist

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

运行结果：

5 布局

布局标签	描述
<header>	页面/区域头部
<footer>	页面/区域底部
<nav>	导航
<section>	文档中的章节，区段，板块等（类似div，但主要针对文档区域）
<aside>	侧边栏
<article>	文章/文档

使用 <div> 元素的网页布局：

<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

</div>
 
</body>

运行结果：

6 其他

HTML 空元素
1. 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素（<br> 标签定义换行）
2. 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障
HTML 属性
1. 属性总是以名称/值对的形式出现，比如：name=“value”。属性值应该始终被包括在引号内
2. class 属性可以多用 class=" " （引号里面可以填入多个class属性）
3. id 属性只能单独设置 id=" "（只能填写一个，多个无效）
无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
HTML字符实体

显示结果描述实体名称
空格  
< 小于号 <
> 大于号 >

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>

XHTML
XHTML 是更严格更纯净的 HTML 版本

XHTML DOCTYPE 是强制性的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html> 中的 XML namespace 属性是强制性的
```
<html xmlns="http://www.w3.org/1999/xhtml">
```

XHTML 元素必须始终关闭

正确示例：

分行:<br />
水平线: <hr />
图片: <img src="happy.gif" alt="Happy face" />

XHTML 属性最小化是禁止的

正确示例：

<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML 基础

文章目录

1 HTML 标签参考手册——基础

1.1 模板中的标签

1.2 多媒体标签

1.3 重要标签

1.4 次要标签

2 表格

2.1 表格标签

2.2 表格实例

3 列表

3.1 列表标签

3.2 列表实例

3.2.1 有序列表

3.2.2 无序列表

3.2.3 自定义列表

4 表单

4.1 表单标签

4.2 文本（text）、密码（password）

4.3 单选按钮（radio）

4.4 复选框（checkbox）

4.5 提交按钮（submit）

4.6 下拉列表

4.7 fieldset、legend

4.8 label

4.9 textarea

4.10 datalist

5 布局

6 其他