html5 常用标签的使用

窗台的花花

已于 2023-05-09 09:21:08 修改

阅读量4.8k

点赞数 9

分类专栏： web前端文章标签： html5

于 2021-08-03 23:22:15 首次发布

本文链接：https://blog.csdn.net/qq_40116418/article/details/119360502

版权

web前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

什么是HTML?

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML语法骨架格式

<html>    根标签，页面中最大的标签
   
    <head>    头部，head标签中必须要设置的标签是title
        <title></title>    标题，页面的网页标题
    </head>
    
    <body>    主体，包含文档的所有内容，页面内容
    </body>

</html>

注意：HTML标签名、类名、标签属性和大部分属性值统一用小写。

标签分类

1.常规元素（双标签）

<标签名>内容</标签名>  比如：<body></body>

2.空元素（单标签）

<标签名/>  比如：<br/>
<br/>的三种写法：<br>、</br>、<br/>, 建议写法：<br>和<br/>

HTML标签关系

1.嵌套关系

<head>

    <title> </title>

</head>

2.并列关系

<head> </head>

<body> </body>

倡议：

写法：如果两标签之间的关系是嵌套关系，子元素最好缩进一个tab的身位（一个tab是4个空格），如果是并列关系最好上下对齐。

<!DOCTYPE>声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

<!DOCTYPE html> 告诉浏览器按照html5规范解析页面，有html或xhtml

<html lang = "zh-CN"> 语言为中文，英文是：lang = "en"

</html>

字符集

<meta charset = "UTF-8"/>

字符集是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312

gb2312 简体中文，包括6763个文字
BIG5 繁体中文，港澳台等用
GBK 包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312

书写标准：大写 "UTF-8"

排版标签

1.标题标签

<h1> 标题文本 </h1>       最大
   
      ·····                 ↓

<h6> 标题文本 </h6>       最小


 · 文字变粗，字号变大

 · 一行只能放一个标题

2.段落标签

单词缩写：paragraph

把HTML文档分割为若干段落

<p> 文本内容 </p>

3.水平标签

单词缩写：horizontal 横线

使段落与段落分开，使文档结构清晰，层次分明，创建网页水平线的标签

<hr/>  是单标签

4.换行标签

单词缩写：break 打断，换行

<br/>

5.div和span标签

div span 是没有语义的，是网页布局主要的两个盒子。

div 就是division的缩写，分割、分区的意思。

span 跨度、跨距、范围。

div标签定义了文档的区域，块级 (block-level)。用来布局的，一行只能放一个div。
span 用来组合文档中的行内元素，内联元素(inline)。用来布局的，一行可以放多个span

用法：

1. 使用 <div> 元素使文档中的一个区域显示为蓝色：

<p>这是一些文本。</p>

<div style="color:#0000FF">

    <h3>这是一个在 div 元素中的标题。</h3>

    <p>这是一个在 div 元素中的文本。</p>

</div>

<p>这是一些文本。</p>

效果：

2.使用 <span> 元素对文本中的一部分进行着色：

 <p>我的母亲有 

    <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，
    我的父亲有 
    <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。

 </p>

效果：

6.文本格式化标签

<b> </b>  <strong></strong>   文字加粗（XHTML推荐使用strong）

<i> </i>  <em> </em>          文字斜体（XHTML推荐使用em）

<s> </s>  <del> </del>        文字加删除线（XHTML推荐使用del）

<u> </u>  <ins> </ins>        文字加下划线（XHTML推荐使用u）

区别：b只是加粗，strong除了可以加粗还有强调的意思，语义更强烈。

7.图像标签

<img src = "图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必须属性。

src URL图像的路径
alt 文本图像不能显示时的替换文本
title 文本鼠标悬停时显示的内容
width 像素（XHTML不支持页面百分比）设置图像的宽度
height 像素（XHTML不支持页面百分比）设置图像的高度
border 数字设置图像边框的宽度

代码：

<h2>显示图片</h2>
<img src="pic/dongtu_one.gif" width="300">刘亦菲<img/><br/>

<h2>添加替换文本</h2>
<!-- src="pic_tw.jpg"是一个不存在的图片地址，加载失败后显示文字-->
<img src="pic_tw.jpg" width="300" alt="刘亦菲美照未加载成功"/> 

<h2>鼠标悬停在图片上显示内容</h2>
<img src="pic/dongtu_two.gif" width="750" title="美丽可爱的朱茵小姐姐"/>

