一、HTML是什么?
1.超文本标记语言（Hypertext Markup Language，HTML）通过标记符号来标记要显示的网页中的内容。
2.其实就是一套规则，浏览器认识的规则。
3.浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。
4.对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）。
1.1、HTML写法
< !DOCTYPE html > <!--#告诉浏览器以什么样的规则去解释html，类似于shell的 "#!/bin/bash"-->
<html lang="en"> <!--#lang语言="en"英文。lang是一个属性,en是属性值。-->
<head> <!--#头部-->
<meta charset="UTF-8"> <!--meta：描述源信息，这里表面整个页面是以"UTF-8"字符集解析-->
<title>网页标题</title> <!--网站的标题-->
</head>
<body> <!--#内容-->
文件体
</body>
</html> 单标签闭合：如 <br />、<hr />和<img src=“images/1.jpg” />等
双标签闭合：比如 <div> 和 </div>
1.1.1、html常用标签之Meta
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词
<meta>标签位于文档的头部，不包含任何内容
<meta>提供的信息是用户不可见的
1.2、排版标识
1.标题部分
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
6种标题效果标签。分别为h1~h6。<h1>字体最大，<h6>字体最小
2.分割线
<html>
<hr>
</html>3.换行
<html>
<br>
</html>4、换行2
<p>sudada</p>sudada
5、屏幕滚动(轮播)
<marquee behavior="" direction="left">Hello</marquee>direction #指的是往哪个方向滚动，可以使用"上"下"左"右"
Hello #滚动的内容
1.3、标签列表
1.3.1、无序列表
<body>
<ul> # 带属性写法： <ul type="circle">
<li>zhangsan</li>
<li>lisi</li>
<li>wangwu</li>
</ul>
</body>效果图：
常用属性解释：
属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)
1.3.2、有序列表
<body>
<ol> # 带属性写法 <ol type="a">
<li>zhangsan</li>
<li>lisi</li>
<li>wangwu</li>
</ol>
</body>效果图：
常用属性解释：
属性：type编号类型，默认为整数。可选（1、A、a、Ⅰ、i）
属性：start起始编号，默认为1，即由最小编号开始
1.3.3、常用标签之a标签
1、语法：<a 属性=“属性值”>标签内容</a>
2、常见的属性：href
接远程目标：通过URL地址链接到远程目标。
链接本地页面：可以通过相对路径或者绝对路径链接本地页面。
相对路径：指相对于当前页面位置的路径
./ ：表示当前页面所在的目录
../ ：表示当前页面所在的上一级目录
绝对路径：绝对路径指当前站点中确切的路径，一般以”/”开始 例如：<a href=“/admin/index.py”>后台首页</a>3、常见例子：
做域名跳转 (类似于office的超链接)
<a href="https://www.baidu.com">跳转到百度</a>
<a href=“http://www.sina.com.cn”>新浪网</a>
# 写法：<a href="跳转的地址">
# 域名前必须写http或者https，否则读取的是当前目录下的文件。跳转到本地文件：
相对路径：<a href=“include/login.html”>登录页面</a>
绝对路径：<a href=“/html/123.html”>国内新闻</a>链接到邮箱：
<a href=“mailto:[email protected]”>给我发邮件</a>下载文件：
<a href=“/download/winRAR.rar”>下载WinRAR</a>
<a href=“download/office2007.rar”>下载office2007</a>
4、新开一个浏览器窗口打开跳转的页面 target
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<a href="https://www.baidu.com" target="_self">跳转到百度</a>
# _blank表示在新窗口中打开目标网页
# _self表示在当前窗口中打开目标网页1.3.4、常用标签之img标签
语法：<img src="URL" alt="规定图像的替代文本"/>
<body>
<img src="DDD.jpg" alt="猫咪"> #如果显示不出来这个图片，那么就显示猫咪这个文件说明
</body> 如图：
img常见的属性用法说明：
| 属性 | 值 | 含义 |
|---|---|---|
| src | 图像URL | 规定图像的URL |
| alt | 字符串 | 规定图像的替代文本 |
| width | px / % | 规定图像的宽 |
| height | px / % | 规定图像的高 |
| border | px | 图像的边框粗细 |
1.4、html常用标签之div和span元素
1. <div></div>
<div>只是一个块级元素，并无实际的意义. 主要通过CSS为其赋予不同的表现
2. <span></span>
<span>内联行(行内元素),并无实际的意义. 主要通过CSS为其赋予不同的表现
块级元素与行内元素的区别:
块级元素：h1-h6,<hr>,<p>
行内元素：span img
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，如果单独在网页中插入这两个元素，不会对页面产生任何的影响，这两个元素是专门为定义CSS样式而生的。
1.5、html常用标签之table标签
<body>
<table border="1px">
<tr>
<td>用户名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>效果图：
1.参数
1), <table></table>表示的表格的开始和结束
2), <tr></tr>表示的是表格的一行
3), <td></td>表示的是一个单元数据格
4), <th></th>表示表格标题单元格，且加粗居中显示2.table的常用属性
| 属性 | 值 | 含义 |
|---|---|---|
| width | px或% | 表格的宽度 |
| height | px或% | 表格的高度 |
| border | px | 表格的边框的粗细 |
| align | Left/center/right | 元素的对齐方式 |
3.例子
<body>
<table border="1px">
<tr>
<td>ID</td>
<td>新闻标题</td>
<td>点击量</td>
<td>发布时间</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</table>
</body>效果图：
