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 ...
随机推荐
- 让 KEPServer 变成一款 Web 组态软件
KEPServerEX是行业领先的连接平台,用于向您的所有应用程序提供单一来源的工业自动化数据.该平台的设计使用户能够通过一个直观的用户界面来连接.管理.监视和控制不同的自动化设备和软件应用程序. ...
- 批量解压上传SAP Note
最近在做印度GST相关的东西,需要手动给系统实施上百个SAP Note,十分繁琐. 标准事务代码SNOTE只支持每次上传一个Note,逐个上传大量Note会很麻烦,为此摸索出一个批量解压上传的流程,下 ...
- 陪玩app小程序H5开发制作多少钱-软件开发,源码交付,永久售后.-陪玩线下陪玩软件搭建APP(系统、平台、源码)-游戏陪玩系统APP派单大厅H5社交圈子+多人聊天室小程序
线下陪玩APP平台,如何防止陪玩师接私单? 线下陪玩APP平台如果不解决陪玩师接私单的问题,那么你的陪玩平台一定赚不到钱! 为什么这么说呢?平台花费10万引流来1000个顾客,每个顾客的引流成本就是1 ...
- vim简明文档
替换 替换当前行第一个 :s/vivian/sky/ 替换当前行第一个 vivian 为 sky 从当前行替换到最后一行 :%s/vivian/sky/g 替换所有行中 vivian 为 sky 查找 ...
- JavaScript实现全选选项框的功能和鼠标划入出现下拉框的功能--JavaScript实例集锦（初学）
有一些论坛,文章后台编辑都会出现选择框的操作. 1.实现选项框全选和取消全选的功能: 代码实现: <!DOCTYPE html> <html> <head> < ...
- AeroAdmin、TeamViewer和Splashtop Business Access的区别
Hi everyone! 今天又是喜闻乐见的吃瓜时间,王婆卖瓜,不得不夸. 炎炎夏日,就给大家送个大西瓜吧.望梅止渴也是极好的. ------官宣分割线------ Splashtop是针对个人和企 ...
- 网络安全—模拟ARP欺骗
文章目录 网络拓扑 安装 使用 编辑数据包 客户机 攻击机 验证 仅做实验用途,禁止做违法犯罪的事情,后果自负.当然现在的计算机多无法被欺骗了,开了防火墙ARP欺骗根本无效. 网络拓扑 均使用Wind ...
- 什么是Java线程池
摘自:某个百度知道 多线程技术主要解决处理器单元内多个线程执行的问题,它可以显著减少处理器单元的闲置时间,增加处理器单元的吞吐能力. 假设一个服务器完成一项任务所需时间为:T1 创建线程时间,T2 在 ...
- 【c++】函数模板
语法: template<class & T1,class &T2> auto Add(T1 t,T2 t2) ->decltype(t+t2); 函数定义: t ...
- Java 8 中Stream用法
Stream是Java 8新增的接口,Stream可以认为是一个高级版本的 Iterator. 废话不多说直接上代码 package com.example.demo; import org.juni ...