<h2>图像设置边框</h2>
<img src="pic/dongtu_three.gif" width="750" border="5" />

8.链接标签

单词缩写：anchor的缩写，基本解释：锚，铁锚

语法格式：

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

href 用于指定链接目标的url地址，（必须属性）当标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其取值self和blank两种，其中self为默认值，blank为在新窗口中打开方式

外部链接

<a href = "http://www.baidu.com"> 百度一哈 </a>

内部链接

<a href = "demo.html"> 呼啦呼啦 </a>

图像链接

<a href = "http://www.baidu.com"> <img src = "timg.jpg"/> </a>

路径

页面中的图片会非常多，通常我们再新建一个文件夹专门用来存放图像文件（images），这时再插入图像，就需要采用 “路径” 的方式来指定图像文件的位置。路径分为：相对路径和绝对路径，通常我们使用相对路径较多。

相对路径：以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为绝对路径。

同一级路径

只需要输入图像文件的名称即可，如：<img src = "xiaolu.jpg"/>

下一级路径

图像文件位于HTML文件同级文件夹（images）下，如：<img src = "images/xiaolu.jpg/>

上一级路径

在文件名之前加上 "../>，如果是上两级，则需要使用 "../../"，以此类推，如：

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点需要两步：

1.使用相应的id名标注跳转目标的位置。

<h3 id = "tow"> 第二集 </h3>

2.使用<a href = "#id名"> 链接文本 </a> 创建链接文本

<a href = "#two" >

9.base标签

语法：

<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <base target = "_blank"/>

</head>

总结：

1. base可以设置整体链接的打开方式

2. base写到<head></head>之间

3. 把所有的链接都默认添加 target = "_blank"

10.预格式化文本pre标签

<pre> 可预订格式化的文本。

被包围在<pre>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>
    
    此例演示如何使用pre标签
    对空行和空格

    进行控制

</pre>

总结：按照我们预先写好的文字格式来显示页面，保留空格和换行等。比较少用，因为不好控制。

11. 表格

1.创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

创建表格的基本语法：

<table>

    <tr>
        <td>单元格内的元素</td>
        ···
    </tr>

    ···
</table>

要深刻体会表格、行、单元格他们的构成。

在上面的语法中包含基本的三对HTML标签，分别为table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

1.table用于定义一个表格标签。

2.tr标签用于定义表格中的行，必须嵌套在table标签中。

3.td用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4.字母td指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。

总结：

表格的主要目的是用来显示特殊数据的
一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
<tr></tr>中只能嵌套<td></td>类的单元格
<td></td>标签，他就像一个容器，可以容纳所有的元素

2.表格属性

表格有部分属性我们不常用，这里重点记住cellspacing、cellpadding。

我们经常有个书法，是三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为0

3.表头单元格标签th

作用：

一般表头单元格位于表格的第一行或第一列，并且文本加粗居中

语法：

只需要表头标签<td></th>替代相应的单元格标签<td></td>即可。

4.表格标题caption

定义和用法

<table>
    <caption>我是表格标题</caption>
</table>

注意：

1.caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。

2.caption标签必须紧随table标签之后。

3.这个标签只存在表格里面才有意思。

案例：

根据要求完成一下案例：

看源代码

5.合并单元格（难点）

合并单元格是我们比较常用的操作，但是不会合并的很复杂

1.合并单元格2种方式

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

查看源码

2.合并单元格顺序

合并顺序我们按照先上后下先左后右的顺序

3.合并单元格三部曲

1.先确实是跨行还是跨列合并

2.根据先上后下先左后右的原则找到目标单元格然后写上合并方式，还有要合并的单元格数量比如：

<td colspan="3"> </td>

3.根据多余的单元格

6.总结表格

1.表格提供了HTML中定义表格式数据的方法。

2.表格中由行中的单元格组成。

3.表格中没有列元素，列的个数取决于行的单元格个数。

4.表格不要纠结于外观，那是CSS的作用。

5.表格的学习要求：能手写表的结构，并且能够简单合并单元格。

7.拓展阅读@

表格划分结构（了解）

对于比较复杂的表格，表格的结构也就相对复杂了，所以有将表格分割成三个部分：题头、正文和脚注。而这三部分分别用：thead，tbody，tfoot来标注，这样更好的分清表格结构。

注意：

1.<thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead>内部必须拥有<tr>标签！

2.<tbody></tbody>：用于定义表的的主体。放数据本体。

