小白前端学习日记系列
前言
今天我们来一起学习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内容的知识进行补足。