前端学习之html（一）

时间 2020-02-17 标签前端学习 html

前端学习之html

html的基本结构

html的基本标签

我的原创博客欢迎转载，能够不保留出处。

学习前端，首先要学习html。会用经常使用的标签，知道全部的标签。而后学习css，以后在学习JavaScript。
这些学完以后，就能够学习框架了。（jquery、vue等）

首先：咱们从html标签学起css

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的标签，我先写经常使用的标签，须要熟记。最后写不经常使用的标签你们须要知道，了解。
首先你们须要知道html的标签
双标签（一对一对的）:<标签名> 内容 </标签名>
单标签（单个出现）:<标签名 />前端

<hr/> <!-- 水平线标签-->
<br/>
<br/>
换<br/>行 <!-- 换行标签-->
<!-- 这个就是注释标签，但愿你们有一个写注释的好习惯。 -->

如下实现

ctrl+? 注释快捷键vue

1.h标签

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

如下为实现效果
jquery

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

P标签就是分段"逻辑含义相同的放在一块儿"用一句话来讲"把意思相同的话捆绑在一块儿"，先后断行，并且还要再隔一行，至关于断两行。web

<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://（想要跳转的页面）”。svg

<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>

前端学习之html（一）