一. 初识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就相当于没有加的默认字体
测试:
<!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>
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>
2.3 文本格式化标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QAsc3fPg-1661414524305)(https://upload-images.jianshu.io/upload_images/2638478-86196f156e5fc979.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
测试记录:
<!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>
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>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FSao1W34-1661414524306)(https://upload-images.jianshu.io/upload_images/2638478-03d526a004d406db.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
2.5 图像标签和路径
<img>
标签用于定义 HTML 页面中的图像
语法格式为:<img src="图像url" />
src 是标签的必须属性,它用于指定图像文件的路径和文件名。
测试记录:
<!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>
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>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GzwQqCg3-1661414524308)(https://upload-images.jianshu.io/upload_images/2638478-eb23eef127784cc6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
2.7 注释和特殊字符
HTML中的注释格式为:
<!-- 注释语句 -->
快捷键:ctrl + /
在 HTML 页面中,一些特殊的符号不方便直接使用,此时我们就可以使用下面的字符来替代。
三. 表格标签
表格(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 来设置
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>
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>
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>
五. 表单标签
5.1 表单的组成
使用表单目的是为了收集用户信息
一个完整的表单通常包含:
- 表单域
- 表单控件(也称为表单元素)
- 提示信息
5.2 表单域
表单域<form>
是一个包含表单元素的区域,<form>
会把它范围内的表单元素信息提交给服务器.
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
5.3 表单控件(表单元素)
在表单域中可以定义各种表单元素,它们允许用户在表单中输入或者选择的内容控件
5.3.1 表单元素
<input>
标签包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式
<input type="属性值" />
<input>
标签用于收集用户信息 ,type 属性的属性值及其描述如下:
除 type 属性外,标签还有其他很多属性,其常用属性如下:
其中,单选按钮和复选框要有相同的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>
六. HTML5 的新特性
6.1 HTML5 新增的语义化标签
以前布局,我们基本用 div 来做。div 对于搜索引擎来说,是没有语义的
这种语义化标准主要是针对 搜索引擎 的 并且这些新标签页面中可以使用 多次
<header>
:头部标签<nav>
:导航标签<article>
:内容标签<section>
:定义文档某个区域<aside>
:侧边栏标签<footer>
:尾部标签
6.2 HTML5 新增的 input 类型
6.3 HTML5 新增的表单属性
可以通过以下设置方式修改placeholder里面的字体颜色:
input::placeholder
{
color: pink;
}
参考:
- https://blog.csdn.net/qq_42691298/article/details/125720128