【2020Python修炼记】前端开发之 HTML常用标签汇总

【目录】标签&标签属性

1、HTML 注释

2、HTML 文档基础结构

3、head 内常用标签

link 链接标签

meta 信息标签

4、body 内常用标签

常用文本标签

特殊符号

div / span 分块标签

a 标签

img 标签

list 列表标签

table 表格标签

form 表单标签

1、HTML 注释（选中内容或者光标置于注释行，快捷键 ctrl+/ ）

# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->

# 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找：
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->

<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->

2、HTML 文档基础结构（编辑器里搭建HTML格式文件 !(英文感叹号)+tab ）

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

</body>
</html>

3、head 内常用标签

<title>Title</title>  网页标题
<style>
        h1 {
            color: greenyellow;
        }
</style>  内部用来书写css代码

<script>
        alert(123)
</script>  内部用来书写js代码

<script src="myjs.js"></script>  还可以引入外部js文件

<link rel="stylesheet" href="mycss.css">  引入外部css文件

<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,
人工智能培训,云计算培训,
Linux运维培训,Python自动化运维,Python全栈开发,IT培训">  

<!-- 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户;
网页的描述性信息 -->

link 标签

# 属性 href = " 链接地址 "

<link rel="stylesheet" type="text/css"  href="style.css"></link>
<link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">

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://www.oldboyedu.com">
<!--告诉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="老男孩教育Python学院">

4、body内常用标签

【补充】

标签默认具有的两个重要属性

1.id值
类似于标签的身份证号，在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

标签既可以有默认的属性，也可以有自定义的属性

<p id="d1" class="c1" username="jason" password="123"></p>

编辑器里快速编辑标签的技巧——开始标签的后半部分+tab 键（部分编辑器支持）

例如：span 标签

span>（然后按tab键）
最后效果如下：
<span></span>

（1）格式排版/文本标签

格式排版标签

文本标签

<!--一下文本标签  作为了解-->
<cite>    用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常为斜体字
<dfn> 定义一个定义项目
<code> 定义计算机代码文本
<samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<abbr> 定义缩写 配合title属性  (IE6以上)
<bdo>  来覆盖默认的文本方向 dir属性 值: lrt  rtl
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<small> 标签定义小型文本（和旁注）
<b>    粗体字标签 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。
<i>    斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
<u>    下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接。
<s>  删除线
<q>  签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)
<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块状元素)
<address>  定义地址 通常为斜体 (注意非通讯地址)  块状元素

<font>    H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt>    H5已删除 打字机文字
<big>    H5已删除 大型字体标签
<acronym>  H5已删除 首字母缩写 请使用<abbr>代替

<bdi>      H5新增 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。(经测试,各大浏览器都不起作用)
<mark>     H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面
<meter>    H5新增 定义预定义范围的度量
<progress> H5新增 标签标示任务的进度（进程）
<time>     H5新增 定义时间和日期 
<wbr>        H5新增    规定在文本中的何处适合添加换行符。Word Break Opportunity

其他文本标签

（2）特殊符号

&nbsp;  空格
&gt;   大于号
&lt;   小于号
&amp;  & 
&yen;  ¥   人民币符号
&copy; ©   版权
&reg;  ®   商标

（3）分块标签

div 块儿级标签
span 行内标签

上述的两个标签是在构造页面初期最常使用的, 主要通过 CSS样式为其赋予不同的表现。

# 页面的布局一般先用div和span占位之后再去调整样式

尤其是div使用非常的频繁
div你可以把它看成是一块区域也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可
而普通的文本先用span标签

关于标签嵌套：

通常,块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签，p标签也不能包含 p标签。

（4）img 标签

# 图片标签
<img src="" alt="">

#【属性】

src=" 图片路径"
1.图片的路径可以是本地的也可以是网上的
2.url:自动朝该url发送get请求获取数据

(什么是URL？URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。)

alt="图片描述信息"
当图片加载不出来的时候给图片的描述性信息

title="鼠标悬浮停留时，自动提示信息"
当鼠标悬浮到图片上之后自动展示的提示信息

height="800px"

width=""

高度和宽度当你只修改一个的时候另外一个参数会等比例缩放
如果你修改了两个参数并且没有考虑比例的问题那么图片就会失真

（5）a 标签

# 链接标签
<a href=" " target=" " ></a>

