一，HTML介绍

HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。

二，开发环境

市面上有很多的HTML编辑器可以选择，常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。

这里我使用sublime Text 来进行HTML的演示。

文件后缀一般使用.html或.htm .html与.htm均是静态网页后缀名

三，文档结构

<!DOCTYPE HTML>

<html>

    <head>...</head>

    <body>...</body>

</html>

首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档；

  1. <html></html> 称为根标签，所有的网页标签都在<html></html>中。
  2. <head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。
  3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。

HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。

四，head标签

<!DOCTYPE html>

<html lang="en">

<html>

<head>

    1.head 标签

    <!--文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） -->

    2.title 标签

    <!-- 文档的标题 -->

    <title>火影忍者</title>

    3.meta 标签

    <!-- 常用的两个属性 -->

        （1）. http-equiv属性

    <!-- 它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 -->

    <!--指定文档的内容类型和编码类型 -->

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!--重定向 2秒后跳转到对应的网址，注意分号-->

    <meta http-equiv="refresh" content="5;URL=http://www.baidu.com">

    <!--告诉IE浏览器以最高级模式渲染当前网页-->

    <meta http-equiv="x-ua-compatible" content="IE=edge">

        （2）.name属性

    <!-- 主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 -->

    <!-- 为了我们的SEO优化 -->

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

    <meta name="description" content="路飞学城">

    4.link 标签

    <!--引入外部样式表文件-->

    <link rel="stylesheet"type="text/css" href="mystyle.css">

    <!--定义icon图标（网站的图标）-->

    <link rel="icon" href="fav.ico">

    5.style 标签

    <!--定义内部样式表-->

    <style type="text/css">

    </style>

    6.script标签

    <!-- 定义内容脚本文件 -->

    <script type="text/javascript"></script>

    <script src="myscript.js">

    </script>

</head>

<body>

</body>

</html>

五，body标签

1.常用标签一

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="utf-8">

    <title>常用标签一</title>

</head>

