一、HTML标签

　　所谓的HTML的标签就是发明者认为定义好的一些单词，就相当于我们汉语中的字

二、HTML的语法

　　语法就是用来定义这些“字”应该如何解析或者书写的规则

三、常见标签及基本语法

　　1.人为的将HTML的标签分为单标签和双标签

　　　　<标签名称></标签名称>-----双标签

　　　　<标签名称   />----单标签

　　　　注意：在HTML书写中，标签可以进行嵌套，但不能进行交叉嵌套

　　2.常见标签

　　　　（1）标题标签：在HTML中认为定义了六种标题标签，分别为h1~h6的双标签，在一个网页当中只允许出现一个标题标签

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>HTML5</title>
  6.     </head>
  7.     <body>
  8.         <h1>从今天开始学习HTML</h1>
  9.         <h2>先自我介绍一下</h2>
  10.         <h3>我叫coco</h3>
  11.         <h4>来自中国</h4>
  12.         <h5>今后我们一起学习</h5>
  13.         <h6>请多关照</h6>
  14.     </body>
  15. </html>

　　　　　　

（2）段落标签：p标签，<p></p>双标签

　　添加注释的格式<!--中间是注释的内容-->，也可以使用快捷键，选中需要加注释的内容，按Ctrl+问号（英文输入法下），要去掉注释用同样的操作

　　注意：1.在HTML编写的过程中，我们手动的敲换行是没有用的 2.无论我们敲多少空格，在显示时只显示一个 3.每个P标签中是一个段落

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>HTML5</title>
  6.     </head>
  7.     <body>
  8.         <h1>静夜思</h1>
  9.         <!--1.在HTML编写的过程中，我们手动的敲换行是没有用的 2.无论我们敲多少空格，在显示时只显示一个 3.每个P标签中是一个段落-->
  10.         <p>窗前明月光</p>
  11.         <p>疑是地上霜</p>
  12.         <p>举头望明月</p>
  13.         <p>低头思故乡</p>
  14.     </body>
  15. </html>

（3）换行标签：<br/>单标签

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>HTML5</title>
  6.     </head>
  7.     <body>
  8.         <h1>静夜思</h1>
  9.         <p>
  10.             窗前明月光
  11.             <br/>
  12.             疑是地上霜
  13.             <br/>
  14.             举头望明月
  15.             <br/><br/><br/>
  16.             低头思故乡
  17.         </p>
  18.     </body>
  19. </html>

（4）添加空格（&nbsp;）,一个空格占一个字节

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>HTML5</title>
  6.     </head>
  7.     <body>
  8.         <h1>HTML学习总结</h1>
  9.         <p>
  10.             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</n>我最近在学习HTML，今天的学习内容是HTML的基本语法和常见标签的使用
  11.             </br>
  12.             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML的标签分为两类：单标签和双标签，双标签格式是<标签名称></标签名称>双标签成对出现，有开始有结束，单标签格式是</标签名称>，还学习了标题标签，h1~h6,双标签，分别表示不同的字体大小，建议一个网页中只使用一个h1标签，因为浏览器在进行索引是一般是对h1标签进行索引
  13.         </p>
  14.     </body>
  15. </html>

（5）图片标签：img单标签这个标签的作用就是在网页当中插入图片，图片与HTML都是独立的文件，想在网页中显示图片，需要借助img标签将一个网页外部的图片拿到网页当中进行展示

<img src="" >在这个标签当中，我们可以发现，与p标签相比较多了一些东西，我们将这些东西称之为标签属性

a.标签属性与标签名之间用空格隔开

b.标签属性由属性名和属性值两部分组成，属性名和属性值用单等号进行连接

c.属性值需要放在引号中，单引号和双引号，引号要成对出现，如果属性值是数字，那么引号可以去掉

d.一个标签身上可以有多个属性，每个属性之间用空格隔开

e.src是img标签的一个属性，用来表示图片想要加载的地址

图片常见的属性

src:src是img标签的一个属性，用来表示图片想要加载的地址

alt:当图片加载不出来时，会显示这里面的文字

width/height:设置图片的宽度和高度，如果只设置高度或宽度，图片的另外一边会自动缩放

