HTML

标记语言，实现图片、音频、视频、超链接等

一、声明html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoet" content="width=device-width,initial-scale=1.0">
    <!-- 网页标题 -->
    <title>这是网页</title>
	</head>
<!-- 身体，主要写标签内容 -->
<body>
    <!-- html双标签包含文档所有内容 -->
    </body>
    
</html>

二、标签

单标签

1.图像标签

1
<img src="" alt="">

src:图片路径位置(必选)

alt:图片加载失败时文字提示说明(必选)

2.换行标签

1
<p>sjklandfo<br>djksbhnfijkl</p>

sjklandfo
djksbhnfijkl

3.输入标签

1
<input type="">

4.关键字标签

定义和用法

\ 标签定义关于 HTML 文档的元数据。元数据是关于数据的数据（信息）。

\ 标签始终位于 \ 元素 内，通常用于指定字符集、页面描述、关键词、文档作者和视口设置：

元数据不会显示在页面上，但可以被机器解析。

浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）和其他网络服务会用到元数据。

提示：meta 元素有多种不同用法，而且一个 HTML 文档中可以多个 meta 元素。

提示：通过 <meta> 标签，有一种方法让网页设计师控制视口（即用户在网页中可见的区域）（请参见下面的”设置视口”实例）。

注意：每个 meta 元素只能用于一种用途。如果想要使用的特性不止一个，那就应该在 head 元素中添加多个 meta 元素。

1
<meta name='description' content='abcd'/>

5.资源标签

1
<link rel="stylesheet" href="styles.css">

双标签

1
2
<标签>
</标签>

1.标题标签

h1~h6

1
2
3
4
5
6
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

一级标签

二级标签

三级标签

四级标签

五级标签

六级标签

2.段落标签

1
<p>段落标签</p>

段落标签

3.超连接

1
<a href="" target="">跳转网站</a>

href是指当前a跳转的网站(必选)

target有两个属性(可选):

​ _blank:新开窗口
​ _self:当前窗口(默认)

4.音频视频标签

1
<audio src="" controls></audio>
1
<video src="" controls></video>

src:图片路径位置(必选)

controls:控件(必选)

5.表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1" cellspacing="0">
    <tr>
        <td>Header 1</td>
        <td>Header 2</td>
    </tr>
   <tr>
        <td>row 1,cell 1</td>
        <td>row 1,cell 2</td>
    </tr>
    <tr>
        <td>row 2,cell 1</td>
        <td>row 2,cell 2</td>
    </tr>
</table>
Header 1 Header 2
row 1,cell 1 row 1,cell 2
row 2,cell 1 row 2,cell 2

border:有1的实线

cellspacing:空格

tr:行

td:列

快捷写法:

1
<table>tr*4>td*3//四行三列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1" cellspacing="0">
    <tr>
        <td>Header 1</td>
        <td>Header 2</td>
    </tr>
   <tr>
        <td rowspan="2">row 1 and 2,cell 1</td>
        <td>row 1,cell 2</td>
    </tr>
    <tr>
        <!-- <td>row 2,cell 1</td>-->
        <td>row 2,cell 2</td>
    </tr>
</table>
Header 1 Header 2
row 1 and 2,cell 1 row 1,cell 2
row 2,cell 2

rowspan:跨列

colspan:跨行

6.文本格式化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<b>粗体文本</b>
<em>强调文本</em>
<i>斜体文本</i>
<small>更小的文本</small>
<del> (删除线)</del>
<ins> (插入的文本)</ins>
<sub> (下标文本)</sub>
<sup> (上标文字)</sup>
<font size="3px" color="blue">文本大小及颜色</font>
<pre>代码格式</pre>
<b>粗体文本</b>
<em>强调文本</em>
<i>斜体文本</i>
<small>更小的文本</small>
<del> (删除线)</del>
<ins> (插入的文本)</ins>
<sub> (下标文本)</sub>
<sup> (上标文字)</sup>

<font size="3px" color="blue">文本大小及颜色</font>

<pre>print("hello world")<pre>

7.列表代码

(1)无序列表
1
2
3
4
<ul>
    <li></li>
    <li></li>
</ul>
(2)有序列表
1
2
3
4
<ol>
    <li></li>
    <li></li>
</ol>

8.表单列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form action="" method="">
    <!--input:输入框 有不同作用 type类型不同-->
    <!--文本输入框-->
	昵称：<input type="text" name="username">
    密码：<input type="int" name="pwd">
    <!--单选框-->
    性别：<input type="radio" name="sex" value="man">男<input type="radio" name="sex" value="womon">女
     <!--多选框-->
    爱好：<input type="checkbox" name="hobby" value="chang">唱<input type="checkbox"name="hobby" value="tiao">跳<input type="checkbox"name="hobby" value="rap">rap
    <!--下拉框-->
    地址：<select name="" id="">
    <option value="beijing">北京</option>
	 <option value="sichuan">四川</option>
     <option value="hangzhou">杭州</option>
    </select>
    <!--多选框-->
    个人简介：<textarea name="" id="" col="" row="">
    </textarea>
    <!--提交按钮与重置按钮-->
    <input type="submit">
    <input type="reset">
