02-HTML知识点
01 元素的介绍
02 元素的属性
03 元素的嵌套关系
04 HTML结构分析
4.1 文档声明[这个不叫元素]
4.2 html元素
4.3 head元素
主要用来写文档的配置信息
05 HTML常见元素
5.1 h元素
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
效果如下
5.2 p元素
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>相较于生活在看似更便宜的城市(如底特律或亚特兰大)，生活在高人均城市(纽约、旧金山)的富人(年收入超过10万美元的人)
在食物方面的花费要少20%。在城市做美甲更便宜：纽约人花不到3美元就能做美甲，比排名前十的其他大城市都要便宜。
城市提供的奢侈消费开始显得相当不平衡：城市居民不仅拥有更多消费选择，而且为此支付的费用也更少。很多城市女性需要做美甲，
于是就有美甲沙龙来满足这种需求，而美甲沙龙之间的竞争则起到了自动调节价格的作用.
</p>
<p>大城市虽然都有很相似的购物中心和超市，但在消费习惯上可能非常不同，“在一些基础食物方面，我们可以看到一些城市比另一些更健康，
而且数据显示，洛杉矶、纽约、迈阿密和旧金山拥有最庞大的水果和蔬菜消费人群。与旧金山以外的其他城市相比，
洛杉矶人在新鲜蔬菜上的总支出一直比其他城市多30%至40%，在水果上的总支出则多10%至40%。部分是因为这些城市是那些极度关心健康和外表的人的大本营。
</p>
</body>
</html>
效果如下
5.3 img元素
5.4 可替换元素解释
5.5 img常见2个属性
5.5.1 src
表示嵌入图片的文件路进(可以是图片的网络路径)
5.5.2 alt
作用1: 图片加载不成功,会显示这段文本
作用2: 屏幕阅读器会将这些描述给使用阅读者的使用者听
5.5.3 代码示例
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=0BDF3A3289356D51A820116655965BB18DA73F04" alt="这是一张图片">
</body>
</html>
效果如下
5.6 a元素
5.6.1 在当前页面打开
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
5.6.2 重新开一个网页打开页面
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
5.6.3 锚点链接
跳转到页面中的具体位置
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#theme01">跳转到主题1</a>
<a href="#theme02">跳转到主题2</a>
<a href="#theme03">跳转到主题3</a>
<h2 id="theme01">主题1</h2>
<p>
这是主题1 <br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
</p>
<h2 id="theme02">主题2</h2>
<p>
这是主题2 <br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
</p>
<h2 id="theme03">主题3</h2>
<p>
这是主题3 <br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
</p>
</body>
</html>
5.6.4 a元素和img元素结合
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://miaosha.jd.com/#100037432256" target="_blank"></a>
</body>
</html>
06 div和span的区别
07 HTML常见的全局属性
08 字符实体
就是要在浏览器上显示一些特殊的符号,例如: 空格,大于,小于
如果直接空格,或者> < 这样浏览器是显示不出来的
代码实现
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><你好></p>
</body>
</html>
常见字符实体
02-HTML知识点的更多相关文章
- [ASP.NET MVC 小牛之路]02 - C#知识点提要
本人博客已转移至:http://www.exblr.com/liam 本篇博文主要对asp.net mvc开发需要撑握的C#语言知识点进行简单回顾,尤其是C# 3.0才有的一些C#语言特性.对于正在 ...
- jQuery (02) 重点知识点总结
jQuery 如果用户未登录,当加入购物车,会将商品相关信息存入 cookie 或者 session,这两个都是可以标识用户信息的东西 是一个 JavaScript 库,封装了常用的开发功能,和一些需 ...
- 我要进大厂之大数据MapReduce知识点（1）
01 我们一起学大数据 老刘今天分享的是大数据Hadoop框架中的分布式计算MapReduce模块,MapReduce知识点有很多,大家需要耐心看,用心记,这次先分享出MapReduce的第一部分.老 ...
- 自学MVC看这里——全网最全ASP.NET MVC 教程汇总
MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC技术的学习者提供一个整合学习入口.本文从 ...
- [ASP.NET MVC 小牛之路]13 - Helper Method
我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 System.Web.Mvc 命名空间下的 HtmlHelper,习惯上我们把 ...
- [ASP.NET MVC 小牛之路]15 - Model Binding
Model Binding(模型绑定)是 MVC 框架根据 HTTP 请求数据创建 .NET 对象的一个过程.我们之前所有示例中传递给 Action 方法参数的对象都是在 Model Binding ...
- ASP.NET MVC 教程汇总
自学MVC看这里——全网最全ASP.NET MVC 教程汇总 MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要 ...
- 全网最全ASP.NET MVC 教程汇总
全网最全ASP.NET MVC 教程汇总 MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MV ...
- Helper Method
ASP.NET MVC 小牛之路]13 - Helper Method 我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 Sys ...
- Area 使用
[ASP.NET MVC 小牛之路]08 - Area 使用 ASP.NET MVC允许使用 Area(区域)来组织Web应用程序,每个Area代表应用程序的不同功能模块.这对于大的工程非常有用,Ar ...
随机推荐
- 2018-5-28-WPF-Process.Start-出现-Win32Exception-异常
title author date CreateTime categories WPF Process.Start 出现 Win32Exception 异常 lindexi 2018-05-28 10 ...
- 再聊解除HiddenApi限制
炒冷饭,再聊聊大家都知晓的隐藏接口的限制解除. 说明 由于我们容器产品的特性,需要将应用完整的运行起来,所以必须涉及一些隐藏接口的反射调用,而突破反射限制则成为我们实现的基础.现将我们的解决方案分享给 ...
- 一则current日志损坏的数据库恢复实例，隐藏参数的使用
场景 之前写了一篇文章,是redo日志全部丢失的情况下,数据库实例恢复的方式.但是,这次特殊在,实例恢复失败的情况下.非常规打开数据库(数据库已经不一致了,但是可以通过expdp导出,导出重要的数据) ...
- 02.go-admin IDE配置配置命令启动方式讲解笔记
目录 go-admin版本 视频地址 一.代码地址 二.在线文档 三.首次配置需要初始化数据库资源信息(已初始化过数据库的,跳过此步) 配置数据库迁移 五.配置启动项目,用goland IDE进行启动 ...
- linux下nginx安装和配置
一.软件安装 1.环境说明 操作系统:CentOS 7.4 64位 nginx版本:1.16.1 安装日期:2019/10/01 安装用户:root 2.安装运行库 yum -y install gc ...
- Unity Linear Gamma色彩空间矫正测试
Gamma和Linear修正的问题相信网上已经有很多文章了.简单来说显示器的颜色输出不是线性的,根据硬件参数和输出颜色 信息拟合曲线是x^2.2,因此会使用一个x^0.45曲线将其拟合回线性. 因为0 ...
- 4G EPS 中的随机接入
目录 文章目录 目录 前文列表 UE 的随机接入 基于竞争的随机接入流程 基于非竞争的随机接入流程 PRACH(物理随机接入信道) 上行 TA(时间提前量) 前文列表 <4G EPS 中的小区搜 ...
- pageoffice6 在线编辑 word 文件时禁止拷贝到外部
有些特殊情况下,希望用户可以在线编辑Word文档,也允许用户拷贝本地电脑或网络上的资料到Word文档中进行编辑,但是不希望用户把在线Word文档中的内容另存到本地或选择并拷贝出去,此时只是禁用另存.禁 ...
- linux 下对zip,rar,tar,tar.gz,tar.bz2,tar.xz,gzip,bzip2,xz文件的归档,压缩和解压缩
目录 一.关于打包和压缩 二.linux对rar文件的压缩和解压缩 三.使用tar对文件进行归档,压缩,解压缩 3.1 tar对文件进行归档和解压 3.2 归档的添加和删除 3.3 tar对文件进行归 ...
- MySQL查询某个字段含有字母数字的值
1.正则表达式(REGEXP) 查询MySQL表中某个字段含有字母和数字的值,可以使用正则表达式(REGEXP)来匹配这样的模式.在MySQL中,正则表达式是一个强大的工具,可以用来搜索和匹配字符串中 ...