HTML(HyperText Markup Language )又称超文本标记语言，与一般文本文件不同的是它是由各种标签或标记组成 <标签名></标签名> 。所以html的学习实质上就是对于标签的学习。

一、html5的基本骨架

1first.html

 <!DOCTYPE html>   ------> DTD 文档类型声明 h5

 <html lang="en">

 <head>

     <meta charset="UTF-8">  ------>字符集

     <title>Document</title>  ------>网页标题

 </head>

 <body>

     This is a first page!!!   ------>body一般放网页真正显示的内容

 </body>

 </html>

现在市场上都是h5，所以只需要掌握住h5的文件格式就可以了，并且这个骨架是不需要背诵的，在vscode中只要新建一个以.html后缀的html文件，然后输入一个!再回车即可自动构建（!+enter）。

二、常用标签

2.1 标题h1-h6以及段落p

2tag.html

     <h1>一级标签</h1>

     <h2>二级标签</h2>

     <h3>三级标签</h3>

     <h4>四级标签</h4>

     <h5>五级标签</h5>

     <h6>六级标签</h6>

     <p>这是第一段</p>

     <p>这是第二段</p>

     <!--h是一个容器标签，里面可以进行嵌套其他标签诸如p、span、a、img-->

     <h1>

         <p>嵌套在h1中的p段落</p>

     </h1>

     <!--不允许这么使用 p里面不可以嵌套h-->

     <!-- <p><h1>嵌套在p段落中的h1</h1></p>-->

实现效果：

2.2 超链接a

2.2.1 跳转页面

3link.html

  <!--

         超链接 a

              href 表示链接跳转地址 可以是网址也可以是本地资源文件地址  必须要写的属性

              title 表示悬停文本

              target 表示以何种窗口打开 假如其值是_blank新窗口打开

 -->

     <a href="http://www.baidu.com" title="点击搜索" target="_blank">百度一下</a>

2.2.2 作为锚点

3link.html

 <p><a name="p1"></a>人类的大脑虽称是一个整体，但却有很多分支他控制着我们身体各种情绪，最近我有看过一部迪士尼的动漫电影

         《头脑特工队》里面有各种情绪害怕、愤怒、快乐、谨慎、忧虑，身体不被有我们主导而是被大脑里面的各种情绪控制，

         我说的便是任何来控制这些情绪来达到自律。</p>

     <p>我们先拿最常见早起、减肥、戒烟、戒酒。其实你自己知道自己在干什么，却控制不住自己的行为，

         这种行为和你本身内在的意识产生冲突，我帮助大家的就是在这个时间段做出正确的决定，克制身体里面的冲动。</p>

     <p>三思而后行，这是我最近看的一本书教给我的给了我极大的帮助，他可以帮助我克制最近在正确的时间段做出正确的事情-自律。</p>

     <p>好!现在我们给自己定一个小目标，营养学家推荐：人一天摄入的糖分为6勺40克，一罐可乐里面含糖分37克。

         经常超过这个摄入量会对牙齿不好，并且容易长胖，增加患糖尿病和高血压的风险。我们定的小目标是一周内部不要喝饮料，

         只能和白开水喝矿泉水。这个目标很容易完成，并且达到。但如果你连这个条件都完成不了，那可能你的左脑比右脑活跃很多，

         非常容易意气用事，非常需要方法来克制。</p>

     <p>-----------------------------</p>

     <p>人类的大脑虽称是一个整体，但却有很多分支他控制着我们身体各种情绪，最近我有看过一部迪士尼的动漫电影

             《头脑特工队》里面有各种情绪害怕、愤怒、快乐、谨慎、忧虑，身体不被有我们主导而是被大脑里面的各种情绪控制，

             我说的便是任何来控制这些情绪来达到自律。</p>

         <p>我们先拿最常见早起、减肥、戒烟、戒酒。其实你自己知道自己在干什么，却控制不住自己的行为，

             这种行为和你本身内在的意识产生冲突，我帮助大家的就是在这个时间段做出正确的决定，克制身体里面的冲动。</p>

         <p>三思而后行，这是我最近看的一本书教给我的给了我极大的帮助，他可以帮助我克制最近在正确的时间段做出正确的事情-自律。</p>

         <p>好!现在我们给自己定一个小目标，营养学家推荐：人一天摄入的糖分为6勺40克，一罐可乐里面含糖分37克。

             经常超过这个摄入量会对牙齿不好，并且容易长胖，增加患糖尿病和高血压的风险。我们定的小目标是一周内部不要喝饮料，

             只能和白开水喝矿泉水。这个目标很容易完成，并且达到。但如果你连这个条件都完成不了，那可能你的左脑比右脑活跃很多，

             非常容易意气用事，非常需要方法来克制。</p>

         <p>-----------------------------</p>

         <p>人类的大脑虽称是一个整体，但却有很多分支他控制着我们身体各种情绪，最近我有看过一部迪士尼的动漫电影

                 《头脑特工队》里面有各种情绪害怕、愤怒、快乐、谨慎、忧虑，身体不被有我们主导而是被大脑里面的各种情绪控制，

                 我说的便是任何来控制这些情绪来达到自律。</p>

             <p>我们先拿最常见早起、减肥、戒烟、戒酒。其实你自己知道自己在干什么，却控制不住自己的行为，

                 这种行为和你本身内在的意识产生冲突，我帮助大家的就是在这个时间段做出正确的决定，克制身体里面的冲动。</p>

             <p>三思而后行，这是我最近看的一本书教给我的给了我极大的帮助，他可以帮助我克制最近在正确的时间段做出正确的事情-自律。</p>

             <p>好!现在我们给自己定一个小目标，营养学家推荐：人一天摄入的糖分为6勺40克，一罐可乐里面含糖分37克。

                 经常超过这个摄入量会对牙齿不好，并且容易长胖，增加患糖尿病和高血压的风险。我们定的小目标是一周内部不要喝饮料，

                 只能和白开水喝矿泉水。这个目标很容易完成，并且达到。但如果你连这个条件都完成不了，那可能你的左脑比右脑活跃很多，

                 非常容易意气用事，非常需要方法来克制。</p>

             <p>-----------------------------</p>

             <p>人类的大脑虽称是一个整体，但却有很多分支他控制着我们身体各种情绪，最近我有看过一部迪士尼的动漫电影

                     《头脑特工队》里面有各种情绪害怕、愤怒、快乐、谨慎、忧虑，身体不被有我们主导而是被大脑里面的各种情绪控制，

                     我说的便是任何来控制这些情绪来达到自律。</p>

                 <p>我们先拿最常见早起、减肥、戒烟、戒酒。其实你自己知道自己在干什么，却控制不住自己的行为，

                     这种行为和你本身内在的意识产生冲突，我帮助大家的就是在这个时间段做出正确的决定，克制身体里面的冲动。</p>

                 <p>三思而后行，这是我最近看的一本书教给我的给了我极大的帮助，他可以帮助我克制最近在正确的时间段做出正确的事情-自律。</p>

                 <p>好!现在我们给自己定一个小目标，营养学家推荐：人一天摄入的糖分为6勺40克，一罐可乐里面含糖分37克。

                     经常超过这个摄入量会对牙齿不好，并且容易长胖，增加患糖尿病和高血压的风险。我们定的小目标是一周内部不要喝饮料，

                     只能和白开水喝矿泉水。这个目标很容易完成，并且达到。但如果你连这个条件都完成不了，那可能你的左脑比右脑活跃很多，

                     非常容易意气用事，非常需要方法来克制。</p>

                 <p><a name="last"></a>-----------------------------</p>

     <a href="#p1">跳转到第一段</a>

     <!--#锚点名 会自动去寻找名称为锚点名的超链接-->

