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. spring @Primary-在spring中的使用(转)

    在spring 中使用注解,常使用@Autowired, 默认是根据类型Type来自动注入的.但有些特殊情况,对同一个接口,可能会有几种不同的实现类,而默认只会采取其中一种的情况下 @Primary ...

  2. Java数据库小项目01--实现用户登录注册

    先实现数据库和数据表,检测正常后再做其他的 CREATE TABLE users( username ) NOT NULL, PASSWORD ) NOT NULL); INSERT INTO use ...

  3. toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

    toggle([speed],[easing],[fn]) 概述 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为 ...

  4. ARM编辑、编译工具

    手动编译 编译器问题,肯定是GNU的大名鼎鼎的GCC了,与此相关的什么连接器,汇编器也都包含在内了. 针对arm的GCC,当然就是arm-linux-gcc了,我所用的版本就是友善之臂光盘自带arm- ...

  5. Java进阶知识12 Hibernate多对多双向关联（Annotation+XML实现）

    1.Annotation 注解版 1.1.应用场景(Student-Teacher):当学生知道有哪些老师教,老师也知道自己教哪些学生时,可用双向关联 1.2.创建Teacher类和Student类 ...

  6. 小米 oj 马走日 （bfs 或 双向bfs）

     马走日 序号:#56难度:困难时间限制:1500ms内存限制:10M 描述 在中国象棋中,马只能走日字型.现在给出一个由 N*M 个格子组成的中国象棋棋盘( 有(N+1)*(M+1)个交叉点可以落子 ...

  7. Django-内置的auth模块

    一.auth认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Django作为一个 ...

  8. springMVC课程笔记（一）springMVC架构原理分析

    一.springMVC架构原理分析 1.先搞清楚什么是springMVC: 其实springMVC是spring框架中的一个模块,springMVC和spring无需通过中间整合层整合,SpringM ...

  9. Oracle用户被锁解决方法

    .查看用户的proifle是哪个,一般是default: sql>SELECT username,PROFILE FROM dba_users; .查看指定概要文件(如default)的密码有效 ...

  10. Java实验报告（一）

    Java实验报告(一) 实验过程 1. 打印输出所有的"水仙花数",所谓"水仙花数"是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个" ...