"""
当a标签指定的网址从来没有被点击过那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""

#【属性】

href=" "
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值点击即可跳转到对应的标签位置

target=" "
默认a标签是在当前页面完成跳转 target="_self"

新建页面跳转 target="_blank"

# a标签的锚点功能——使用 id 属性和 href 属性
eg:点击一个文本标题页面自动跳转到标题对应的内容区域
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>

<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>

（6）列表标签

无序列表(使用较多) —— 快捷语法 ul>li*4

<ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第二项</li>
        <li>第二项</li>
</ul>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签

有序列表(了解) —— 快捷语法 ol>li*3

<ol type="1" start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

type属性：

1 数字列表，默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马

标题列表(了解)

<dl>
    <dt>标题1</dt> 
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
    <dt>标题3</dt>
    <dd>内容3</dd>
</dl>

（7）table 表格标签

<!-- 表格标签
<thead> 表头
<tbody> 表单数据
<tr> 一个<tr> 就是一行
<th> 加粗文本，一般用于表头标题
<td> 正常文本，一般用于其他表格内容
    
属性（一般加在 开始标签里）
<table border="1">  加外边框
<td colspan="2"></td>  水平方向占2个单元格（合并同一行中的单元格）
<td rowspan="2"></td>   垂直方向占2个单元格（合并同一列中的单元格）
-->
    <table>  /* 表格标签里，由<thead></thead>和<tbody></tbody> 组成*/
        <thead>
            <tr>
                <th>uername</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>mili</td>
                <td>1314</td>
            </tr>
            <tr>
                <td>cc</td>
                <td>520</td>
            </tr>
        </tbody>
    </table>

属性:

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

像素百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

（8）form 表单标签　

form 标签的属性:

属性描述

accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。

action 规定向何处提交表单的地址（URL）（提交页面）。

autocomplete 规定浏览器应该自动完成表单（默认：开启）。

enctype 规定被提交数据的编码（默认：url-encoded）。

method 规定在提交表单时所用的 HTTP 方法（默认：GET）。

name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。

novalidate 规定浏览器不验证表单。

target 规定 action 属性中地址的目标（默认：_self）。

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

input 标签的属性:

name：表单提交时的“键”，注意和id的区别

value：表单提交时对应项的值checked：radio和checkbox默认被选中的项

type="button", "reset", "submit"时，为按钮上显示的文本年内容

type="text","password","hidden"时，为输入框的初始值

type="checkbox", "radio", "file"，为输入相关联的值

readonly：text和password设置只读

disabled：所有input均适用

input 标签的 type属性值:

type属性值表现形式对应代码

text 单行输入文本 <input type=text" />

password 密码输入框 <input type="password" />

date 日期输入框 <input type="date" />

checkbox 复选框 <input type="checkbox" checked="checked" />

radio 单选框 <input type="radio" />

submit 提交按钮 <input type="submit" value="提交" />

reset 重置按钮 <input type="reset" value="重置" />

button 普通按钮 <input type="button" value="普通按钮" />

hidden 隐藏输入框 <input type="hidden" />

file 文本选择框 <input type="file" />

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

select 标签的属性：

multiple：布尔属性，设置后为多选，否则默认单选

disabled：禁用

selected：默认选中该项

value：定义提交时的选项值

textarea 标签的属性说明：

name：名称

rows：行数

cols：列数

disabled：禁用

<!-- 表单标签 
#能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器

1
form 标签的默认属性 action:
    控制数据提交的后端路径(给哪个服务端提交数据)
        1.什么都不写  默认就是朝当前页面所在的url提交数据
        2.写全路径:https://www.baidu.com  朝百度服务端提交
        3.只写路径后缀action='/index/'  
            自动识别出当前服务端的ip和port拼接到前面
        host:port/index/
    form表单提交文件需要注意
        1.method必须指定为 post
        （form表单默认提交数据的方式是get请求，数据是直接放在url后面的，
　　　　　　无法保证数据安全 http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on）
        2.enctype="multipart/form-data"
            enctype类似于数据提交的编码格式
            默认是urlencoded 只能够提交普通的文本数据
            formdata 就可以支持提交文件数据
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

2
# label 和 input都是行内标签。ps:input不跟label关联也没有问题
label 标签的默认属性 for：
    for的值要与相关联的 input标签的 id值一致

/* 第一种:直接将input框写在label内 */
<label for="d1"> 
    username:<input type="text" id="d1">
</label>

 /* 第二种 通过id链接即可 无需嵌套 */
<label for="d2">password:</label>
<input type="text" id="d2">   

input标签 就类似于前端的变形金刚 ，通过type属性变形
    text:普通文本
    password:密文
    date:日期    
    submit:用来触发form表单提交数据的动作
    button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
    reset:重置内容
    radio:单选
        默认选中要加checked='checked'
        <input type="radio" name="gender" checked='checked'>男
        当标签的属性名和属性值一样的时候可以简写
        <input type="radio" name="gender" checked>女

    checkbox:多选
        <input type="checkbox" checked>DBJ
    
    file:获取文件 也可以一次性获取多个
        <input type="file" multiple>
    hidden:隐藏当前input框     钓鱼网站伎俩    

3
select 标签 默认是单选 可以加mutiple参数变多选 默认选中selected

4
textarea 标签  获取大段文本，多行文本

ps:
# 能够触发form表单提交数据的按钮有哪些(一定要记住)
        1、<input type="submit" value="注册">
        2、<button>点我</button>
# 所有获取用户输入的标签 都应该有name属性
    name就类似于字典的key
    用户的数据就类似于字典的value

# 针对用户选择的标签 用户不需要输入内容，但是你需要提前给这些标签添加内容value值
# 针对用户输入的标签。如果你加了value 那就是默认值
    <label for="d1">
        username:<input type="text" id="d1" name="username" value="默认值">
    </label>

其他input标签属性
    disable 禁用
    readonly 只读

-->

示例代码

<form action="">
        <!-- 用户输入框 -->
        <p>
            <label for="d1">username:<input type="text" id="d1"></label>
        </p >
        <p>
            <label for="d2">password:<input type="password" id="d2"></label>
        </p >
        <!-- 日期选择功能 -->
        <p>birthday:
            <input type="date">
        </p >
        <!-- input标签-单选 (将 name 的值设为一样的，就可实现 单选) -->
        <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender" checked>女
            <input type="radio" name="gender">其他
        </p >
        <!--input标签-多选 -->
        <p>hobby:
            <input type="checkbox">read
            <input type="checkbox" checked>DBJ
            <input type="checkbox" checked>JBD
            <input type="checkbox">hecha
        </p >

        <!-- select标签-单选 -->
        <p>province：
            <select name="" id="">
                <option value="">上海</option>
                <option value="" selected>北京</option>
                <option value="">深圳</option>
            </select>
        </p >
         <!-- select标签-多选 使用 multiple 属性 -->
        <p>前女友:
            <select name="" id="" multiple>
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
            </select>
        </p >
         <!-- select标签-多级单选列表 嵌套 <optgroup>标签 -->
       <p>province1:
           <select name="" id="">
               <optgroup label="上海">
                   <option value="">浦东</option>
                   <option value="">黄埔</option>
                   <option value="">青浦</option>
               </optgroup>
               <optgroup label="北京">
                   <option value="">朝阳</option>
                   <option value="">昌平</option>
                   <option value="">沙河</option>
               </optgroup>
               <optgroup label="深圳">
                   <option value="">111</option>
                   <option value="">222</option>
                   <option value="">333</option>
               </optgroup>
           </select>
       </p >
       <!-- 上传文件 multiple属性可支持用户能上传多种文件 -->
        <p>文件:
            <input type="file" multiple>
        </p >
        <!-- 文本输入框 -->
        <p>自我介绍:
            <br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p >
        <input type="submit" value="注册">
        <!--  当你没有使用 value属性 指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致-->
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <button>点我</button>
    </form>

使用python 本地后端接收表单信息（了解即可）

from flask import Flask, request


app = Flask(__name__)


# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求

@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)  # 获取form表单提交过来的非文件数据
    # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
    print(request.files)  # 获取文件数据
    file_obj = request.files.get('myfile.png')
    file_obj.save(file_obj.name)
    return 'OK'

app.run()

表单HTML 的form 需要加上相应属性：

<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

参考阅读：

https://www.cnblogs.com/xiaoyuanqujing/articles/11669926.html

https://www.cnblogs.com/Dominic-Ji/p/10136928.html

相关阅读:
Centos 7环境下配置MySQL 5.7读写分离
 Centos 7环境下安装配置MySQL 5.7
Hadoop 2.8集群安装及配置记录
 ASP.NET Core 1.1版本之Hello word
Hadoop版Helloworld之wordcount运行示例
 SSH配置免密登陆设置汇总
 最小安装模式下Centos7.*网卡启动配置
 骚扰式管理
 项目团队之分工协作
 利用微软AntiXss Library过滤输出字符，防止XSS攻击
原文地址：https://www.cnblogs.com/bigorangecc/p/12874484.html

【2020Python修炼记】前端开发之 HTML常用标签汇总

【目录】 标签&标签属性

1、HTML 注释

2、HTML 文档基础结构

3、head 内常用标签

4、body 内常用标签

1、HTML 注释 （选中内容或者光标置于注释行，快捷键 ctrl+/ ）

2、HTML 文档基础结构 （编辑器里 搭建HTML格式文件 !(英文感叹号)+tab ）

3、head 内常用标签

link 标签

# 属性 href = " 链接地址 "

meta标签

Meta标签介绍：

<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

<meta>标签位于文档的头部，不包含任何内容。

<meta>提供的信息是用户不可见的。

meta标签的组成：

meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

2.name属性:

主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

4、body内常用标签

【补充】

标签默认具有的两个重要属性

1.id值类似于标签的身份证号，在同一个html页面上id值不能重复2.class值该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

标签既可以有默认的属性，也可以有自定义的属性

编辑器里快速编辑标签的技巧——开始标签的后半部分+tab 键（部分编辑器支持）

例如：span 标签

（1）格式排版/文本标签

格式排版标签

文本标签

（2）特殊符号

（3）分块标签

div 块儿级标签span 行内标签

上述的两个标签是在构造页面初期最常使用的, 主要通过 CSS样式为其赋予不同的表现。

# 页面的布局一般先用div和span占位之后再去调整样式

尤其是div使用非常的频繁div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可而普通的文本先用span标签

关于标签嵌套：

通常,块级元素 可以包含 内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含 块级标签，p标签也不能包含 p标签。

（4）img 标签

# 图片标签<img src="" alt="">

#【属性】

src=" 图片路径" 1.图片的路径 可以是本地的也可以是网上的2.url:自动朝该url发送get请求获取数据

(什么是URL？URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。)

alt="图片描述信息"当图片加载不出来的时候 给图片的描述性信息

title="鼠标悬浮停留时，自动提示信息"当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px" width=""

高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

（5）a 标签

# 链接标签<a href=" " target=" " ></a>

"""当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色如果点击过了就会是紫色（浏览器给你记忆了）"""

#【属性】

href=" "1.放url，用户点击就会跳转到该url页面2.放其他标签的id值 点击即可跳转到对应的标签位置

target=" "默认a标签是在当前页面完成跳转 target="_self"

新建页面跳转 target="_blank"

# a标签的锚点功能——使用 id 属性 和 href 属性eg:点击一个文本标题 页面自动跳转到标题对应的内容区域

（6）列表标签

无序列表(使用较多) —— 快捷语法 ul>li*4

有序列表(了解) —— 快捷语法 ol>li*3

type属性：

1 数字列表，默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马

标题列表(了解)

（7）table 表格标签

属性:

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

像素 百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

（8）form 表单标签

form 标签的属性:

input 标签的属性:

name：表单提交时的“键”，注意和id的区别

【目录】标签&标签属性

1、HTML 注释（选中内容或者光标置于注释行，快捷键 ctrl+/ ）

2、HTML 文档基础结构（编辑器里搭建HTML格式文件 !(英文感叹号)+tab ）

1.id值
类似于标签的身份证号，在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

div 块儿级标签
span 行内标签

尤其是div使用非常的频繁
div你可以把它看成是一块区域也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可
而普通的文本先用span标签

通常,块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签，p标签也不能包含 p标签。

# 图片标签
<img src="" alt="">

src=" 图片路径"
1.图片的路径可以是本地的也可以是网上的
2.url:自动朝该url发送get请求获取数据

alt="图片描述信息"
当图片加载不出来的时候给图片的描述性信息

title="鼠标悬浮停留时，自动提示信息"
当鼠标悬浮到图片上之后自动展示的提示信息

height="800px"

width=""

高度和宽度当你只修改一个的时候另外一个参数会等比例缩放
如果你修改了两个参数并且没有考虑比例的问题那么图片就会失真

# 链接标签
<a href=" " target=" " ></a>

"""
当a标签指定的网址从来没有被点击过那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""

href=" "
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值点击即可跳转到对应的标签位置

target=" "
默认a标签是在当前页面完成跳转 target="_self"

# a标签的锚点功能——使用 id 属性和 href 属性
eg:点击一个文本标题页面自动跳转到标题对应的内容区域

像素百分比.（最好通过css来设置长宽）

（8）form 表单标签　