</form>
昵称：
密码：
性别：男女
爱好：唱跳rap
地址：
个人简介：

三、特殊字符

HTML 原代码显示结果描述
&lt;<小于号或显示标记
&gt;>大于号或显示标记
&amp;&可用于显示其它特殊字符
&quot;“引号
&reg;®已注册
&copy;©版权
&trade;™商标
&ensp; 半个空白位
&emsp; 一个空白位
&nbsp;不断行的空白
HTML 原代码显示结果描述
&lt;<小于号或显示标记
&gt;>大于号或显示标记
&amp;&可用于显示其它特殊字符
&quot;“引号
&reg;®已注册
&copy;©版权
&trade;™商标
&ensp; 半个空白位
&emsp; 一个空白位
&nbsp;不断行的空白
´&acute;©&copy;>&gt;µ&micro;®&reg;
&&amp;°&deg;¡&iexcl;&nbsp;»&raquo;
¦&brvbar;÷&divide;¿&iquest;¬&not;§&sect;
•&bull;½&frac12;«&laquo;&para;¨&uml;
¸&cedil;¼&frac14;<&lt;±&plusmn;×&times;
¢&cent;¾&frac34;¯&macr;“&quot;™&trade;
€&euro;£&pound;¥&yen;
„&bdquo;…&hellip;·&middot;›&rsaquo;ª&ordf;
ˆ&circ;“&ldquo;—&mdash;’&rsquo;º&ordm;
†&dagger;‹&lsaquo;–&ndash;‚&sbquo;”&rdquo;
‡&Dagger;‘&lsquo;‰&permil;­&shy;˜&tilde;
≈&asymp;⁄&frasl;←&larr;∂&part;♠&spades;
∩&cap;≥&ge;≤&le;″&Prime;∑&sum;
♣&clubs;↔&harr;◊&loz;′&prime;↑&uarr;
↓&darr;♥&hearts;−&minus;∏&prod;‍&zwj;
♦&diams;∞&infin;≠&ne;√&radic;‌&zwnj;
≡&equiv;∫&int;‾&oline;→&rarr;
α&alpha;η&eta;μ&mu;π&pi;θ&theta;
β&beta;γ&gamma;ν&nu;ψ&psi;υ&upsilon;
χ&chi;ι&iota;ω&omega;ρ&rho;ξ&xi;
δ&delta;κ&kappa;ο&omicron;σ&sigma;ζ&zeta;
ε&epsilon;λ&lambda;φ&phi;τ&tau;
Α&Alpha;Η&Eta;Μ&Mu;Π&Pi;Θ&Theta;
Β&Beta;Γ&Gamma;Ν&Nu;Ψ&Psi;Υ&Upsilon;
Χ&Chi;Ι&Iota;Ω&Omega;Ρ&Rho;Ξ&Xi;
Δ&Delta;Κ&Kappa;Ο&Omicron;Σ&Sigma;Ζ&Zeta;
Ε&Epsilon;Λ&Lambda;Φ&Phi;Τ&Tau;ς&sigmaf;

四、语义标签

1
2
3
4
<header>头部</header>
<nav>导航</nav>
<section>文章</section>
<footer>页脚</footer>

div与span

div和span的区别是：div标签是块级元素，每个div标签都会从新行开始显示，占据一行；div标签内可以添加其他的标签元素（行内元素、块级元素都行）。而，span标签是行内元素，会在一行显示；span标签内只能添加行内元素的标签或文本。

div标签的简单示例：设置这些div标签的容器的宽度为500px，高度为500px

<div class=”div1”>内容1，使用div，不设置宽度，不设置边距</div>
<div class=”div2”>内容2，使用div，不设置宽度，设置内边距padding: 20px</div>
<div class=”div3”>内容3，使用div，不设置宽度，设置外边距margin: 20px</div>
<div class=”div4”>内容4，使用div，设置宽度，设置外边距margin: 20px</div>
<div class=”div5”>内容5，使用div，设置宽度，设置内边距padding: 20px</div>
<div class=”div1”>内容6，使用div，不设置宽度，不设置边距</div>

效果图：

简单示例2：在div标签下添加其他html标签

<div>
<span>span标签</span><span>span标签</span><a href=”#”>a标签</a><a href=”#”>a标签</a>
<p>p标签</p>
<div>div标签</div>
</div>

效果图：

HTML span标签

span标签是行内元素，拥有行内元素的特点。span标签元素会和其他标签元素会在一行显示（块级元素除外），不会另起一行显示（如上例）。

span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。

而且，span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素。

span标签的简单示例：

设置span.span1容器的内边距padding: 20px，span.span1容器内的span标签的外边距margin: 20px;

<span>span标签</span><span>span标签</span><a href="#">a标签</a><a href="#">a标签</a>
<div>div标签</div>
<span class="span1">span标签内，添加<span>span标签</span><a href="#">a标签</a></span>

效果图：

五、注释

1
<!--这是一个注释-->