前端学习之html（一）

最新推荐文章于 2021-04-02 10:02:29 发布

couldancer

最新推荐文章于 2021-04-02 10:02:29 发布

阅读量164

点赞数

分类专栏： HTML 标签前端基础从0学习

本文链接：https://blog.csdn.net/weixin_42437364/article/details/88353233

版权

HTML 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

从0学习

2 篇文章 0 订阅

订阅专栏

标签

1 篇文章 0 订阅

订阅专栏

前端学习之html

html的基本结构
- html的基本标签
- - 个人原创博客欢迎转载，可以不保留出处。

学习前端，首先要学习html。会用常用的标签，知道所有的标签。然后学习css，之后在学习JavaScript。
这些学完之后，就可以学习框架了。（jquery、vue等）

首先：我们从html标签学起

html的基本结构

<!DOCTYPE html>
<!--<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按
指定的文档类型进行解析。-->
<html lang="en">
<!--作用所有HTML中标签的一个根节点。 最大的标签   根标签-->
<head>
<!--文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及
和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。-->
    <meta charset="UTF-8">
    <!--utf-8是目前最常用的字符集编码方式，统一使用UTF-8 字符集, 避免出现字符集不统
    一而引起乱码的情况-->
    <title>html学习</title>
    <!--标题-->
</head>
<body><!--文档的主体-->

</body>
</html>

我们看到的网页整体的一个结构就是这样构成的。

html的基本标签

接下来我们看一下html的标签，我先写常用的标签，需要熟记。最后写不常用的标签大家需要知道，了解。
首先大家需要知道html的标签
双标签（一对一对的）:<标签名> 内容 </标签名>
单标签（单个出现）:<标签名 />

<hr/> <!-- 水平线标签-->
<br/>
<br/>
换<br/>行 <!-- 换行标签-->
<!-- 这个就是注释标签，希望大家有一个写注释的好习惯。 -->

以下实现
在这里插入图片描述
ctrl+? 注释快捷键

1.h标签

<h1>这个标签一般为logo使用,h1-h6逐一减小</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>

以下为实现效果
在这里插入图片描述

2.p段落标签和span行内联标签

P标签就是分段"逻辑含义相同的放在一起"用一句话来说"把意思相同的话捆绑在一起"，前后断行，而且还要再隔一行，相当于断两行。

<p>第一段</p><p>第二段</p><p>第三段</p>

以下实现
在这里插入图片描述
span标签是在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性。span是内联的，用在一小块的内联HTML中，前后不断行。

<p>这是一句话，<span>我要把它</span>说完整</p>

以下实现
在这里插入图片描述
span标签把“我要把它"单独分割出来了，但又没有断行。

3.div表签

<div>第一个盒子</div>
<div>第二个盒子</div>
<div>第三个盒子</div>
<div>第四个盒子</div>

把网页分出来一个div这么一个区域，每个区域来写一个结构，我们可以把它理解为一个盒子。
我们可以点看F12来看一下，
把这个网页分成了4个区域。
在这里插入图片描述

4.a链接标签

如果是外部链接，则需要添加“http://（想要跳转的页面）”。

<a href="http://www.baidu.com">跳转baidu</a>

内部链接直接链接内部页面名称即可比如 < a href=“index.html”。

<a href="index.html">跳转到自己写的网页上</a>

href="#" 表示该链接暂时为一个空链接。

<a href="#">空链接</a>

此外a标签不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

<a href="#two">
<!--点击a标签 会跳到id为two的标签上-->
<h3 id="two">跳转到的标签</h3>

如果大家对这个"#"号有疑问的话我找到了一篇文章：URL中“#” “？” &“”号的作用可以看一下。

5.img图片标签

它也是一个单标签

<img src="0.jpg"/>
<!--把图片文件放在你的html文件同级目录上，也可以找到图片的路径，写在 src="路径/0.jpg"-->

这样就可以看到我们的图片了
在这里插入图片描述

6. 表格table标签和列表ul标签

table表格里面有tr标签，th标签和td标签
caption标签是表格标题
tr标签是定义有几个tr标签就有几行
th标签是定义表头
td就是单元格，你想展示的数据写在里面

<table>
   <caption>NBA</caption>
		<tr>
			<th>球员</th>
			<th>身高</th>
			<th>效力</th>
		</tr>
		<tr>
			<td>哈登</td>
			<td>1.96米</td>
			<td>火箭</td>
		</tr>
        <tr>
			<td>维斯布鲁克</td>
			<td>1.91米</td>
			<td>雷霆</td>
		</tr>
		<tr>
			<td>杜兰特</td>
			<td>2.11m</td>
			<td>勇士</td>
		</tr>
 
	</table>

以下实现
在这里插入图片描述
列表有一种无序是ul，有一种是有序ol，工作中一般很少用到ol，所以在这里就说这个ul标签。
当然 ul和ol没有很大区别

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

以下实现
在这里插入图片描述
提示：

ul中只能嵌套li，直接在ul标签中输入其他标签或者文字不允许。
li就不一样了，它相当于一个容器，可以容纳所有元素。

7. form表单标签

form标签是来定义表单区域，就是给用户的信息收集，并传递到后端。

后面的文章我会单独写一个实例，
其中包含了表单中经常用到的一些标签。

<form action="url地址" method="提交方式" name="表单名称">
  action中是填写把数据提交到后端url地址。
  method中有get和post两种提交方式。
  get是以明文方式（显示在url上）传递，post是以密文方式传递。
  name就是给这个表单起名字，以防重复。
  注意的是：每个表单都要有自己表单域。
</form>