HTML基础知识（1）常用标签的使用 h、p、img、meta、a、iframe...
文章目录
1、html简介
2、html注释
<!-- 注释内容-->
举例：
<!DOCTYPE html>
<html>
<!-- head标签，标签中的内容不会直接显示在网页中，帮助浏览器解析页面 -->
<head>
<meta charset="urt-8">
<!-- 默认显示在浏览器的标题栏中，搜索引擎搜索时，会首先搜索title标签中的内容 -->
<title>标题</title>
</head>
<body>
<!-- 注释，注释中的内容不显示在页面中 -->
<h1>你好</h1>
</body>
</html>
3、标签的属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name=“value”。
3.1 代码
<!-- 属性：
可以通过属性来设置标签中的内容
写在开始标签中，属性名="属性值" -->
<h1>你好<font color="red" size="12px">，小明</font></h1>
3.2 测试结果
4、常用的标签
4.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用的标签</title>
</head>
<body>
<!-- 1、标题标签
一共有6级标签 显示效果h1最大，h6最小
六级标题中 h1最重要。仅次于标题title。搜索引擎搜索结束标题，立即查看h1
中的内容
-->
<h1>一级标题</h1>
<h2>一级标题</h1>
<h3>一级标题</h1>
<h4>一级标题</h1>
<h5>一级标题</h1>
<h6>一级标题</h1>
<!-- 2、段落标签：
内容中的一个自然段，独占一行
使用p标签 -->
<p>我是P标签 </p>
<p>我是p标签</p>
<!-- 3、换行标签 br 自结束标签 -->
<p>我要学前端，<br/>
我要走全栈。
</p>
<!-- 4、hr在页面中生成一个横线 -->
<hr>
</body>
</html>
4.2 测试结果
5、实体
5.1 代码
<!DOCTYPE html>
<htmL>
<head>
<meta charset="utf-8">
<title>实体</title>
</head>
<doby>
<!--
一些特殊字符是不能直接使用的,要使用转义字符串(实体)
浏览器自动解析实体,
实体的名字:
< <
> >
空格:
版权符号:© -->
<p>©我 要学习全栈哦</p>
<p>大于号:<</p>
<p>小于号:></p>
</doby>
</htmL>
5.2 测试结果
6、图片引入
<img src="图片地址" alt="图片不能显示展示的信息"/>
目录结构
6.1 代码
<!DOCTYPE html>
<htmL>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<doby>
<!-- 使用img标签在一个网页中引入外部图片
img也是一个自结束标签
属性:
src:外部图片地址.相对路径,绝对路径
alt:外部图片不能显示,对图片的描述
不写alt属性,搜索引擎不会对img中的图片进行收录
width:图片宽度,px作为单位
height:图片高度,px作为单位
开发中一般使用自适应页面,不建议使用width和height
相对路径:
相对于当前资源所在目录的位置
../返回上一级目录,返回几级目录就写几个
图片的格式:
JPEG(JPG):支持图片颜色多,图片可以压缩,不支持透明.一般保存照片等颜色丰富的图片
GIF:支持的颜色少,只支持简单透明,支持动态图
PNG:支持颜色多,并且支持复杂的透明
图片使用原则:
效果不一致:使用效果好的
效果一致:使用小的
-->
<img src="data:image/car.jpg" alt="这是车" width="400px" height="300px">
</doby>
</htmL>
6.2 测试结果
7、meta标签
7.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>meta</title>
<!-- 使用meta可以设置网页的关键字 -->
<meta name='keywords' content="HTML5,JavaScript,Java">
<!-- 使用meta可以用来做请求的重定向 -->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
</head>
<body>
<h1>5秒后跳转页面</h1>
</body>
</html>
7.2 测试结果
经过5秒后自动跳转到百度首页
8、内联框架
8.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联框架</title>
</head>
<body>
<!-- 使用内联框架可以引入一个外部的页面
属性:
src:指向一个外部页面的路径,可以用相对路径
width:宽度
height:高度
name:
在实际开发中不推荐使用,内联框架中的内容不被搜索引擎检索 -->
<h1>我是内敛框架哦,将dame2页面中的内容引入</h1>
<iframe src="dame2.html"></iframe>
</body>
</html>
8.2 测试结果
9、超链接
9.1、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!-- 使用超链接可以从一个页面跳转到其他页面
a标签创建超链接
属性:
href:指向链接跳转的目标地址,相对路径和绝对路径都可以
target:指定打开的链接地址
_self:在当前页面打卡(默认值)
_blank:在新的窗口中打开链接
内敛框架的name属性值,链接将会在该页面中打开 -->
<a href="http://www.baidu.com">跳转到百度</a>
<a href="dame1.html" target="_blank">新页面打开</a>
<a href="dame1.html" target="jack">内联框架中打开</a>
<br><br>
<iframe src="dame2.html" name="jack" width="400px" height="300px"></iframe>
</body>
</html>
9.2、测试结果
10、小节测试
10.1、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单网页</title>
</head>
<body>
<!-- 跳转到id为bottom的元素所在的位置 -->
<center><a href="#bottom">底部</a></center>
<center><h1>我要打牢基础</h1></center>
<hr>
<center><h2>学习html</h2></center>
<center><font color="blue">
<p>郑某</p>
</font></center>
<center><p>好好学习，天天向上<br>好好学习，天天向上<br>好好学习，天天向上<br>好好学习，天天向上</p></center>
<center><img src="data:image/car.jpg" width="200px" height="180px"></center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<center>
友情链接：<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a><br>
<a href="#" id="bottom">顶部</a>
<!-- 发送电子邮件的超链接，点击链接，自动打开计算机中默认的邮件客户端 href:mailto:zyz@qq.com -->
<a href="mailto:zyz@qq.com">联系我们</a>
</center>
</body>
</html>
10.2 测试结果
HTML基础知识（1）常用标签的使用 h、p、img、meta、a、iframe...的更多相关文章
- Shell编程(二)——shell的基础知识及常用命令
shell的基础知识 一.bash有以下特点: 1.记录命令历史 2.指令和文件名补全 3.别名 alias rm='rm -i' 4.通配符 * 0个或多个字符 ?匹配一个字符 5 输入输出重定向 ...
- 前端基础之html常用标签
前言: 1.在B-S模式下,server服务端和客户端之间 使用http协议(规定 客户端应该怎么请求服务端,服务端应该怎么响应)通信: 2.传输过程 浏览器 向服务端发起 post/get请求 服务 ...
- Django框架基础知识04-模板标签与模板继承
1.常用的模板标签 -作用是什么? -常用标签 总结:语法 {% tag %} {% endtag %} {% tag 参数 参数 %} 2.模板的继承与引用 -引用 include标签 -继承 ex ...
- HTML基础之HTML常用标签
下面小编为大家整理一些HTML的常用标签 a.布局标签 div标签定义文档中的分区或节(division/section),可以把文档分割为独立的.不同的部分,主要用于布局. aside标签的内容可用 ...
- 前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？
目录 1.交互实现 1.1 meta标签:自动刷新/跳转 1.2 title标签:消息提醒 2.性能优化 2.1 script标签:调整加载顺序提升渲染速度 2.2 link标签:通过预处理提升渲染速 ...
- 视频基础知识：浅谈视频会议中H.264编码标准的技术发展
浅谈视频会议中H.264编码标准的技术发展 浅谈视频会议中H.264编码标准的技术发展 数字视频技术广泛应用于通信.计算机.广播电视等领域,带来了会议电视.可视电话及数字电视.媒体存储等一系列应用,促 ...
- loadrunder之脚本篇——脚本基础知识和常用操作
1)编码工具设置 自动补全输入Tools->General Options->Environment->Auto complete word 显示功能语法Tools->Genr ...
- Hive HiveQL基础知识及常用语句总结
基础语句 CREATE DROP 建表.删表 建表 -------------------------------------- -- 1. 直接建表 ------------------------ ...
- MySQL基础知识和常用命令总结
说明:以下内容是阅读书籍<<MySQL必知必会>>的摘要和总结 检索数据 排序检索数据 过滤数据 使用通配符过滤 使用正则表达式进行搜索 创建计算字段 使用数据处理函数 汇总数 ...
随机推荐
- Normal3类定义
法线的相关操作都在图中,实现部分还是大家自己练习,照着图写代码就行了. 类声明: class Normal3 { public: Normal3(); ~Normal3(); Normal3(ldou ...
- Apache Pulsar Summit Asia 2020 正式启动，演讲议题征集中！
Apache Pulsar Summit 是 Apache Pulsar 社区年度盛会,它将分布在世界各地的 Apache Pulsar 项目 Contributor.Commiter 和各企业 CT ...
- kali下安装Nessus
Kali安装Nessus 说明 Nessus是一款基于插件的系统漏洞扫描和分析软件 一.安装 1.下载安装包 https://www.tenable.com/downloads/nessus 查看ka ...
- mybatisplus-ActiveRecord 模式
ActiveRecord 模式 直接调用Model对象来进行增删改查. 实体类只需继承 Model 类即可进行强大的 CRUD 操作 需要项目中已注入对应实体的BaseMapper 实体类User 点 ...
- linux 的文件权限案列
需求: 技术部门人员可以相互查看,但不能删除和修改别人的文件,其他部门人员不能查看,但领导组可以且只能查看. 设计: 技术部: 组 jishu ; 人员 js1, js2 领导:组 lingd ; 人 ...
- 【MySQL】从入门到精通6-MySQL数据类型与官方文档
上期:[MySQL]从入门到精通5-一对多-外键 这个是官方文档链接,是世界上最全面的MySQL教学了,所有问题都可以在这里找到解决方法. https://dev.mysql.com/doc/ htt ...
- 【读书笔记】15《The Bridge of Madison County》
廊桥遗梦(梅丽尔·斯特里普主演) 罗伯特·詹姆斯·沃勒 99个笔记 The Beginning 美[|diˈklainz]v 辞谢,谢绝(邀请等)( decline的第三人称单数 );(道路.物体 ...
- Spring MVC组件之HandlerAdapter
Spring MVC组件之HandlerAdapter HandlerAdapter概述 HandlerAdapter组件是一个处理器Handler的适配器.HandlerAdapter组件的主要作用 ...
- 【lwip】06-网络接口层分析
目录 前言 6.1 概念引入 6.2 网络接口层数据概念流图 6.3 网卡收包程序流图 6.4 网卡数据结构 6.4.1 struct netif源码 6.4.2 字段分析 6.4.2.1 网卡链表 ...
- django_day02
django_day02 外键 表示一对多 多对一 class Book(models.Model): name = models.CharField(max_length=32) publisher ...