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 ...
随机推荐
- Spring6 当中 获取 Bean 的四种方式
1. Spring6 当中 获取 Bean 的四种方式 @ 目录 1. Spring6 当中 获取 Bean 的四种方式 每博一文案 1.1 第一种方式:通过构造方法获取 Bean 1.2 第二种方式 ...
- 2021~2022Apache大数据相关项目盘点
一.晋升为Apache TLP(Top-Level Project)的大数据相关项目 1.1.Apache DataSketches (20210203) 1.2.Apache Gobblin (20 ...
- 【强化学习】Markov Decision processes【二】
目录 Markov Decision processes Markov Process Markov reward process Markov Decision processes 马尔可夫决策过程 ...
- windows10 64 解决 exec:"gcc" executable file not found in %PATH%报错问题
1.下载编译好的包 https://sourceforge.net/projects/mingw-w64/files/mingw-w64/ 这里我选择64位的 2.解压完之后,配置环境变量. 解压完到 ...
- Linux 开启防火墙端口策略
1. 安装防火墙 yum install firewalld systemd -y 2. 手动开放防火墙端口 查看防火墙全部设置 firewall-cmd --list-all 若防火墙服务未启动可执 ...
- Vben-admin---ApiSelect Invalid prop: type check failed for prop "onUpdate:value". Expected Function, got Array
在basicFrom组件里添加一个ApiSelect, <template #localSearch="{ model, field }"> <ApiSelect ...
- 一键自动化博客发布工具,用过的人都说好(infoq篇)
infoq的博客发布界面也是非常简洁的.首页就只有基本的标题,内容和封面图片,所以infoq的实现也相对比较简单. 一起来看看吧. 前提条件 前提条件当然是先下载 blog-auto-publishi ...
- pyqt5 子线程如何操作主线程GUI
一.简介 在使用pyqt5编写gui时遇到两个问题,会导致界面崩溃,今天就围绕这两个问题来简单说明和改进. 1.在主线程中使用while无限循环会导致界面崩溃 2.在子线程中操作主线程gui会导致界面 ...
- JavaScript的数学计算库：decimal.js
An arbitrary-precision Decimal type for JavaScript. 功能 整数和浮点数 简单但功能齐全的 API 复制 JavaScript 和对象的许多方法Num ...
- 深入解析HashMap源码
HashMap是Java程序员使用频率最高的用于映射(键值对)处理的数据类型.随着JDK(Java Developmet Kit)版本的更新,JDK1.8对HashMap底层的实现进行了优化,例如引入 ...