3.<tfoot></tfoot>放表格的脚注之类。

4.以上标签都是放到table标签中。

12.列表标签（重点）

前面我们知道表格一般用于数据展示的，但是网页中还有很多跟表格类似的布局，如下图，我们用什么做呢？

答案是列表，那什么是列表？表格是用来显示数据的，那列表就是用来布局的。因为非常整齐和自由。

概念

容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。

特点

列表最大的特点就是整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高。

1.无序列表 ul（重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

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

脚下留心：

1.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>中输入其他标签或者文字的做法是不被允许的。
2.<li>和</li>之间相当于一个容器，可以容纳所有元素。
3.无序列表会带有自己的样式属性，放下那个样式，一会让CSS来！

2.有序列表ol（了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

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

所有特性基本与ul一致。但实际中比无序列表用的要少很多。

3.自定义列表（理解）

自定义列表常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
    <dt>北京</dt>
    <dd>昌平区</dd>
    <dd>海淀区</dd>
    ·····
    <dt>山西</dt>
    <dd>太原</dd>
    <dd>临汾</dd>
    ·····
</dl>

4.列表总结

13.input表单标签（重点）

作用：

表单目的是为了收集用户信息。

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

语法：

<input type = "属性值" value = "你好">

input输入的意思
<input/>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性

常用属性：

1.type属性

这个属性通过改变值，可以决定你术语哪种input标签。
比如 type = 'text' 表示文本框，可以做用户名、昵称等。
比如 type = 'password' 表示密码框，用户输入的密码是不可见的。

用户名: <input type = "text"/>
密码: <input type = "password"/>

2.value属性

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

value默认的文本值。有些表单刚打开页面就默认显示几个文字，就可以通过这个value值来设置。

3.name属性

用户名: <input type = "text" name = "username" />

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

name属性后面的值，使我们自己定义的。
radio如果是一组，我们必须给他们命名相同的名字name，这样就可以多个选其中一个啦。

<input type = "radio" name = "sex"/> 男
<input type = "radio" name = "sex"/> 女

4.checked属性

表示默认选中状态。较常见于单选按钮和复选按钮

性    别:
<input type = "radio" name = "sex" value = "男" checked = "checked"/> 男
<input type = "radio" name = "sex" value = "女"/> 女

5.input属性小结

14.label标签（理解）

概念：

label 标签为input元素定义标注。

作用：

用于绑定一个单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。

如何绑定元素呢？

1.用label直接包括input表单。

<label> 用户名：<input type = "radio" name = "username" value = "请输入用户名"></label>

适合单个表单选择

2.for属性规定label与哪个表单元素绑定。

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

当鼠标点击label标签里面的文字时，光标会定位到指定的表单里面。

15.textarea（文本域）

语法：

<textarea cols = "每行中的字符数" rows = "显示的行数">
文本内容
</textarea>

作用：

通过textarea控件可以轻松创建多行文本输入框。

文本框和文本域的区别

16.select下拉列表

目的：

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。

语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ···
</select>

注意

1.<select></select>中至少包含一对<option></option>。

2.在option中定义selected = "selected"时，当前项即为默认选中项。

17.form表单域

收集的用户信息怎么传递给服务器？

通过form表单域

目的：

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

语法：

<form action = "url地址" method = "提交方式" name = "表单名称">
    各种表单控件
</form>

常用属性：

例子：

<form action = "" method = "get">
    用户名：<input type = "text" name = "username"/><br/>
    密码：<input type = "password" name = "pwd"/><br/>
    <input type = "submit"/>
    <input type = "reset"/>
</form>

团队约定

元素属性值使用双引号语法(html语法使用双引号" "，js语法使用单引号' '，目的是区别开两种语法)
元素属性可以写上的都写上

推荐：

<input type = "text"/>
<input type = "radio" name = "name" checked = "checked"/>

不推荐：

<input type = text/>
<input type = 'text'/>
<input type = "radio" name = "name" checked/>

查文档

经常查文档是一个非常好的学习习惯。

W3C： w3school 在线教程

MDN： MDN Web Docs

窗台的花花

关注

9
点赞
踩
46

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5 常用标签的使用

什么是HTML?HTML 指的是超文本标记语言:HyperTextMarkupLanguage HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签(markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML标签及文本内容 HTML文档也叫做web 页面HTML语法骨架格式<html> 根标签，页面中最大的标签 <head> 头部，head标签中必须要设置的标签是title ...
复制链接

扫一扫