<body>

    <div class="p1">

    <p style="height: 2000px"id="p1">顶部</p>

    <!-- 增加2000的高度 -->

    </div>

    <!-- body相关标签 -->

    <div class="heading">

    1.标题标签 h1-h6

        由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。<br>因此，<h3>请不要利用标题标签来改变同一行中的字体大小。</h3>相反，我们应当使用css来定义来达到漂亮的显示效果。

        <hr>

        标题标签通常用来制作文章或网站的标题。

        <!-- heading:标题h1~h6 没有h7标题 -->

        <!-- 块级元素：1.独占一行 2可以设置宽高-->

        <h1>一级标题</h1>

        <h2>二级标题</h2>

        <h3>三级标题</h3>

        <h4>四级标题</h4>

        <h5>五级标题</h5>

        <h6>六级标题</h6>

        <h7>六级标题</h7>

    </div>

    <div class="p1">

    2.段落标签p

        <!-- 文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等...

        1. `<b></b>`：加粗

        2. `<i></i>`：斜体

        3. `<u></u>`：下划线

        4. `<s></s>`：删除线

        5. `<sup></sup>`：上标

        6. `<sub></sub>`：下标 -->

        <p><b>路费学城</b>立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<s>金融分析</s>,人工智能等互联网最前沿技术,开启职业生涯新可能</p>

    </div>

    <div class="anchor">

    3.超链接a标签

        <!-- a标签属于行内标签：在一行显示设置宽高不起作用 -->

        <!-- target

        self:默认值：在当前网站打开资源

        blank:在新网站打开资源 -->

        <a href="https:www.baidu.com"target="blank"title="baidu">百度一下</a>

        <a href="a.zip">下载压缩包</a>

        <a href="mailto:15850526590@163.com">联系我们</a>

        <!-- 转不过去 必须要装个软件什么的-->

        <!-- 返回到页面顶部内容 -->

        <a href="#">跳转到顶部</a>

        <a href="#p1">跳转到顶部标签</a>

        <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，

        而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 -->

        <a href="javascript:alert(1)">内容</a>

        <a href="javascript:;">内容</a>

    </div>

    <div class="lists">

    4.列表标签ul,ol

        <!-- (1).无序列表 type可以定义无序列表的样式-->

        <ul type="none">

            <li>我的账户&nbsp;&nbsp;&nbsp;&gt;</li>

            <li>我的订单&nbsp;&nbsp;&nbsp;&gt;</li>

            <li>我的优惠券&nbsp;&nbsp;&nbsp;&gt;</li>

            <li>我的收藏&nbsp;&nbsp;&nbsp;&gt;</li>

            <li>退出&nbsp;&nbsp;&nbsp;&gt;</li>

        </ul>

        <!-- ul标签的属性： type：列表标识的类型

        disc：实心圆(默认值)

        circle：空心圆

        square：实心矩形

        none：不显示标识 -->

        <!-- (2).有序列表 type可以定义有序列表的样式 -->

        <!-- <ol type="I"> -->

        <ol style="list-style: none">  <!-- 可以看看另外一种隐藏方式 -->

            <li>我的账户</li>

            <li>我的订单</li>

            <li>我的优惠券</li>

            <li>我的收藏</li>

            <li>退出</li>

        </ol>

        <!-- ol标签的属性：

        type：列表标识的类型

        1：数字

        a：小写字母

        A：大写字母

        i：小写罗马字符

        I：大写罗马字符 -->

    </div>

    <div class="image">

    <!-- 1.可以设置宽高2在一行内显示，它叫行内块标签 -->

    5.图片标签img

        <img src="01李.png"alt="洛克李"style="width: 200px;height: 200px">

        <img src="02李.png"alt="洛克李"style="width: 200px;height: 200px">

    </div>

    6.span标签

    <!-- 行内标签-白板 -->

    7.盒子标签div

    <!-- <div>可定义文档的分区 division的缩写 译：区 <div> 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区 -->

    8.其他标签br hr

    <!-- 换行标签 <br>

    <br> --><!-- 标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。

    分割线 <hr>

    <hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容 -->

    9.常用的特殊符号

    <!-- 在上一个实例中，我们演示了HTML中输入空格、回车都是没有作用的。要想输入空格，需要用特殊符号 -- &nbsp;。

     -->

    <!-- 空格    &nbsp;

    >    &gt;

    <    &lt;

    &    &amp;

    ¥    &yen;

    版权    &copy;

    注册    &reg; -->

</body>

</html>

2.常用标签二table

表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>04-body常用标签二-table</title>

</head>

<body>

    <!-- 表格 -->

    <table border="1"cellspacing="0">  <!-- border边框 cellspacing间隙 -->

        <!-- 表格头 -->

        <thead>

            <tr>

                <!--表格列，【注意】这里使用的是th-->

                <th></th>

                <th>星期一</th>

                <th>星期二</th>

                <th>星期三</th>

                <th>星期四</th>

                <th>星期五</th>

            </tr>

        </thead>

        <!-- 表格主题 -->

        <tbody>

            <tr>

            <!-- 表格主题的每一行 -->

                <!--表格列，【注意】这里使用的是td-->

                <td rowspan="3">上午</td>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>化学</td>

                <td>生物</td>

            </tr>

            <tr>

            <!-- 表格主题的每一行 -->

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>化学</td>

                <td>生物</td>

            </tr>

            <tr>

            <!-- 表格主题的每一行 -->

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>化学</td>

                <td>生物</td>

            </tr>

            <tr>

            <!-- 表格主题的每一行 -->

                <td rowspan="2">下午</td>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>化学</td>

                <td>生物</td>

            </tr>

            <tr>

            <!-- 表格主题的每一行 -->

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>化学</td>

                <td>生物</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="6">课程表</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

