前端HTML5常用基础知识总结

una_mattina7

已于 2023-03-21 11:02:44 修改

阅读量2k

点赞数 2

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

于 2022-07-11 22:06:11 首次发布

本文链接：https://blog.csdn.net/qq_42691298/article/details/125720128

版权

前端开发专栏收录该内容

26 篇文章 1 订阅

订阅专栏

6.2.HTML5 新增的 input 类型

6.3.HTML5 新增的表单属性

一：初识HTML

HTML 全称为 HyperText Markup Language，译为超文本标记语言。

在 VS Code 中，新建 html 文件，输入html:5后，按Tab键或回车后，可以快速生成HTML5的骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.其中，第一行的<!DOCTYPE html>声明是HTML5标准

2.lang指定页面的语言类型，一般常见的有两种：

en：定义页面语言为英语 zh-CN：定义页面语言为中文

3.head头标签表示的是页面的配置，其内部的常见标签主要有<title>、<meta>、<link>等

<title>：指定整个网页的标题，在浏览器最上方显示。
<meta>：提供有关页面的基本信息
<link>：定义文档与外部资源的关系。

二：常见网页标签

2.1.标题标签 h1-h6

作用：使网页更具有语义化，并且依据重要性h1-h6递减。

特点：

1. 加了标题的文字会变的加粗，字号也会依次变大。

2. 一个标题独占一行。

2.2.段落和换行标签

<p>标签用于定义段落，它可以将整个网页分为若干个段落。

特点：

1. 文本在一个段落中会根据浏览器窗口的大小自动换行。

2. 段落和段落之间保有空隙。

<br>标签可以使某段文本强制换行显示

2.3.文本格式化标签

2.4.div和span标签

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。

特点：

1. <div> 标签用来布局，但一行只能放一个<div>。

2. <span> 标签用来布局，一行上可以多个 <span>。

2.5.图像标签和路径

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

语法格式为：<img src="图像url" /> src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

图像标签的其他属性：

其中路径分为绝对路径与相对路径两种

绝对路径： 是指目录下的绝对位置，直接到达目标所在位置

例如：D:\web\images\a.jpg 或完整的网络地址 https://i0.hdslb.com/bfs/banner/6841e6cc42cd5dacc4f333f79b95cbdf5cc2d58b.png@976w_550h_1c.webp

相对路径：则以引用文件所在位置为参考基础，而建立出的目录路径其中上一级路径 ../

注意：图像的宽度和高度一般只设定一个，另一个等比例缩放单位默认是像素

2.6.超链接标签

<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

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

其中target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开

下面是常见的 链接分类：

1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。

2. 内部链接:网站内部页面之间的相互链接，例如 < a href="index.html"> 首页 </a >。

3. 空链接: 用于没有确定链接目标时，< a href="#"> 首页 </a > 。

4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

5. 网页元素链接: 用在网页中的各种网页元素上，如文本、图像、表格、音频、视频等

6. 锚点链接: 当点击链接时,可以快速定位到页面中的某个位置。具体步骤如下：

1.在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#anchor "> 链接 </a>

2.找到目标位置标签，里面添加 id 属性 = 刚才的名字 ，如：<h3 id="anchor ">介绍</h3>

2.7.注释和特殊字符

HTML中的注释格式为  快捷键: ctrl + /

在 HTML 页面中，一些特殊的符号不方便直接使用，此时我们就可以使用下面的字符来替代。

三：表格标签

表格（table）主要用于显示、展示数据，可读性比较好

3.1.表格的基本语法

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

其中<tr> </tr> 标签用于定义表格中的行. <td> </td>指表格数据（table data），即数据单元格的内容，用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

<table>
        <tr>
                <th>姓名</th>
                ...
        </tr>
         ...
</table>

<th></th>表头单元格标签 位于表格的第一行或第一列,突出重要性,里面的文本内容加粗居中显示.

3.2.表格属性

表格标签这部分属性实际开发不常用，后面主要通过 CSS 来设置

3.3.表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

<thead></thead> 标签表格的头部区域，<thead> 内部必须拥有 <tr> 标签，一般是位于第一行。

<tbody></tbody> 标签表格的主体区域，主要用于放数据本体。

3.4.合并单元格

跨行合并：rowspan="合并单元格的个数" 向下合并

跨列合并：colspan="合并单元格的个数" 向右合并

四：列表标签

表格是用来显示数据的，那么列表就是用来布局的

根据使用情景不同，列表可以分为三大类：无序列表（ul）、有序列表（ol）和自定义列表(dl)

4.1.无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，而列表项使用 <li> 标签定义。

无序列表的基本语法格式如下：

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

其中，

1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。

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

3. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

注意：在css中我们常用 list-style: none 来去掉li前面的小圆点

4.2.有序列表

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

有序列表的基本语法格式如下：

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

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

2. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。

4.3.自定义列表

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

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

其基本语法如下：

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

1. <dl></dl> 里面只能包含 <dt> 和 <dd>。

2. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

五：表单标签

5.1.表单的组成

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

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

5.2.表单域

表单域<form>是一个包含表单元素的区域,<form> 会把它范围内的表单元素信息提交给服务器.

<form action=“url地址” method=“提交方式” name=“表单域名称">

各种表单元素控件

</form>

5.3.表单控件(表单元素)

在表单域中可以定义各种表单元素，它们允许用户在表单中输入或者选择的内容控件

5.3.1.input 表单元素

<input> 标签包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式

<input type="属性值" />

<input> 标签用于收集用户信息，type 属性的属性值及其描述如下：

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

其中，单选按钮和复选框要有相同的name值

5.3.2.label 标签

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

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

注意： <label> 标签的 for 属性应当与相关元素的 id 属性相同

5.3.3.select 表单元素

<select>标签控件定义下拉列表

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

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

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

5.3.4.textarea 表单元素

<textarea> 标签是用于定义多行文本输入的控件，常见于留言板,评论。

语法结构：

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

rows=“显示的行数”，cols=“每行中的字符数” ，在实际开发中都是用 CSS 来改变大小

六：HTML5 的新特性

6.1.HTML5 新增的语义化标签

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的

这种语义化标准主要是针对 搜索引擎 的并且这些新标签页面中可以使用多次

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

6.2.HTML5 新增的 input 类型

6.3.HTML5 新增的表单属性

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder 
{
    color: pink;
}

una_mattina7

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
前端HTML5常用基础知识总结

HTML 全称为 HyperText Markup Language，译为超文本标记语言。在 VS Code 中，新建 html 文件，输入html:5后，按Tab键或回车后，可以快速生成HTML5的骨架：1.其中，第一行的声明是HTML5标准2.lang指定页面的语言类型，一般常见的有两种：en：定义页面语言为英语 zh-CN：定义页面语言为中文3.head头标签表示的是页面的配置，其内部的常见标签主要有、、等作用：使网页.........
复制链接

扫一扫