虽然上面贴了很多代码，但重点在于1行和45行。网页中点击45行形成的超链接，会自动寻找该页面中名为p1的a标签。也可以进行页面间锚点的设定，如在：

2tag.html 中添加一行html代码

 <!--a链接也可以做锚点-->

     <a href="3link.html#last">跳转到3link最后一段</a>

点击该超链接浏览器会去3link.html下寻找名为last的a标签。

2.3 图片img

在 4img.html同一目录文件下新建一个文件夹images，往里面放入一张图片duola.jpg

4img.html

  <!-- img

         <img src="路径" title="悬停文本" alt="图片资源加载失败 显示这里文字"/>

         相对路径 从自身出发

                 1 当资源文件和自身处于同一级目录下 路径直接写文件名(后缀名需要写完整)

                 2 当资源文件所在文件夹与自身处于同一级目录下 路径需要加上文件夹

                 .当前目录  ..上一级目录  ../../

         绝对路径 一般是带盘符的或者具体url地址 -->

     <img src="data:images/duola.jpg" />

     <img src="https://www.baidu.com/img/bd_logo1.png" title="百度" alt="这里是百度" />

实现效果：

2.4 列表

5list.html

 <h1>中国直辖市</h1>

     <!-- 无序列表 ul的儿子只能是li ,li的父亲是ul,li可以放任何东西，li也是容器级标签-->

     <ul>

         <li>北京

             <ul>

                 <li>海淀区</li>

                 <li>朝阳区</li>

             </ul>

         </li>

         <li>上海</li>

         <li>重庆</li>

         <li>深圳</li>

     </ul>

     <!-- 有序列表（不常用） -->

     <ol>

         <li>Lily</li>

         <li>Tom</li>

         <li>Jerry</li>

         <li>Cary</li>

     </ol>

     <!-- 自定义列表 -->

     <dl>

         <dt>刘德华</dt>

         <dd>歌曲：《忘情水》、《独自去偷欢》</dd>

         <dd>电影：《天下无贼》</dd>

         <dt>张学友</dt>

         <dd>歌曲：《吻别》、《情网》</dd>

     </dl>

实现效果：

2.5 表格table

