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. LaTeX新人使用教程[转载]

    LaTeX新人教程,30分钟从完全陌生到基本入门 by Nan 对于真心渴望迅速上手LaTeX的人,前言部分可以跳过不看. 本教程面向对LaTeX完全无认知无基础的新人.旨在让新人能够用最简单快捷的方 ...

  2. Windows 刷新系统图标缓存

    rem 关闭Windows外壳程序explorer taskkill /f /im explorer.exe rem 清理系统图标缓存数据库 attrib -h -s -r "%userpr ...

  3. redistempalate的超时设置的操作更新

    redistempalate的超时设置时,一定要每次用set写入时,更新超时,默认是不会自动更新的. 例如: int tempTime = this.redisTemplate.getExpire(& ...

  4. python--openCV--其它

    t1=cv2.getTickCount() # 记录当前时间,以时钟周期计算 t2=cv2.getTickFrequency() #返回时钟周期,返回CPU的频率,返回CPU一秒中所走的时钟周期数

  5. 11 git第二部分（未完成）

    https://www.cnblogs.com/shangchunhong/p/9444335.html

  6. Spring@PostConstruct和@PreDestroy注解详解

    @PostConstruct注解使用 @PostConstructApi使用说明 The PostConstruct annotation is used on a method that needs ...

  7. node中的http内置模块

    Node.js开发的目的就是为了用JavaScript编写Web服务器程序.因为JavaScript实际上已经统治了浏览器端的脚本,其优势就是有世界上数量最多的前端开发人员.如果已经掌握了JavaSc ...

  8. node中的stream（流）内置模块

    stream是Node.js提供的又一个仅在服务区端可用的模块,目的是支持“流”这种数据结构. 什么是流?流是一种抽象的数据结构.想象水流,当在水管中流动时,就可以从某个地方(例如自来水厂)源源不断地 ...

  9. python3连接redis数据库

    1.python想操作redis,需要安装第三方模块(我是在windows下进行操作的) pip install redis 2.连接数据库 #coding:utf-8 import redis r  ...

  10. div设置百分比高度 宽度

    给div按百分比设置高度 宽度两种方法: 第一种是给body标签设置他的高度值,xxxpx,div就会根据body的像素值取百分比: 第二种方法就是在div属性中加入 position:absolut ...