HTML介绍
HTML
HTML全称 HyperText Mackeup Language ,超文本标记语言
什么是超文本
比如网页的超链接、图片、音频、视频都称为超文本
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
打开pycharm, 我们可以新建一个HTML File文件, pycharm会自动为我们创建好HTML格式
接下来我们一点点剖析这段代码
文档声明头
准确的说,!DOCTYPE html并不是HTML标签,它是指明了该页面使用哪个HTML版本进行编译
html标签
<html></html>是文档的开始标记和结束的标记.是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)
head标签
<head></head>定义了HTML文档的开头部分,它们之间的内容不会在浏览器的文档窗口显示.包含了文档的元(meta)数据
title标签
<title></title>定义了网页标题，在浏览器标题栏显示.
body标签
<body></body> 之间的文本是可见的网页主体内容 .
HTML的规范与注释
HTML的规范
- HTML不区分大小写
- HTML页面的后缀名是html或者htm(win32时代，系统只能识别3位扩展名时使用的。现在一般都使用.html
- HTML的结构
- 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准,是HTML5标准
- head部分：将页面的一些额外信息告诉服务器,不会显示在页面上
- body部分：我们所写的代码必须放在此标签內
HTML注释
<!--单行注释-->
- 给自己看。随着页面的内容越多，高效的注释能让我们的代码更易阅读，并且关键性的代码我们可以用注释标注出来
- 给别人看。比如自己写的html代码，有的地方代码需要说明一下，同时要转给别人看和解读分析的，这个时候就有必要使用html注释
head中相关标签
head标签中的相关标签是用户看不到的,仅仅是对应用于网页的一些基础信息
head内常用标签
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <stytle></stytle> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入内部JS文件 |
| <link/> | 引入外部样式表文件或网站图标 |
| <meta/> | 定义网页原信息 |
meta标签的组成
<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词<meta>标签位于文档的头部，不包含任何内容<meta>提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://https://www.cnblogs.com/2222bai">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="博客园是一家很实用IT学习网站">
body中相关标签
body中基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平分割线-->
<hr>
body中特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
|>
<|<
&|&
￥|¥
版权|©
注册|®
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现
块级元素和行内元素的区别:
所谓块元素,是另起一行开始渲染的元素,行内元素则不需另起一行.如果单独在网页中插入这两个元素,不会对页面产生任何影响
这两个元素是专门为定义CSS而生的
注意:
关于标签嵌套:通常块级元素可以包含内联元素某些块级元素,但内联元素不能包含块级元素,它只能包含其他内联元素
p标签不能包含块级标签,p标签也不能包含p标签
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签
超链接标签
所谓的超链接就是指从一个网页指向一个目标的连接地址.这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序
链接功能:
<a href="www.baidu.com" target="_blank">点我</a>
target:
- _blank表示在新建标签页中打开网页
- _self表示在当前标签页中打开网页
锚点功能:
<!--<a href="" id="a1">文章开头</a>-->
<!--<div style="background-color: red;height: 1000px"></div>-->
<!--<div style="background-color: green;height: 1000px"></div>-->
<!--<div style="background-color: orange;height: 1000px"></div>-->
<!--<a href="" id="a2">文章中部</a>-->
<!--<div style="background-color: black;height: 1000px"></div>-->
<!--<div style="background-color: green;height: 1000px"></div>-->
<!--<div style="background-color: orange;height: 1000px"></div>-->
<!--<a href="#a1">回到顶部</a>-->
<!--<a href="#a2">回到中部</a>-->
列表
无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性:
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性:
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
表格
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构:
<table border="1"> <!--表格边框-->
<thead>
<tr >
<th>username</th>
<th>password</th>
<th>hobby</th>
<th>is_delete</th>
</tr>
</thead> <!--表头-->
<tbody>
<tr >
<td rowspan="2">jason</td> <!--当前列向下合并2行数据-->
<td>123</td>
<td>study</td>
<td>0</td>
</tr>
<tr>
<!--<td>tank</td>-->
<td>444</td>
<td>DBJ</td>
<td>1</td>
</tr>
<tr>
<td>echo</td>
<td colspan="2">333</td> <!--当前行向后合并2列数据-->
<!--<td>movie</td>-->
<td>1</td>
</tr>
</tbody> <!--表数据-->
</table>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）