文章目录
HTML实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个HTML</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
<!DOCTYPE html>声明为 HTML5 文档<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。<title>元素描述了文档的标题<body>元素包含了可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落
HTML 常用元素
<p>这是第一个段落。</p>建立一个段落<a href="http://www.baidu.com">这是一个链接</a>建立一个超链接<h1>这是一个标题。</h1>标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。<hr>标签在 HTML 页面中创建水平线。<!-- 这是一个注释 -->HTML中的注释<br>换行<pre>定义预格式文本，也是段落的一种，但可以直接在此标签内进行空格和换行。 空格<hr/>水平线
HTML文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 加粗字体 实例 |
| <em> | 定义着重文字 实例 |
| <i> | 斜体字 实例 |
| <small> | 定义小号字 实例 |
| <strong> | 定义加重语气 实例 |
| <sub> | 定义下标字 实例 |
| <sup> | 定义上标字 实例 |
| <ins> | 定义插入字 实例 |
| <del> | 删除线 |
HTML “计算机输出” 标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
HTML链接
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<a href="https://www.baidu.com/">这是一个链接</a>
<br>
<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">这是通过新建页面打开链接</a>
</body>
</html>
其中 target="_blank" 是新建页面的语法，后面的rel可加可不加（安全起见还是加上比较好）
HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<a id="tips">有用的提示部分</a>
</body>
</html>
HTML头部（head）
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
title 元素
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
base 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
link 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
style 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {background-color:pink;}
a {color:white;}
p {color:blue}
</style>
<title>test</title>
</head>
<body>
<a href="https://www.baidu.com/">这是一个链接</a>
<p>这是一个段落</p>
</body>
</html>
其中body {background-color:pink;}表示背景为粉色， a {color:white;}表示超链接为白色，p {color:blue}表示段落为蓝色。
meta 元素
meta标签描述了一些基本的元数据。 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域。
为搜索引擎定义关键字：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="Web & 编程 教程">
定义网页作者:
<meta name="author" content="zzj">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
script 元素
<script>标签用于加载脚本文件，如： JavaScript。
之后会详细描述此元素。
HTML 样式- CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
(有点多，先咕一下下qaq）
HTML图像
在 HTML 中，图像由<img> 标签定义。
<img src="url" alt="some_text">
其中，url指存储图像的位置。alt属性能在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
设置图像的高度与宽度
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:
<img src="https://z3.ax1x.com/2021/10/19/5w8EW9.png" alt="qaq" width="300" height="300">
More on image manipulation
- 浮动图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {background-color:pink;}
a {color:white;}
p {color:blue}
</style>
<title>test</title>
</head>
<body>
<a href="https://www.baidu.com/">这是一个链接</a>
<hr/>
<p>这是一个段落<img src="https://z3.ax1x.com/2021/10/19/5w8EW9.png" alt="qaq" style="float:right" width="300" height="300"></p>
</body>
</html>
通过style="float:right"使图片漂浮在文本的右边，若想让图片漂浮在文本左边，可以使用语句style="float:left"
- 设置图像链接：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zzj</title>
</head>
<body>
<p>创建图片链接:
<a href="http://www.baidu.com">
<img border="10" src="https://z3.ax1x.com/2021/10/19/5w8EW9.png" alt="qaq" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="http://www.baidu.com">
<img border="0" src="https://z3.ax1x.com/2021/10/19/5w8EW9.png" alt="qaq" width="32" height="32"></a></p>
</body>
</html>
HTML表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zzj</title>
</head>
<body>
<p>
每个表格从一个 table 标签开始。
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
其中border为表格边缘的宽度。
</p>
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
HTML列表
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
显示如下：
- Coffee
- Milk
有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
显示如下：
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
Ps：不同类型的有序列表：
<h4>编号列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>大写字母列表：</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>罗马数字列表：</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写罗马数字列表：</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
显示如下：
-
Coffee
- - black hot drink Milk
- - white cold drink
嵌套列表
<h4>嵌套列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
显示如下：
- Coffee
- Tea
- Black tea
- Green tea
- Milk
1331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
