HTML复习day01
1. 常见的浏览器内核
1 IE Trident
2 firefox Gecko
3 Safari webkit (安卓 苹果 大部分国产)
4 chrome Chromlum/blink
2. web 标准
web 标准的三层组成 结构 表现 和行为
3. HTML 是一种超文本标记语言
组成 由文本和标签和图片组成
4. HTML骨架
<html>
<head> </head>
<body> </body>
</html> 5. 我的第一个网页
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head> <body>
<h1>Hello World</h1>
</body> </html>
6. 标签分为单标签和双标签 <br /> | <h1> </h1>
7. 标签之间关系有包含和并列
<body>
<h1>Hello World</h1>
</body>
8. vscode 的首次使用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的工具</title>
</head> <body>
集成开发工具真好用
</body> </html>
9. 编码
常用的编码 GB2312 简体中文 BIG5繁体中文 GBK 中文 UTF-8万国码
10. 标签的语义化
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
在合适的地方放合适的标签
</body> </html>
11. 标题标签 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<h1>hello World</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
</body> </html>
13. 段落 水平线 换行
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<h1>新闻标题</h1>
<hr>
<p>这是第一段</p>
<p>这个是<br /> 第二段
</p>
</body> </html>
14. 文本格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>加粗</b>
<strong>加粗强调</strong>
<i>倾斜</i>
<em>倾斜强调</em> <s>删除</s>
<del>强调删除</del> <u>下划线</u>
<ins>强调下划线</ins>
</body>
</html>
15. 图像标签
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<img src="./img.jpg" alt="src是图片的路径属性">
</body> </html>
16.链接标签
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<a href="http://www.baidu.com">百度一下</a>
<a href="./div.html">div演示</a>
<a href="#">空链接</a>
<a href="./07图像标签.html"><img src="./img.jpg" alt=""></a>
</body> </html>
17. HTML注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>注释</h1>
<!-- 这是一行注释-->
添加和取消注释 Ctrl+？
</body>
</html> 18. 路径
D:\work\day01 这种叫绝对路径
../../day01 这种叫相对路径
https://pic.cnblogs.com/avatar/2249755/20210127142533.png 这种叫URL网络路径 0
18
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<div>刘亦菲</div>
<div>赵丽颖</div> <span>迪丽热巴</span>
<span>古力娜扎</span>
</body> </html>
19. 锚点定位 就是点击链接快速查找功能的实现
<a href="#man">2.圣诞老人的由来 </a> <br />
<a href="#tree">3.圣诞树的由来 </a> <br /> <h2 id="man">圣诞老人的由来</h2>
<h2 id="tree">圣诞树的由来</h2>
20 base标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base target="_blank">
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.163.com">网易</a>
</body>
</html>
20 预格式化文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre>
静夜思
作者：李白 (唐) 床前明月光，疑是地上霜。
举头望明月，低头思故乡。
</pre>
</body>
</html>
21-特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
楚乔是 燕洵 的 <br />
<大于号>小于号
</body>
</html>
综合练习1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>耶稣 jesus</title>
</head>
<body>
<h2>耶稣</h2>
<p>
耶稣（公元元年/前4年—公元30年），是基督宗教里的核心人物，基督宗教认为他是《旧约圣经》中所预言的弥赛亚（救世主，基督），并且是三位一体中圣子的位格，常被称为“拿撒勒人耶稣”。 耶稣出生于以色列的伯利恒，三十岁左右开始传道，三十三岁时在总督本丢彼拉多执政时受难、为了全人类的罪被钉死在十字架上，第三天复活、并向门徒显现四十天后升天，坐在全能天父的右边，他必要在世界穷尽的审判之日在光荣中降来，建立荣耀的天国，给「善」带来最后的胜利。 《圣经》记载：耶稣是神的儿子，神爱世人，甚至将他的独生子赐给他们，叫一切信他的，不至灭亡，反得永生。
</p> <img src="data:images/ys.jpg" /> <p>
耶稣基督有许多别的头衔和称呼：以马内利、神的儿子、人子、道、中保、大祭司、君王、万王之王、万主之主、羔羊、明亮的晨星、大卫的儿子（大卫的子孙）、大卫的根、拉比或拉波尼（老师的意思）、拿撒勒人耶稣等等。耶稣有好几次说到“我是”：我就是生命的粮（约翰福音6：35），我是世界的光（约8：12），我是好牧人（约10：11），我是羊的门（约10：7），我是道路、真理、生命（约14：6），我是真葡萄树（约15：1）。这里的“我是”是隐含地引用旧约，提示耶稣是道成肉身的救主身份。
</p> <p>
耶稣是顺服父神的旨意为罪人的缘故死在十字架上，成了赎罪祭，以义的代替不义的，使凡相信他的，因着他的宝血，得称为义。基督又按照圣经所说，第三天从死里复活，败坏那掌死权的魔鬼，升上高天，掳掠众仇敌，现今坐在父神的右边，是神与人之间唯一的中保，也唯有借着他，信徒可以进到父面前。将来他必要再来，建立荣耀的国度。[2]
</p>
</body>
</html>
综合练习2
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>圣诞的由来</title>
</head>
<body>
<h1>圣诞节的那些事</h1> 1.圣诞是怎样由来的 <br />
<a href="#man">2.圣诞老人的由来 </a> <br />
<a href="#tree">3.圣诞树的由来 </a> <br /> <hr />
<h2>圣诞是怎样由来的</h2> <p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念<a href="yesu.html" target="_blank">耶稣</a>降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p> <img src="data:images/t1.gif" /> <h2 id="man">圣诞老人的由来</h2> <p>圣诞节当然少不了圣诞老人，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p> <img src="data:images/t2.jpg" />
<p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。 到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p> <img src="data:images/t3.jpg" /> <p>在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。?</p> <h2 id="tree">圣诞树的由来</h2> <p>圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。</p> <p>其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。
</p> <img src="data:images/t4.jpg" /> <p> 另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。</p> <p>圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。</p> <p> 每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p> 更多内容可以百度一下
<a href="http://www.baidu.com" target="_blank"> <img src="data:images/arr.gif" /> </a> </body>
</html>
素材
HTML复习day01的更多相关文章
- JAVAWEB复习day01
一.基础知识 1.一个html文件开始和结束的标签<html></html> 2.html的两部分<head>设置相关信息</head>,<bod ...
- JAVA基础复习day-01
1.基础语法 1.1.基础语法规则 1.1.1.Java代码实现 代码示例: public class Hello{ public static void main(String[] args){ S ...
- 线下---复习day01
目录 1 个人介绍 2 关于编辑器 3 基础串讲 3.1 解释型和编译型 3.2 数据类型 3.2.1 一切皆对象 3.2.1 深浅copy 3.2.3 可变类型与不可变类型 3.3 字符编码 3.4 ...
- MySql学习笔记04
复习 day01 数据库相关: create database db4 character set utf8; show databases; show create database db4; dr ...
- python复习之路-Day01
数据类型初识 1.数字 2 是一个整数的例子.长整数 不过是大一些的整数.3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4.(-5+4j)和 ...
- Java复习整理 day01
练习代码: 1 //这条语句说明这个Java文件在demo的包下 2 package demo1; 3 /** 4 * 5 * @author 王兴平 6 * 这个是第一个hello world 案例 ...
- 传智播客JavaWeb day01 快捷键、XML
2015-01-14 一直计划着学习java,今天晚上终于下定决心看了下传智播客朴乾老师的javaweb开发视频day01之第一讲,主要内容是开发工具简单介绍.怎么创建工程.Junit的介绍,我是C# ...
- day01课程回顾，数据类型
Day01 Python的分类 Cpython:代码àc字节码->机器码 一行一行的编译执行 Pypy: 代码àc字节码->机器码 全部转换完再执行 其他python 代码- ...
- JAVA基础部分复习(一、8中基础类型，以及String相关内容)
以下是关于java中8种基本类型的介绍说明: package cn.review.day01; /** * java基础复习,8种数据类型 * (byte,short,long,int,double, ...
随机推荐
- 二、集群配置SSH免密登录
一.以3个几点为例,分别为master.slave01.slave02 1.分别生成自己节点密钥对 master: 创建dsa免密代码:ssh-keygen -t dsa -P '' -f ~/.ss ...
- VirtualBox安装ubuntu 开发环境 配置
一 下载VirtualBox安装程序以及ubuntu光盘镜像 1.下载VirtualBox安装程序(本文选用的是6.0.12版本) 建议从清华大学镜像站 https://mirrors.tuna.ts ...
- LAMP架构之PHP-FPM 服务器 转
安装PHP 解决依赖关系 # 请配置好yum源(系统安装源及epel源)后执行如下命令: yum -y groupinstall "Desktop Platform Development& ...
- WebRTC ICE 状态与提名处理
大家都知道奥斯卡有提名,其实在 WebRTC 的 ICE 中也有提名,有常规的提名,也有激进的提名,而且提名的候选人不一定是最优秀的候选人喔,本文就带你一探其中玄妙.文章内容主要描述 RFC 5245 ...
- Mac安装Go语言
正文 安装 安装我们使用 HomeBrew ,其使用方法详见我的上一篇博文 brew install go 配置环境变量 Go1.3及以后版本跳过以下步骤 进入变量文件 cd ~ vim .bash_ ...
- C#处理医学图像(二):基于Hessian矩阵的医学图像增强与窗宽窗位
根据本系列教程文章上一篇说到,在完成C++和Opencv对Hessian矩阵滤波算法的实现和封装后, 再由C#调用C++ 的DLL,(参考:C#处理医学图像(一):基于Hessian矩阵的血管肺纹理骨 ...
- 【Docker】在Linux系统中安装Docker虚拟机、启动停止重启查看Docker命令
安装Docker 文章目录 安装Docker Docker虚拟机架构 在Linux系统中安装Docker虚拟机 管理Docker虚拟机 参考资料 Docker虚拟机架构 Docker创建的所有虚拟实例 ...
- 通过trace分析优化其如何选择执行计划
mysql5.6提供了对sql的跟踪trace,通过trace文件能够进一步了解为什么优化其选择执行计划a而不选b执行计划,帮助我们更好的理解优化其的行为. 使用方式:首先打开trace,设置格式为j ...
- 【Linux】tcpdump
tcpdump介绍 tcpdump 是一个运行在命令行下的抓包工具.它允许用户拦截和显示发送或收到过网络连接到该计算机的TCP/IP和其他数据包.tcpdump 适用于 大多数的类Unix系统操作系统 ...
- 记录一下 ThreadLocal 与 WeakReference
ThreadLocal & WeakReference Thread整体的模块图 Thread -> ThreadLocalMap 对于继承了 WeakReference Entry本身 ...