HTML之基本语法（段落标签、标题标签、空格标签、换行标签、图片标签和图片的基本属性）
一、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）添加空格（ ）,一个空格占一个字节
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body>
<h1>HTML学习总结</h1>
<p>
</n>我最近在学习HTML，今天的学习内容是HTML的基本语法和常见标签的使用
</br>
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之基本语法（段落标签、标题标签、空格标签、换行标签、图片标签和图片的基本属性）的更多相关文章
- 正则去掉html标签之间的空格、换行符、tab符，但是保留html标签内部的属性空格
今天遇到一个比较少见的去空格: 正则去掉html标签之间的空格.换行符.tab符,但是保留html标签内部的属性空格 JS 举例: "<a href='baidu.com' name= ...
- 帝国cms一键排版删除段落前两个空格和换行符
打开网站根目录下e\class\function.php文件:一.删除两个空格: 搜索:$nbsp=' '; 改为:$nbsp=''; 二.删除<br>换行符 搜索: $ok='<b ...
- 块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）
<html> <head> <meta charset="utf-8"> <title>块级标签</title> < ...
- H5的段落标签、图片标签、列表标签与链接标签
段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...
- [19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接
一.实体(转义字符) 在HTML中,一些诸如<.> 就是普通的小于号和大于号不能直接使用,因为浏览可能会把它当成一个标签去解析,所以需要一些特殊字符去表示这些特殊字符, 这些字符我们称他们 ...
- 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6
标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...
- 帝国CMS万能标签标题截取后自动加入省略号
帝国CMS万能标签标题截取后自动加入省略号,没有达到字数的则不加省略号完美解决方案1.打开e/class/connect.php 搜索 if(!empty($subtitle))//截取字符 大约 ...
- HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
- HTML中的属性、段落、标题、换行等
HTML的属性html标签的属性总是以名称/值(name＝“value”)的方式出现:属性总是在html元素的开始标签中规定: 1.html链接由<a>标签定义,url在href中指定:& ...
随机推荐
- Django 之验证码实现
1. django-simple-captcha 模块 安装 django-simple-captcha pip install django-simple-captcha pip install P ...
- 洛谷P1070 道路游戏
P1070 道路游戏 题目描述 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有 n 个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针顺序依次将 ...
- 2014-10-4 NOIP模拟赛
1.某种密码(password.*) 关于某种密码有如下描述:某种密码的原文A是由N个数字组成,而密文B是一个长度为N的01数串,原文和密文的关联在于一个钥匙码KEY.若KEY=∑▒[Ai*Bi],则 ...
- MCP|BFY|Proteome Analysis of Human Neutrophil Granulocytes From Patients With Monogenic Disease Using Data-independent Acquisition（单基因疾病患者中性粒细胞的DIA蛋白质组分析）
文献名:Proteome Analysis of Human Neutrophil Granulocytes From Patients With Monogenic Disease Using Da ...
- git配置命令
一.Git安装及密钥的生成 1.下载Git软件:http://msysgit.github.io/ 2.桌面右键 Git Bash Here 打开git命令行: 3.ssh-keygen -t rsa ...
- Java基础--常用API--日期相关API
一.java.util.Date 1.只用于显示系统时间,其大部分操作由Calendar代替. 格林威治时间(GMT):指的是1970年1月1日0时,不同地区有时间差. 默认输出格式:星期.月.日.时 ...
- js原型和构造函数
前言 从应用层面深入理解原型模式和js中的构造函数. 构造函数(constructor) js中的任何对象都有自己的构造函数.js中使用字面量声明的普通对象({})或数组([])等子对象本质上都是使用 ...
- react父组件调用子组件方法
把子组件的参数回传到父组件中,并且赋值给子组件的一个实例方法. 参考React中文网: http://www.css88.com/react/docs/refs-and-the-dom.html im ...
- C 语言实例 - 一元二次方程
C 语言实例 - 一元二次方程 求一元二次方程:ax2+bx+c= 的根. 输入三个实数a,b,c的值,且a不等于0. 实例 #include <stdio.h> #include < ...
- 题解 UVA11354 【Bond】
并查集+按秩合并 传送门 大意:给出一张n个点m条边的无向图, 每条边有一个权值,有q个询问, 每次给出两个点s.t,找一条路, 使得路径上的边的最大权值最小. 我们可以发现,跑最小生成树会跑挂, 那 ...