3.常用标签三form

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>表单控件</title>

</head>

<body>

    <div class="form">

        <!-- form 标签是块级元素 被提交-->

        <form action="https://www.baidu.com"method="get">

            <p>

                <!-- label标签是行内元素 -->

                <label for="user">用户名:</label>

                <input type="text" name="username"id="user"

                placeholder="请输入用户名">

            </p>

            <p>

                <label for="password">密码:</label>

                <input type="password" name="password"id="password"

                placeholder="请输入密码">

            </p>

            <!-- 1.单选框 checked是默认值，要产生互斥效果，name值要相同-->

            <p>

                用户性别：

                <input type="radio" name="sex"value="男"checked="男">男

                <input type="radio" name="sex"value="女">女

            </p>

            <!-- 2.复选框 -->

            <p>

                用户的爱好：

                <input type="checkbox" name="checkfav"value="吃">吃

                <input type="checkbox" name="checkfav"value="喝">喝

                <input type="checkbox" name="checkfav"value="玩">玩

                <input type="checkbox" name="checkfav"value="乐">乐

            </p>

            <p>

                <!-- 3.文件上传 -->

                <input type="file" name="textFile">

            </p>

            <p>

                <!-- 4.文本域 -->

                <textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea>

            </p>

            <p>

                <!-- 5.下拉列表 -->

                <select name="sel" size="3">

                    <option value="深圳">深圳</option>

                    <option value="沙河">沙河</option>

                    <option value="北京">北京</option>

                    <option value="山东">山东</option>

                    <option value="福建">福建</option>

                </select>

            </p>

            <p>

                <!-- 6.显示普通按钮 disabled禁用按钮，可以不填值-->

                <input type="button" name="btn"value="提交"disabled="">

                <!-- 7.重置按钮 -->

                <input type="reset" name="">

                <!-- 8.提交form表单使用type=submit按钮-->

                <input type="submit" name="btn"value="submit">

            </p>

        </form>

        <!-- 按钮 -->

        <button type="button">按钮</button>

    </div>

</body>

</html>

六，标签分类与嵌套规则

（1）标签分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

常用的块状元素：

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

块级元素特点：display:block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的行内元素：

<a> <span> <br> <i> <em> <strong> <label>

行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的行内块状元素：

<img> <input>

行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置

（2）嵌套规则

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：

<div><div></div><h1></h1><p><p></div> ️

<a href=”#”><span></span></a> ️

<span><div></div></span>

块级元素不能放在p标签里面，比如

<p><ol><li></li></ol></p>

<p><div></div></p>

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p

li元素可以嵌入ul，ol，div等标签

感谢观看，如有不对，一定要指出。小木在这里谢谢了

