HTML基础
目录
HTML基础
HTML是什么
-
超文本标记语言（Hypertext Markup Language,HTML）是一种用于创建网页的标记
语言
-
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。根据不同的浏览器，对同一个标签可能又不同的解释（也就是兼容问题）。
-
网页文件的扩展名：.html或.htm
HTML的基本结构
<!DICTYPE html>#声明为HTML5文档
<html lang="zh-CN">#标记文档的开始 并且设置了语言属性
<head>#定义了HTML文档的开头部分。head中的内容不会在浏览器的文档窗口显示。
<meta charset="UTF-8">#文档的元数据，可以设置如编码格式等数据
<title>标题</title>#定义了网页标题，在浏览器标题栏显示
</head>#head部分结束
<body>#body之中的文本是可见的网页主体内容
页面内容
</body>
</html>
HTML的标签格式
标签的书写
-
双标签 <head></head> -
单标签 <meta charset="UTF-8">
标签的语法
- 对于双标签：<标签名 属性1="属性值1" 属性2="属性值2" ......>内容</标签名>
- 对于但标签：<标签名 属性1="属性值1" 属性2="属性值2" ......>
几个重要的属性
- id：定义标签唯一的ID，HTML文档中唯一
- class：为html元素定义一个或多个类名（classname）（CSS样式类名）
- style：规定元素的行内样式（CSS样式）
注释方式
<!--内容-->
HTML常用标签
head中的常用标签
| 标签 | 意义 |
|---|---|
| 定义网页标题 | |
| 定义内部样式表 | |
| 定义JS代码或引入外部JS文件 | |
| 引入外部样式表文件或网站图标 | |
| 定义网页原信息 |
meta标签的用法
-
http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--指定文档的编码类型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--告诉IE以最高级模式渲染文档(了解)--> <meta http-equiv="x-ua-compatible" content="IE=edge"> -
name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院">
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>
特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
href属性指定目标网页地址。该地址可以有几种类型：
- 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
- 相对URL - 指当前站点中确切的路径（href="index.htm"）
- 锚URL - 指向页面中的锚（href="#top"）
列表
-
无序列表
<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 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
-
标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>egon</td>
<td>112</td>
</tr>
<tr>
<td>2</td>
<td>jojo</td>
<td>18</td>
</tr>
</tbody>
</table>
属性：
- border:表格边框
- cellpadding:内边距
- cellsapcing:外边距
- width:像素 百分比 （最好通过CSS来设置长宽）
- rowsapn:单元格竖跨多少行
- clospan:单元格横跨多少列 （即合并单元格）
