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. 基于蓝图的完整的Flask项目

    其一Flask_Script 安装: pip3 install flask_script flask_script作用: -改变flask的启动方式:python manage.py runserve ...

  2. has(expr|ele)保留包含特定后代的元素，去掉那些不含有指定后代的元素。

    has(expr|ele) 概述 保留包含特定后代的元素,去掉那些不含有指定后代的元素.大理石平台等级 .has()方法将会从给定的jQuery对象中重新创建一组匹配的对象.提供的选择器会一一测试原先 ...

  3. Java面向对象5（V~Z）

    计算各种图形的周长(接口与多态)(SDUT 3338) import java.util.Scanner; public class Main { public static void main(St ...

  4. Python面试题:使用栈处理括号匹配问题

    括号匹配是栈应用的一个经典问题, 题目 判断一个文本中的括号是否闭合, 如: text = "({[({{abc}})][{1}]})2([]){({[]})}[]", 判断所有括 ...

  5. layer提示带文字

    直接撸代码: //加载层-风格4 layer.msg('加载中', { icon: 16 ,shade: 0.01 });

  6. GDB之调试器用法

    GDB 完成的作用: 启动程序,可以按照工程师自定义的要求随心所欲的运行程序 让被调试的程序在工程师指定的断点处停住,断点可以是条件表达式 当程序被停住时,可以检查此时程序中所发生的事,并追索上文 动 ...

  7. Reflexil

    https://github.com/sailro/Reflexil/issues/47 Instructions on how to install Reflexil would be much a ...

  8. python练习-使用163邮箱发送邮件

    具体代码如下> #密码等敏感信息已经用****替换 import smtplib,sys from email.mime.text import MIMEText from email.head ...

  9. pm2 配合log4js处理日志

    1.pm2启动时通常会发现log4js记录不到日志信息: 2.决解方案,安装pm2的pm2-intercom进程间通信模块 3.在log4js的配置文件logger.js里添加如下命令: pm2: t ...

  10. requests和BeautifulSoup模块的使用

    用python写爬虫时,有两个很好用第三方模块requests库和beautifulsoup库,简单学习了下模块用法: 1,requests模块 Python标准库中提供了:urllib.urllib ...