web前端学习总结: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>