简介

html最简单的表示

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>    声明为HTML5文档
<html>     把文件包起来
<head>     头部元素开始
<meta charset="utf-8">
<title>1234567    
</head>     头部文件结束
<body>   可见内容开始
<h1>第一个标题</h2>
<p>第一个段落<p>
</body>     内容结束
</html>     结束

基础

1.

1
2
3
<h1>最大的标题</h1>
<h2>第二大的标题</h2>
以此类推最多h6

2.

1
2
3
4
5
输入链接则需要<a>来实现例如：
<a href="www.baidu.com">这是一个链接</a>
图像使用<img>
<img sre="图像" width="100" height="100">
例如：
1
2
3
HTML元素以开始标签起始
        以结束标签终止
        同时其可以设置属性

3.

1
2
3
4
5
html注释：<!-- 这是一个注释 -->
html段落：<p>这是一个段落</p>
换行使用<br>
水平线使用<hr>
例如：

4.

1
2
3
4
5
6
同时html有着斜体与加粗
<b>此为粗体</b>
<i>此为斜体</i>
<sub>下标</sub>
<sup>上标</sup>
开始展示效果

5.各种标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
HTML 文本格式化标签
标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML "计算机输出" 标签
标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML 引文, 引用, 及标签定义
标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。

详细链接

1
2
<a href="url">链接文本</a>
href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
1
2
3
文本链接：最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：

<a href="https://www.example.com">访问示例网站</a>
1
2
3
4
5
图像链接：您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>
1
2
3
4
5
锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>
1
2
3
下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：

<a href="document.pdf" download>下载文档</a>
1
使用 target 属性，你可以定义被链接的文档在何处显示。

id属性

1
2
3
4
5
在HTML文档中插入ID:
<a id="tips">提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>

head

1
2
3
4
HTML <head> 元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

1.title

1
<title>文档标题<title>

2.base

1
2
3
4
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="www.baidu.com" target="_blank">
</head>
1
2
3
4
5
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

4.style

1
2
3
4
5
6
7
8
9
10
11
12
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

5.meta

1
2
3
4
5
6
7
8
9
meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域
1
2
3
4
5
6
7
8
9
10
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:
<meta name="description" content="">

定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

6.script

1
<script>标签用于加载脚本文件，如： JavaScript。

CSS!

1
2
3
4
5
6
7
8
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
1
2
3
4
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>