HTML基本介绍与操作的更多相关文章

  1. git介绍-常用操作（一）

    Table of Contents 1  系列文章 2  git说明 3  git常用命令 3.1  基本操作 3.2  远程操作 4  查看git的配置 4.1  查看已配置项 4.2  其他配置 ...

  2. Python之路Day12--mysql介绍及操作

    上节回顾: 1. RabbitMQ a. 平均分发 b. perfetch = 1 c. durable 队列持久化  deliver_mode = 2 消息持久化 d. 1对多广播  exchang ...

  3. spring对数据库的操作、spring中事务管理的介绍与操作

    jdbcTemplate的入门 创建maven工程 此处省略 导入依赖 <!-- https://mvnrepository.com/artifact/org.springframework/s ...

  4. SQL 介绍和操作

    1.什么是SQL SQL的全称是“结构话查询语句”(Structured Query Language ),是1974年有Boyce和chamberlin 提出来的.经过多年的发展,SQL语言已经成为 ...

  5. ELK学习实验004：Elasticsearch的简单介绍和操作

    一 集群节点 Elstaicsearch的集群是由多个节点组成都,通过cluster.name设置集权名称,比能切用与区分其他的集群,每个节点通过node.name指定节点 在Elasticsearc ...

  6. 5.List链表类型介绍和操作

    数据类型List链表 (1)介绍 list类型其实就是一个双向链表.通过push,pop操作从链表的头部或者尾部添加删除元素.这使得list既可以用作栈,也可以用作队列. 该list链表类型应用场景: ...

  7. SQL Server 索引(index) 和 视图(view) 的简单介绍和操作

    --索引(index)和视图(view)-- --索引(index)----概述: 数据库中的索引类似于书籍的目录,他以指针形式包含了表中一列或几列组合的新顺序,实现表中数据库的逻辑排序.索引创建在数 ...

  8. 数据字典生成工具之旅(3)：PowerDesign文件组成结构介绍及操作

    从这篇开始将正式讲解整个重要部分的实现细节,本篇讲解Pdm文件的解析.其实PDM文件就是XML文件,可以用Editplus或者VS打开查看.了解到这一点之后大家就能猜到,可以用解析XML的方式读取PD ...

  9. C#核编之字符串类型介绍与操作

    一.关于字符串操作的方法 System.String类提供了很多工具方法,包括返回字符数据长度,查找当前字符串中的子字符串和转换大小写等方法. 在String类中常用的比较字符串的方法主要有Compa ...

  10. C# 字符串类型介绍与操作

    一.关于字符串操作的方法 System.String类提供了很多工具方法,包括返回字符数据长度,查找当前字符串中的子字符串和转换大小写等方法. 在String类中常用的比较字符串的方法主要有Compa ...

随机推荐

  1. OpenLayers结合JSTS实现空间运算

    1. 引言 空间运算利用几何函数来接收输入的空间数据,对其进行分析,然后生成输出数据,输出数据为针对输入数据执行分析的派生结果. 可从空间运算中获得的派生数据包括: 作为输入要素周围缓冲区的面 作为对 ...

  2. net core 依赖注入DI

    控制反转:Inversion Of Control,简称 IOC,是面向对象中的一种设计原则,调用者不自己new实例,而是交给容器去创建,可以减轻代码的耦合度. 依赖注入:Dependency Inj ...

  3. 《HelloTester》第2期

    1.前言 饭前喝汤:如果你的月薪低于1万,不要总想着"新机会",而更加重要的是"练手艺".当你有了一定的手艺可以施展,机会自然存在! 读了之前的简历篇,我想你对 ...

  4. B树，B-树，B+树和B*树

    B树和B-树(平衡多路查找树)规则:1.排序方法:所有结点关键字按递增次序,并遵循左小右大的原则.2.子结点数:非叶子结点的子结点数>1且<=M且M>=2,空树除外(M阶代表一个树的 ...

  5. rn项目启动时卡在Task :app:checkDebugAarMetadata

    原因是Gradle在下载依赖,打开Android Studio就可以看到右下角在下载.

  6. SAP VL02N 字段不允许编辑

    METHOD if_ex_le_shp_delivery_proc~change_field_attributes. data: ls_field_attributes type shp_screen ...

  7. Appium的触屏操作&设备交互api

    Appium的触屏操作 TouchAction---Appium 2.0以上不在可以使用 官网地址:https://github.com/appium/appium/blob/master/docs/ ...

  8. [JavaScript]内置对象Number初识

    学习:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number Number 类型 ...

  9. Vue项目使用/deep/报错：SassError: expected selector解决方案--亲测有效

    项目npm run dev报错如下: 解决方法: 尝试用 ::v-deep 替换 /deep/ ,成功解决了问题. 效果如下图所示(完美解决~) 某些预处理器(例如Sass)可能无法>>& ...

  10. python读取图片相关属性

    背景:工作中用到一些基础的图片处理的任务,比如获取图片宽高.获取图片的旋转角度等等图片属性,都是比较零散的,这里简单做个记录备忘 这里用到的库exifread,安装 pip isntall exifr ...