web前端学习总结：HTML

时间 2020-12-29 标签 HTML 标签举例说明

近期学习了HTML，老样子，HelloWorld！

代码如下所示：在body标签中输入HelloWorld！，就会展示在浏览器上。

<!DOCTYPE html>
<html>
	<head>
		<title>HelloWorld</title>
	</head>
	<body>
		HelloWorld!
	</body>
</html>

在<html>标签中，大致可分为<head> 和 <body>标签，顾名思义，其分别为html的头和身体，下边将详细介绍：

html元数据标签（头标签）：描述HTML文件中的元数据，即对数据进行说明的数据！
       
       <meta charset="utf-8" />
       
       <meta name="keywords" content="" />
       
       <meta name="description" content="" />
       
       <meta name="author" content="" />

<!DOCTYPE html>
<html>
	<head>
		<!-- 字体编码 -->
		<meta charset="utf-8" />
		<!-- 标题 -->
		<title>HelloWorld</title>
		<!-- 关键字 -->
		<meta name="keywords" content="HelloWorld" />
		<!-- 说明 -->
		<meta name="description" content="第一次编写HTML" />
		<!-- 作者 -->
		<meta name="author" content="yc" />
	</head>
	<body>
		HelloWorld!
	</body>
</html>

语义性标签：用来划分html的基本布局。
       <header></header>：标签定义文档或者文档的一部分区域的页眉，应该作为介绍内容或者导航链接栏的容器。
       <nav></nav>：标签定义导航链接的部分。
       <section></section>：标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
       <footer></footer> ：标签定义文档或者文档的一部分区域的页脚，应该包含它所包含的元素的信息。

基础标签
<p></p>：标签定义段落, 会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

<h1>到<h6>:标签被用来定义 HTML 标题, <h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。

       <ul>:标签定义无序列表。
           <li></li>：标签定义列表项目。
       </ul>

       <ol>：标签定义了一个有序列表. 列表排序以数字来显示。
           <li></li>
       </ol>

<img>：标签定义 HTML 页面中的图像。

       <a></a>：标签定义超链接，用于从一个页面链接到另一个页面。
       <br>：标签插入一个简单的换行符。
       <span>：用于对文档中的行内元素进行组合。
       <audio/>：标签定义声音，比如音乐或其他音频流。
       <video/>：标签定义视频，比如电影片段或其他视频流。

        <label></label>：标签为 input 元素定义标注（标记）。
        <table>:标签定义 HTML 表格
        <caption>:标签定义表格的标题。
        <tr>:标签定义 HTML 表格中的行。
        <th>:标签定义 HTML 表格中的表头单元格。
        <td>：标签定义 HTML 表格中的标准单元格。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<!-- 字体编码 -->
		<meta charset="utf-8" />
		<!-- 标题 -->
		<title>HelloWorld</title>
		<!-- 关键字 -->
		<meta name="keywords" content="HelloWorld" />
		<!-- 说明 -->
		<meta name="description" content="第一次编写HTML" />
		<!-- 作者 -->
		<meta name="author" content="yc" />
	</head>

	<header></header>
	<section>
		<a id="head" href="#tail">回到尾部</a>
		<p>这是第一段</p>
		<p>这是第二段</p>
		<h1>这是标题1</h1>
		<h2>这是标题2</h2>
		<h3>这是标题3</h3>
		<h4>这是标题4</h4>
		<h5>这是标题5</h5>
		<h6>这是标题6</h6>
		<ul type="none">
			<li>北京</li>
			<li>上海</li>
			<li>深圳</li>
		</ul>
		<ol type="a">
			<li>北京</li>
			<li>上海</li>
			<li>深圳</li>
		</ol>
		<table cellpadding="4px" align="center">
			<caption>这是一个表格</caption>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>学校</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>20</td>
				<td>清华大学</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>20</td>
				<td>北京大学</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>20</td>
				<td>宾夕法尼亚大学</td>
			</tr>
			<tr>
				<td colspan="3">总结</td>
			</tr>
		</table>
		<img src="./resouse/pic/timg.jpg" width="400px">
		<video src="./resouse/video/101.mp4" controls="controls" width="300px"></video>
		<audio src="./resouse/audio/101.mp3" controls="controls">
		</audio>
		<a id="tail" href="#head">回到顶部</a>
	</section>
	<footer></footer>
</html>