6table.html

 <table border="1">

         <!-- 快捷生成 tr>td*3 -->

         <tr>

             <!--th标题行，默认加粗且居中-->

             <th>姓名</th>

             <th>学号</th>

             <th>专业</th>

         </tr>

         <!--tr定义行-->

         <tr>

             <!--td定义列-->

             <td>1-1</td>

             <td>1-2</td>

             <td>1-3</td>

         </tr>

         <tr>

             <td>2-1</td>

             <td>2-2</td>

             <td>2-3</td>

         </tr>

         <tr>

             <td>3-1</td>

             <td>3-2</td>

             <td>3-3</td>

         </tr>

     </table>

     <!--多行/多列-->

     <table border="1">

         <tr>

             <td>1-1</td>

             <td>1-2</td>

             <td>1-3</td>

         </tr>

         <tr>

             <td colspan="2">2-1</td>

             <td rowspan="2">2-3</td>

         </tr>

         <tr>

             <td>3-1</td>

             <td>3-2</td>

         </tr>

     </table>

     <!--完整表格结构 如果没有指定thead,默认全部都在tbody标签下-->

     <!--可以使用h标签做表格名，但推荐使用table自带标签caption-->

     <!-- <h3>学生信息表</h1> -->

     <table border="1">

         <caption>学生信息表</caption>

         <thead>

             <tr>

                 <th>学号</th>

                 <th>姓名</th>

                 <th>班级</th>

             </tr>

         </thead>

         <tbody>

             <tr>

                 <td>001</td>

                 <td>张三</td>

                 <td>电信一班</td>

             </tr>

             <tr>

                 <td>002</td>

                 <td>李四</td>

                 <td>电信二班</td>

             </tr>

         </tbody>

     </table>

实现效果：

【HTML】常用的标签学习的更多相关文章

  1. 【HTML】常用的标签学习（2）

    现在的使用的html语言都是h5,但是h5也是从h4继承发展来的,所以h4的标签我们也要学习,然后加上h5新增的标签,那么html这门语言才算学习完毕.上次学习了h4的一些常用标签,今天学习h4剩下的 ...

  2. java struts2入门学习--OGNL语言常用符号和常用标签学习

    一.OGNL常用符号(接上一篇文章): 1.#号 1)<s:property value="#request.username"/> 作用于struts2的域对象,而不 ...

  3. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

  4. HTML基础标签学习

    HTML基础学习 前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...

  5. 常用HTML标签元素结合及简介

    常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息< ...

  6. 标签语义化之常用HTML标签

    一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...

  7. phpcms v9 常用调用标签（全）

    本文介绍phpcms v9中模板标签使用说明. {template ) {==}   {/,,)}     loop是data的时候用{thumb($v[thumb],,)} 分页标签------{$ ...

  8. 常用meta标签举例说明

    本文是作者从百度百科和其他从网页中搜索到的资料,经综合整理,把常用meta标签列举并示例说明,仅供参考. 1.<meta charset="UTF-8"> --- ch ...

  9. 我给女朋友讲编程html系列(4) -- html常用简单标签

    今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...

随机推荐

  1. 02—EF初次体验

    新建个表,我用的是sql server2014,我会把文件发上来,如果是低版本的,可以执行语句,数据库就自己创建吧. USE [testdb] GO CREATE TABLE [dbo].[Produ ...

  2. Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化

    引言 在数据库存在外键的其情况下,使用select_related()和prefetch_related()很大程度上减少对数据库的请求次数以提高性能 1.实例准备 模型: from django.d ...

  3. 11 canvas 画布 - 基础

    一.概述 canvas它和其它的HTML5标签的使用基本一致,但是它相当于在浏览器中建立一个画布,可以再这个画布上画图.创建动画甚至是3D游戏.由于canvas要适配不同终端的分辨率,所以尽可能的在标 ...

  4. playbook 实例

    vim ~/.vimrc autocmd FileType yaml setlocal sw=2 ts=2 et ai 变量使用及错误处理 --- - hosts: db remote_user: r ...

  5. python中装饰器（语法糖）概念

    “”“” 什么是装饰器? """ 还是通过一个例子来慢慢说明 先看下面的例子 def func_1(x): return x*2 def fun_2(x): return ...

  6. Xilinx的IP核接口命名说明

    s_axis中的s表示:slave(从); m_axis中的m表示:master(主). axis表示AXI(一种总线协议) Signal.

  7. pyqt5的简单进度条程序

    # -*- coding: utf-8 -*- # @Author : FELIX # @Date : 2018/5/17 16:43 from PyQt5.QtCore import QBasicT ...

  8. Java源码分析-UUID

    原文链接:Little Apple's Blog 本文分析的JDK版本为1.8.0_131. UUID? UUID是Universally Unique Identifier的缩写:Java UUID ...

  9. 【java设计模式】-00目录

    开篇 [java设计模式]-01设计模式简介 创建型模式: [java设计模式]-02工厂模式(Factory Pattern) [java设计模式]-03抽象工厂模式(Abstract Factor ...

  10. 实例分析jdom和dom4j的使用和区别 （转）

    实例分析jdom和dom4j的使用和区别   对于xml的解析和生成,我们在实际应用中用的比较多的是JDOM和DOM4J,下面通过例子来分析两者的区别(在这里我就不详细讲解怎么具体解析xml,如果对于 ...