一、HTML标签

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

二、HTML的语法

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

三、常见标签及基本语法

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

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

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

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

　　2.常见标签

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5</title>

    </head>

    <body>

        <h1>从今天开始学习HTML</h1>

        <h2>先自我介绍一下</h2>

        <h3>我叫coco</h3>

        <h4>来自中国</h4>

        <h5>今后我们一起学习</h5>

        <h6>请多关照</h6>

    </body>

</html>

　　　　　　

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

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5</title>

    </head>

    <body>

        <h1>静夜思</h1>

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

        <p>窗前明月光</p>

        <p>疑是地上霜</p>

        <p>举头望明月</p>

        <p>低头思故乡</p>

    </body>

</html>

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5</title>

    </head>

    <body>

        <h1>静夜思</h1>

        <p>

            窗前明月光

            <br/>

            疑是地上霜

            <br/>

            举头望明月

            <br/><br/><br/>

            低头思故乡

        </p>

    </body>

</html>

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5</title>

    </head>

    <body>

        <h1>HTML学习总结</h1>

        <p>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</n>我最近在学习HTML，今天的学习内容是HTML的基本语法和常见标签的使用

            </br>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML的标签分为两类：单标签和双标签，双标签格式是<标签名称></标签名称>双标签成对出现，有开始有结束，单标签格式是</标签名称>，还学习了标题标签，h1~h6,双标签，分别表示不同的字体大小，建议一个网页中只使用一个h1标签，因为浏览器在进行索引是一般是对h1标签进行索引

        </p>

    </body>

</html>

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

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

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

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

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

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

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

图片常见的属性

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

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

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5</title>

    </head>

    <body>

        <h1>白雪公主</h1>

        <img src="src/t014c45eaaa2508bc3e.webp.jpg" >

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见图片标签的属性</title>

    </head>

    <body>

        <!-- 正常的图片 -->

        <img src="src/t014c45eaaa2508bc3e.webp.jpg" >

        <!-- 设置图片的宽度 -->

        <img src="src/t014c45eaaa2508bc3e.webp.jpg" width="200" >

        <!-- 设置了高度的标签 -->

        <img src="src/t014c45eaaa2508bc3e.webp.jpg" height="400" >

        <!-- 同时设置了高度和宽度的标签 -->

        <img src="src/t014c45eaaa2508bc3e.webp.jpg" width="100" height="400">

        <!-- 设置了标题的标签 -->

        <img src="src/t014c45eaaa2508bc3e.webp.jpg"  title="白雪公主" >

        <!-- 当图片显示不出来时，用alt属性来显示图片未加载出来 -->

        <img src="src/t014c45eaaa2508bc1e.webp.jpg" alt="这是一张图片">

    </body>

</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. SharePoint 2013 set site mailbox

    Automating Site Mailboxes in SharePoint 2013 and Exchange 2013 One of the completely new features to ...

  2. codevs 3162 抄书问题

    3162 抄书问题 题目描述 Description 现在要把M本有顺序的书分给K个人复制(抄写),每一个人的抄写速度都一样,一本书不允许给两个(或以上)的人抄写,分给每一个人的书,必须是连续的,比如 ...

  3. C语言中 malloc函数用法

    一.malloc()和free()的基本概念以及基本用法: 1.函数原型及说明: void *malloc(long NumBytes):该函数分配了NumBytes个字节,并返回了指向这块内存的指针 ...

  4. jquery获取文档高度和窗口高度汇总

    jquery获取窗口高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  5. C#代码规范整理

    命名规范制定意义 1. 方便代码的交流和维护,便于日后自己的再次阅读. 2. 不影响编码的效率,不与大众习惯冲突. 3. 使代码更美观.阅读更方便. 4. 使代码的逻辑更清晰.更易于理解. 名词解释 ...

  6. Codeforces Round #566 (Div. 2) A. Filling Shapes

    链接: https://codeforces.com/contest/1182/problem/A 题意: You have a given integer n. Find the number of ...

  7. DMA性能测试

    本程序主要用来计算DMA数据读写过程中所花费的总得时间周期,依据公式T=tStart+ceil(L/4)*2+ceil(L/256)*tTransform*2 因为tTransform是一个常量(通常 ...

  8. 引入clipboard.js

    引入clipboard.js var clipboardJS = new ClipboardJS('#accept-data'); // 括号内的是选择器

  9. 传智播客C++

    轻松入门实战应用传智播客C++学院就业班第一阶段C提高课程 传智播客C提高讲义 传智扫地僧 1程序内存模型 1.1就业班引言 1.1.1问题引出 企业需要能干活的人  C学到什么程度可以找工作  ...

  10. clickhouse源码Redhat系列机单机版安装踩坑笔记

    前情概要 由于工作需要用到clickhouse, 这里暂不介绍概念,应用场景,谷歌,百度一大把. 将安装过程踩下的坑记录下来备用 ClickHouse源码 git clone安装(直接下载源码包安装失 ...