小白前端学习日记（四）HTML基础语法与标签3
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了小白前端学习日记（四）HTML基础语法与标签3，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7441字，纯文字阅读大概需要11分钟。
内容图文
小白前端学习日记系列
HTML基础语法与标签
前言
今天我们来一起学习HTML的知识吧！
提示：以下是本篇文章正文内容，下面案例可供参考
一、区块标签
我们在之前的内容中有学过<div></div>标签，曾经，这个标签是文档区块分割的唯一手段，我们需要手动给div标签添加不同的class属性来区分它们的功能。但是，HTML5推出了许多新的标签，为前端开发带来了更多的便利。
| 区块标签 | 含义 |
|---|---|
<section></section> | 定义了文档的区域，语义大于div标签 |
<article></article> | 定义了文档的核心内容，搜索引擎会主要抓取该标签中的内容 |
<aside></aside> | 定义了文档的非主要内容，比如推广广告 |
<nav></nav> | 定义了文档的导航链接的部分，并不是所有的 HTML 文档都要使用到该元素 |
<header></header> | 定义了文档或者文档的一部分区域的页眉。，作为介绍内容或者导航链接栏的容器 |
<main></main> | 定义了文档的主体内容，内容在文档中是唯一的 |
<footer></footer> | 定义了文档的页脚，会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等 |
看到这么多的区块标签，我们不用害怕，可以从它们的名称中推断出它们的语义功能。可以理解成自带语义和负责功能的高级div标签
二、语义化标签
文本中也是存在区块标签的——<span></span>，它本身没有什么特别的效果，通常用于与CSS结合来丰富样式。虽然称其为区块标签，但span是行级元素。
有关行级元素和块级元素的内容，将在之后的文章里详细解释。
来看一看其他的标签吧。
<b>加粗文本</b><br>
<u>下划线文本</u><br>
<i>倾斜文本</i><br>
<mark>标记文本</mark><br>
<em>强调文本</em><br>
<strong>重要文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码 print("Hello World")</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>
实际效果如图所示。
其中<br>标签表示在此处换行。
前三个标签的功能现已被CSS取代了，但也不是不能用， 其余标签都带有语义，根据具体情况使用。
三、表单标签
<form></form> 标签用于创建供用户输入的 HTML 表单。
form标签具有许多属性，但有些属性在现阶段几乎接触不到，在此只给出常用的属性，其余的属性等碰到了再去认识也不迟。
action属性：指定了表单要提交到的后台程序的网址
name属性： 规定表单的名称，JavaScript可以引用表单的名称来提交指定的表单
表单控件
1.单行文本框
<!-- 使用type属性值被设置为text的<input>元素可以创建单行文本框，它是一个单标签 -->
<p>
1.文本框：<input type="text">
</p>
<!-- value属性可以预先为文本框填写值 -->
<p>
2.文本框：<input type="text" value="规定值">
</p>
<!-- placeholder属性中定义了用户在什么都没输入时出现在提示框中的灰色文本，它并非文本的值 -->
<p>
3.文本框：<input type="text" placeholder="提示文本">
</p>
<!-- disabled属性禁止用户与该文本框交互 -->
<p>
4.禁止交互文本框：<input type="text" disabled>
</p>
<!-- 给这个禁止交互的文本框加个“禁止交互”的内容吧 -->
<p>
5.禁止交互文本框：<input type="text" value="禁止交互" disabled>
实际效果如图所示。
2.单选按钮
<!-- 使用type属性值被设置为radio的<input>元素可以创建单选按钮 -->
<!-- 互斥的单选按钮应该设置它们的name为相同值 -->
<!-- 单选按钮向服务器提交的就是value值 -->
<!-- checked属性，表示默认被选中 -->
<!-- label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮 -->
<label>
<input type="radio" name="choice" value="1" checked> 选项1
<input type="radio" name="choice" value="0"> 选项2
</label>
实际效果如图所示。
展示的效果不是很理想，这段代码大家可以复制到html的body标签中自己试一下，更改属性值，观察按钮按下的变化，从而对各种属性值有更深的体会。
3.复选框
<!-- 使用type属性值被设置为checkbox的<input>元素可以创建复选框 -->
<!-- 同组复选框应该设置它们的name为相同值 -->
<!-- 复选向服务器提交的就是value -->
<p>
复选框：
<label>
<input type="checkbox" name="hobby" value="1"> 选项1
</label>
<label>
<input type="checkbox" name="hobby" value="2"> 选项2
</label>
<label>
<input type="checkbox" name="hobby" value="3"> 选项3
</label>
<label>
<input type="checkbox" name="hobby" value="4"> 选项4
</label>
</p>
实际效果如图所示，我为了展示效果选择了选项1和选项3。
复选框和单选按钮很像，没有什么难点，不再多说。
4.其他常用控件
剩下的控件也都很简单，在这里只给出简单代码实例。
<!-- 设置提交地址为submit.php -->
<form action="submit.php" method="POST">
<p>密码框：
<input type="password">
</p>
<p>
下拉菜单：
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
<p>
多行文本框：
<textarea cols="100" rows="10"></textarea>
</p>
<p>
<button>按钮</button>
</p>
<p>
<input type="button" value="按钮">
</p>
<p>
<input type="submit" value="提交表单">
</p>
<p>
<input type="reset" value="重置表单">
</p>
</form>
重置按钮会将所在form标签中所有控件重置为初始值。
提交按钮会将表单提交到action属性指向的网址。
多行文本框的rows和cols属性，用于定义多行文本框的行数和列数。
我们来总结一下目前学过的input标签的type属性吧。
| type属性值 | 代表控件 |
|---|---|
| text | 单行文本框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| password | 密码框 |
| button | 普通按钮 |
| reset | 重置按钮 |
| submit | 提交按钮 |
5.HTML5新增控件
刚才我们复习完input的type，是不是觉得有点多？不要在这里就被吓倒了，HTML5增加了许多新的type属性，属性值数量超级加倍！
但是不用怕，用起来的难度也就那么回事儿，在这放上使用展示：
<form action="submit.php" method="POST">
<p>颜色选择：
<input type="color">
</p>
<p>日期选择：
<input type="date">
</p>
<p>时间选择：
<input type="time">
</p>
<p>文件选择：
<input type="file">
</p>
<p>电子邮箱输入：
<input type="email">
</p>
<p>数字输入：
<input type="number">
</p>
<p>网址输入：
<input type="url">
</p>
<p>搜索框：
<input type="search">
</p>
<p>拖拽条：
<input type="range">
</p>
</form>
实际效果如图所示。单走一个六
四、表格标签
终于，我们来到了HTML基础中最后的部分了，先写个demo出来看看：
<table border="1">
<caption>表格标题</caption>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
</table>
实际效果如图所示。
三个新标签，看起来似乎与列表标签有那么点相似，我们挨个来说明他们的用法。
table标签创建了一个表格；
tr标签是table row的缩写，代表了表格的行，是table标签子元素；
td标签是table data的缩写，代表了表格数据，是tr标签子元素。
th标签代表着标题格，用法和td标签差不多。
非常简单，所以我们继续来学习表格项合并的方法，这涉及了两个属性：
- colspan属性用来设置td或者th的列跨度
- rowspan属性用来设置td或者th的行跨度
在刚才的表格基础上，为这两个属性设值，来直观的学习一下。
我们先测试一下colspan属性：
<table border="1">
<caption>表格标题</caption>
<tr>
<th>A</th>
<th colspan="3">B</th>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td colspan="2">G</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
</table>
实际效果如图所示。
可以看到"C""D"格的位置被"B"格占据了，“H"格则被"G"占了位。这里需要注意，我们是手动删除了"C”“D”"H"这三个td标签来达到“合并的效果”，如果我们不删除那三个td标签的话呢？
没错，很丑 不符合“合并”的设计。所以在合并表格项的时候，要注意把被占位的项删去。
rowspan属性也是一个道理：
<table border="1">
<caption>表格标题</caption>
<tr>
<th>A</th>
<th rowspan="3">B</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>E</td>
<td rowspan="2">G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>L</td>
</tr>
</table>
实际效果如图所示。
同样手动删除了被占位的项。
当然，同时设置colspan属性和rowspan属性也是可以的：
<table border="1">
<caption>表格标题</caption>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>E</td>
<td colspan="3" rowspan="2">F</td>
</tr>
<tr>
<td>I</td>
</tr>
</table>
要记着删除被占位的项。
相信在尝试中大家已经看出来了，我们合并列表项的操作，本质上是调节左上格的“高”和“宽”。
总结
看完这次的文章后，我们可以说自己有了HTML的基础了。但是，要想要在前端开发中活用自己的知识，我们还需要不断的练习。HTML里许多技巧，要等学了CSS和JS之后，才能展现出来。
下一次，会开始CSS部分的学习笔记分享，在CSS的学习中，也会对HTML内容的知识进行补足。
内容总结
以上是互联网集市为您收集整理的小白前端学习日记（四）HTML基础语法与标签3全部内容，希望文章能够帮你解决小白前端学习日记（四）HTML基础语法与标签3所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。