title：当鼠标悬停在图片上时，会显示这里面的文字

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>HTML5</title>
  6.     </head>
  7.     <body>
  8.         <h1>白雪公主</h1>
  9.         <img src="src/t014c45eaaa2508bc3e.webp.jpg" >
  10.     </body>
  11. </html>

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>常见图片标签的属性</title>
  6.     </head>
  7.     <body>
  8.         <!-- 正常的图片 -->
  9.         <img src="src/t014c45eaaa2508bc3e.webp.jpg" >
  10.         <!-- 设置图片的宽度 -->
  11.         <img src="src/t014c45eaaa2508bc3e.webp.jpg" width="200" >
  12.         <!-- 设置了高度的标签 -->
  13.         <img src="src/t014c45eaaa2508bc3e.webp.jpg" height="400" >
  14.         <!-- 同时设置了高度和宽度的标签 -->
  15.         <img src="src/t014c45eaaa2508bc3e.webp.jpg" width="100" height="400">
  16.         <!-- 设置了标题的标签 -->
  17.         <img src="src/t014c45eaaa2508bc3e.webp.jpg"  title="白雪公主" >
  18.         <!-- 当图片显示不出来时，用alt属性来显示图片未加载出来 -->
  19.         <img src="src/t014c45eaaa2508bc1e.webp.jpg" alt="这是一张图片">
  20.     </body>
  21. </html>

　　

HTML之基本语法（段落标签、标题标签、空格标签、换行标签、图片标签和图片的基本属性）的更多相关文章

  1. 正则去掉html标签之间的空格、换行符、tab符，但是保留html标签内部的属性空格

    今天遇到一个比较少见的去空格: 正则去掉html标签之间的空格.换行符.tab符,但是保留html标签内部的属性空格 JS 举例: "<a href='baidu.com' name= ...

  2. 帝国cms一键排版删除段落前两个空格和换行符

    打开网站根目录下e\class\function.php文件:一.删除两个空格: 搜索:$nbsp=' '; 改为:$nbsp=''; 二.删除<br>换行符 搜索: $ok='<b ...

  3. 块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）

    <html> <head> <meta charset="utf-8"> <title>块级标签</title> < ...

  4. H5的段落标签、图片标签、列表标签与链接标签

    段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...

  5. [19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接

    一.实体(转义字符) 在HTML中,一些诸如<.> 就是普通的小于号和大于号不能直接使用,因为浏览可能会把它当成一个标签去解析,所以需要一些特殊字符去表示这些特殊字符, 这些字符我们称他们 ...

  6. 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6

    标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...

  7. 帝国CMS万能标签标题截取后自动加入省略号

    帝国CMS万能标签标题截取后自动加入省略号,没有达到字数的则不加省略号完美解决方案1.打开e/class/connect.php  搜索 if(!empty($subtitle))//截取字符  大约 ...

  8. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  9. HTML中的属性、段落、标题、换行等

    HTML的属性html标签的属性总是以名称/值(name＝“value”)的方式出现:属性总是在html元素的开始标签中规定: 1.html链接由<a>标签定义,url在href中指定:& ...

随机推荐

  1. ECMA 上传文件到SHarePoint 文档库

    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/ ...

  2. Xilinx SDSoc 加载opencv库

    Xilinx SDSoc 加载opencv库需要下载两个文件 xfopencv 和 Revision Platform, Revision Platform需要和具体的开发板型号对应,我用的是zcu1 ...

  3. 文档公式编辑神器-Snip

    最近在重新学习统计学的一些基础知识,整理笔记的时候需要输入一些数学公式.从学校毕业之后,就没有在文档中插入过公式了.按照以前的经验,我把输入公式的方式分成两类. 所见即所得的方式,常见的就是微软wor ...

  4. apply的使用技巧

    1.什么是apply?他和call有什么区别? apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数 obj:这个对象 ...

  5. 洛谷P3847 [TJOI2007]调整队形

    P3847 [TJOI2007]调整队形 题目背景 学校艺术节上,规定合唱队要参加比赛,各个队员的衣服颜色不能很混乱:合唱队员应排成一横排,且衣服颜色必须是左右对称的. 例如:“红蓝绿蓝红”或“红蓝绿 ...

  6. 洛谷P1313 计算系数

    P1313 计算系数 题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别 ...

  7. java中对List进行分组和排序

    排序 对List进行排序,有两种办法 第一个是用java提供的工具类Collections提供的sort方法进行排序 废话不多说,上代码 首先定义一个Student public class Stud ...

  8. 爬虫之scapy

    一 介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的用途十分广泛,可 ...

  9. node.js安装与配置

    node.js是一个基于Chrome V8引擎的javascrit运行环境. node.js使用了一个事件驱动.非阻塞式I/O的模型,使其轻量又高级. node.js的包管理器npm,是全球最大的开源 ...

  10. [Android]四大组件的运行状态

    Activity的主要作用是展示一个界面并和用户交互,它扮演的是一种前台界面的角色. Service是一种计算型组件,用于在后台执行一系列计算任务.Service有两种状态:启动状态和绑定状态.启动状 ...