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. win10 LTSC 2019 激活

    win 10 打开终端 1.slmgr -ipk M7XTQ-FN8P6-TTKYV-9D4CC-J462D 2.slmgr -skms kms.03k.org 3.slmgr -ato 4. slm ...

  2. PLSQL打开文件中文出现乱码

    假定数据库使用的是:American_America.AL32UTF8字符集. 查询方式:SELECT * FROM v$nls_parameters ; 查看NLS_CHARACTERSET 的值是 ...

  3. 【python爬虫】 爬云音乐我和xxx共同听过的歌曲

    闲聊的时候,觉得,想写个爬虫,爬下2个人共同听过的歌曲有哪些,然后一鼓作气,花了一个多小时,写了一个.支持最近一周和所有时间,需要用户没有关闭听歌排行显示 How to start 使用到的工具是Se ...

  4. BZOJ 1188 / Luogu P3185 [HNOI2007]分裂游戏 (SG函数)

    题意 有n个格子,标号为0 ~ n-1,每个格子上有若干石子,每次操作可以选一个0 ~ n-2的格子上的一颗石子,分裂为两颗,然后任意放在后面的两个格子内,这两个格子可以相同.求使先手必胜的第一步的方 ...

  5. 02_pip区别： linux环境下python2，python3的

    1.pip与pip3理解 centos中,我的pip与pip3都是python2.7的,所以无法安装成功,总是安装成python2的 [root@IP ~]# pip -V pip /site-pac ...

  6. PHP实现yii项目转发有哪几种方法?

    header("location: index.php"); 如果header后面有代码, 会执行, 如果不想执行, 则加上exit;或者die();等, 应该可以应用到yii项目 ...

  7. yii框架学习(获取插入后的id)

    插入单条数据, 获取插入数据的id. $model->attributes['id']; new  model 添加数据的时候, 需要注意, 如果是想要循环添加多条数据的情况, new mode ...

  8. 将.py脚本打包成.exe

    https://www.cnblogs.com/wyl-0120/p/10823102.html 为了方便使用,通过pyinstaller对脚本进行打包成exe文件. pip3 install pyi ...

  9. table表格合并列中相同的内容

    方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  10. [Linux命令]curl命令参数详解——转载

    linux curl是通过url语法在命令行下上传或下载文件的工具软件,它支持http,https,ftp,ftps,telnet等多种协议,常被用来抓取网页和监控Web服务器状态.curl命令参数介 ...