前端知识1-HTML5

作者: 只是甲 | 来源:发表于2022-08-25 16:06 被阅读0次

一. 初识HTML5

1.1 HTML5概述

HTML5
全称为 HyperText Markup Language，译为超文本标记语言。
超文本包括：文字、图片、音频、视频、动画等

HTML5的优势
跨平台

W3C标准
World Wide Web Consortium（万维网联盟）
成立于1994年，Web及时领域最权威和具影响力的国际中立性技术标准机构

W3C标准包括
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

常见IDE
记事本、Dreamweaver、IDEA、WebStorm

1.2 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>

简单注解:

第一行的<!DOCTYPE html>声明是HTML5标准
lang指定页面的语言类型，一般常见的有两种：
en：定义页面语言为英语
zh-CN：定义页面语言为中文
head头标签表示的是页面的配置，其内部的常见标签主要有<title>、<meta>、<link>等
<title>：指定整个网页的标题，在浏览器最上方显示。
<meta>：提供有关页面的基本信息
<link>：定义文档与外部资源的关系。

二. 常用的网页标签

2.1 标题标签 h1-h6

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

特点：

加了标题的文字会变的加粗，字号也会依次变大。
一个标题独占一行。
可以看到从h1到h6，字体逐渐变小，h7就相当于没有加<h>的默认字体
测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>h1字体</h1>
<h2>h2字体</h2>
<h3>h3字体</h3>
<h4>h4字体</h4>
<h5>h5字体</h5>
<h6>h6字体</h6>
<h7>h7字体</h7>
</body>
</html>

image.png

2.2 段落和换行标签

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

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。

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

测试记录:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3<br>段落3换行</p>
</body>
</html>

image.png

2.3 文本格式化标签

image.png

测试记录:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    <b>段落1:加粗</b>
</p>
<p>
    <i>段落2:倾斜</i>
</p>
<p>
    <s>段落3:删除线</s>
</p>
<p>
    <u>段落4:下划线</u>
</p>
</body>
</html>

image.png

2.4 div和span标签

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

实际开发过程中用得比较多，经常从后端传过来的就是指定变量的值，此时我们在html文件里面提前预留一个占位符。

特点：

<div> 标签用来布局，但一行只能放一个<div>。
<span>标签用来布局，一行上可以多个 <span>。

测试记录:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    <div>段落1:div</div>
</p>
<p>
    <span>段落2:span</span>
</p>
</body>
</html>

image.png

2.5 图像标签和路径

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

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

测试记录:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <img src="E:\python-web\1.png" alt="测试图片">
</div>
</body>
</html>

image.png

2.6 超链接标签

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

格式为：

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

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

常见的链接分类：

外部链接

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

内部链接
网站内部页面之间的相互链接

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

空链接
用于没有确定链接目标时

< a href="#"> 首页 </a>

下载链接
如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接
用在网页中的各种网页元素上，如文本、图像、表格、音频、视频等
锚点链接
当点击链接时,可以快速定位到页面中的某个位置。
具体步骤如下：
6.1) 在链接文本的 href 属性中，设置属性值为 #名字的形式,如<a href="#anchor "> 链接 </a>
6.2) 找到目标位置标签，里面添加 id 属性 = 刚才的名字，如：<h3 id="anchor ">介绍</h3>

测试记录:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>

image.png

2.7 注释和特殊字符

HTML中的注释格式为：

<!-- 注释语句 -->

快捷键:ctrl + /

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

image.png

三. 表格标签

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

3.1 表格的基本语法

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

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

其中：

<tr> </tr> 标签用于定义表格中的行.
<th></th> 表头单元格标签位于表格的第一行或第一列,突出重要性,里面的文本内容加粗居中显示.
<td> </td>指表格数据（table data），即数据单元格的内容，用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>INFO列表</h1>

<a href="/info/add">添加</a>>

<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for obj in data_list %}
        <tr>
            <td>{{ obj.id }}</td>
            <td>{{ obj.name }}</td>
            <td>{{ obj.password }}</td>
            <td>{{ obj.age }}</td>
            <td>
                <a href="/info/delete/?nid={{ obj.id }}">删除</a>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

</body>
</html>

3.2 表格属性

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

image.png

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>

解释:

无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

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

测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</div>
</body>
</html>

image.png

4.2 有序列表

<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项
有序列表的基本语法格式如下：

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

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的是不被允许的。
<li> 与 </li>之间相当于一个容器，可以容纳所有元素。

测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
</div>
</body>
</html>

image.png

4.3 自定义列表

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

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

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

测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
    </dl>
</div>
</body>
</html>

image.png

五. 表单标签

5.1 表单的组成

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

一个完整的表单通常包含:

表单域
表单控件（也称为表单元素）
提示信息

5.2 表单域

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

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

image.png

5.3 表单控件(表单元素)

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

5.3.1 <input> 表单元素

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

<input type="属性值" />

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

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

image.png
其中，单选按钮和复选框要有相同的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>

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

5.3.4 textarea 表单元素

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

语法结构：

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

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

5.4 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>添加用户</h1>
<form method="post">
    {% csrf_token %}
    <input type="text" name="user" placeholder="用户名">
    <input type="text" name="pwd" placeholder="密码">
    <input type="text" name="age" placeholder="年龄">
    <input type="submit" value="提交">
</form>>
</body>
</html>

image.png

六. HTML5 的新特性

6.1 HTML5 新增的语义化标签

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

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

image.png

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

6.2 HTML5 新增的 input 类型

image.png

6.3 HTML5 新增的表单属性

image.png

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

input::placeholder 
{
    color: pink;
}

参考:

https://blog.csdn.net/qq_42691298/article/details/125720128

前端知识1-HTML5

一. 初识HTML5

1.1 HTML5概述

1.2 HTML5范例

二. 常用的网页标签

2.1 标题标签 h1-h6

2.2 段落和换行标签

2.3 文本格式化标签

2.4 div和span标签

2.5 图像标签和路径

2.6 超链接标签

2.7 注释和特殊字符

三. 表格标签

3.1 表格的基本语法

3.2 表格属性

3.3 表格结构标签

3.4 合并单元格

四. 列表标签

4.1 无序列表

4.2 有序列表

4.3 自定义列表

五. 表单标签

5.1 表单的组成

5.2 表单域

5.3 表单控件(表单元素)

5.3.1 <input> 表单元素

5.3.2 label 标签

5.3.3 select 表单元素

5.3.4 textarea 表单元素

5.4 实例

六. HTML5 的新特性

6.1 HTML5 新增的语义化标签

6.2 HTML5 新增的 input 类型

6.3 HTML5 新增的表单属性

参考:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读