HTML基础知识（二） HTML常用标签

语义	标签	说明
加粗	<strong></strong>或<b></b>	更推荐使用<strong>标签语义更强烈
倾斜	<em></em>或<i></i>	更推荐使用<em>标签语义更强烈
删除线	<del></del>或<s></s>	更推荐使用<del>标签语义更强烈
下划线	<ins></ins>或<u></u>	更推荐使用<ins>标签语义更强烈

4.<div>和<span>标签
<div>和<span>是没有语义的，是一个用来装内容的盒子。
特点：
<div>标签用来布局，一行只能放一个<div>
<span>标签用来布局，一行上可以多个<span>

5.图像标签和路径

图像标签和路径

在HTML标签中，<img>标签用于定义HTML页面中的图像。

<img  src=”图像URL” />

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。属性是属于这个图像标签的特性。

标签中使用的图片需要和HTML文件放在同一个文件夹内，src属性写上图片名称即可在网页中正常显示。

属性	属性值	说明
src	图片路径	必须属性
alt	(替换)文本	替换文本。图像不能显示的文字
title	(提示)文本	提示文本，鼠标放在图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注：
图像标签可以拥有多个属性，必须写在标签名的后面
属性之间不分先后顺序，标签名与属性、属性与属性值之间均以空格分开
属性采取键值对的格式，即key= ”value”的格式，属性= “属性值”

路径

目录文件夹：即普通文件夹

相对路径

以引用文件所在位置为参考基础，而建立出的目录路径。即图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如<img src=”baidu.gif” />
下一级路径	/	图像文件位于HTML文件下一级如<img src=”images/baidu.gif” />
上一级路径	../	图像文件位于HTML文件上一级如<img src=”../baidu.gif” />

绝对路径

指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

6.超链接标签

链接的语法格式

<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像</a>

两属性的作用：

属性	作用
href	用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

链接分类

外部链接：

例如

<a href=”http://www.baidu.com”>百度</a>

内部链接：

网站内部页面之间的相互链接，直接链接内部页面名称即可，例如

<a href=”index.html”>首页</a>

空链接：

如果当时没有确定链接目标时，

<a href=”xxx.zip”></a>

网页元素链接：

在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

锚点链接：

点击链接可以快速定位到页面中的某个位置。

在链接文的href属性中，设置属性值为 #名字的形式，如
```
<a href=”#two”>第2集</a>
```
找到目标位置标签，里面添加一个id属性=刚才的名字，如
```
<h3 id=”two”>第2集介绍</h3>
```

7.HTML中的注释和特殊字符

注释

快捷键：ctrl+/

特殊字符

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
℃	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方	²
³	立方	³

8.表格标签

表格的基本语法

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
        ....
</table>

<table> </table>是用于定义表格的标签
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
字母td指表格数据（table data），即数据单元格的内容
表头单元格标签
<th>标签表示HTML表格的表头部分，一般表头单元格位于表格的第一行或第一列，表头单元格里的文本内容加粗居中显示。

表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式。
border	1或””	规定表格单元是否拥有边框，默认为””,表示没有边框。
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素。
width	像素值或百分比	规定表格的宽度

表格结构标签

<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。

<tbody></tbody>:用于定义表格的主体，主要用于放数据本体。

合并单元格

方式：

跨行合并：rowspan=”合并单元格的个数”
跨列合并：colspan=”合并单元格的个数”

目标单元格：(写合并代码)

跨行：最上册单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲：

先确定跨行还是跨列合并。
找到目标单元格，写上合并方式=合并的单元格数量。比如：
```
<td colspan =”2”></td>
```
删除的多余的单元格。

9.列表标签

分为无序列表，有序列表，自定义列表。

无序列表

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

基本语法：

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

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

基本语法：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。

自定义列表

在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

基本语法：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

总结

标签名	定义	说明
<ul></ul>	无序标签	里面只能包含li 没有顺序，使用较多，li里面可以包含任何标签
<ol></ol>	有序标签	里面只能包含li 有顺序，使用相对较少，li里面可以包含任何标签
<dl></dl>	自定义列表	里面只能包含dt和dd，dt和dd里面可以放任何标签

10.表单标签

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

表单域

表单域是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把他范围内的表单元素信息提交给服务器。

命名规范：

<form action=”url地址” method=”提交方式” name=”表单域名称”>
    各表单元素控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单元素

<input>表单元素

用于收集用户信息。

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

<input type=”属性值” />

<input />标签为单标签
type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值及其描述：

属性值	描述
button	定义可点击按钮(多数情况下用于通过JavaScript启动脚本)
checkbox	定义复选框
file	定义输入字段和”浏览”字段，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

<input>的其他属性：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

name和value是每个表单元素都有的属性值，主要给后台人员使用
name表单元素的名字，要求单选按钮和复选按钮要有相同的name值

问：1.有些表单元素想打开页面就默认显示几个文字怎么做？

可以给这些表单元素设置value属性=”值”

用户名：<input type=”text” value=”请输入用户名” />

2.页面中的表单元素很多，如何区分不同的表单元素？

name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单，页面中的表单很多，name的主要作用就是用于区分不同的表单。

用户名：<input type=”text” value=”请输入用户名” name=”username” />

name属性后面的值是自定义的。
radio(或checkbox)如果是一组，我们必须命名相同的名字

<label>标签

<label>标签为input元素定义标注(标签)。

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验。

语法：

<label for=”sex”>男</label>
<input type=”radio” name=”sex” id=”sex”/>

<select>表单元素

使用场景：

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用 <select> 标签控件定义下拉列表。

语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
    ...
</select>

<select>中至少包含一对<option>。
在<option>中定义 selected = "selected" 时，当前项即为默认选中项。

<textarea>表单元素

使用场景：

当用户输入内容较多的情况下，就不能使用文本框表单了，此时可使用 <textarea> 标签。

在表单元素中，<textarea>标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法：

<textarea rows="3" cols="20">
    文本内容
</textarea>

通过<textarea>标签可以轻松创建多行文本输入框。
cols= "每行中的字符数"，rows = "显示的行数"，在实际开发中不会使用，都是用CSS来改变大小。

推荐查阅文档网址：

W3C：http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/

小王同学__

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识（二） HTML常用标签

1.标题标签2.段落和换行标签3.文本格式化标签4.标签5.图像标签和路径6.超链接标签链接的语法格式链接分类外部链接：内部链接：网页元素链接：锚点链接：7.HTML中的注释和特殊字符注释特殊字符8.表格标签表格的基本语法表头单元格标签表格属性表格结构标签合并单元格9.列表标签无序列表有序列表自定义列表总结10.表单标签表单域表单元素
复制链接

扫一扫