我的HTML学习笔记（一）
01.简单的网页架构
基础操作：CTRL+/ ：添加注释。
推荐使用浏览器：谷歌浏览器
**********************************************************************************
最简单最基础的网页含有以下内容，即：html,head,body
<html>
<head></head>
<body>
</body>
</html>
<!-- html标签，根标签/根元素，所有的网页内容都写在html中
开始标签和结束标签中间，一个页面只能一个html标签 --><!-- 最最简单的网页结构 -->
<html><!-- head标签 保存一些原信息 他里面的内容，用户看不到，主要是帮助浏览器编译带吗 --><head></head><!-- body标签 书写网页的主体内容 ，给所有用户看，都写在body里面 --><body>我的第一个页面</body>
</html>html：
html标签，根标签/根元素，所有的网页内容都写在html中
开始标签和结束标签中间，一个页面只能一个html标签
head：
head标签 保存一些原信息 他里面的内容，用户看不到，主要是帮助浏览器编译代码
body：
body标签 书写网页的主体内容 ，给所有用户看，都写在body里面.
02.文档声明
文档声明 <!DOCTYPE html>：
写在html最上面，告诉浏览器我是按照html的规范来编写代码的
告诉浏览器也要按照规范编译，以免陷入怪异模式，出现乱码
<!-- 文档声明 写在html最上面，告诉浏览器我是按照html的规范来编写代码的
告诉浏览器也要按照规范编译，以免陷入怪异模式，出现乱码 -->
<!DOCTYPE html>
<html>
<head></head><body></body></html>03.title标签的使用
title标签：
是网页的标题，显示在标题栏我们不关注他显示在哪里，要关注他的意义，最重要的意义是推广，给浏览器搜索到
目前学习的是html的标签。要时刻关注语义，而不是样式
jw+数字：
任意生成”数字“个随机文字或符号
<!DOCTYPE html>
<!-- 目前学习的是html的标签
要时刻关注语义，而不是样式 -->
<html><head><!-- title是网页的标题，显示在标题栏我们不关注他显示在哪里，要关注他的意义最重要的意义是推广，给浏览器搜索到 --><title>你看我在哪里？？？</title></head><body>尘今商，用战大，牛。</body></html>04.meta标签
meta标签：
meta标签是一个自结束标签 也可以存一下元信息.自结束标签两种写法<meta>， 或者<meta />
在开始标签里，我们可以加属性和属性值，比如：
charset 字符集属性 设置密码本
utf-8 万国码属性值 某个密码本
GB 中国的密码本
GBK 中国扩展版密码本
编码：文字图片视频转成二进制
解码：二进制转文字图片视频
乱码：编码解码不是一个密码本
charset的设置就是为了防止乱码
<!DOCTYPE html>
<html><head><!-- meta标签是一个自结束标签 也可以存一下元信息.自结束标签两种写法<meta>或者<meta />在开始标签里，我们可以加属性和属性值charset 字符集属性 设置密码本utf-8 万国码属性值 某个密码本 GB 中国的GBK 中国扩展版 --><!-- 编码：文字图片视频转成二进制解码：二进制转文字图片视频 乱码：编码解码不是一个密码本charset的设置就是为了防止乱码--><meta charset="utf-8"><title>网页标题</title></head><body>那导卅量。</body>
</html>05.完整的网页结构
完整的网页结构应含有以下部分:
生成网页结构快捷键：shift+！
格式化快捷键：shift+alt+F
<!-- 生成快捷键 shift + !格式化代码 shift+alt+F-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页标题</title></head><body>爱作徒是会言，娘是。</body>
</html>06.html的规范总结
1.html标签有成双成对，也有自结束标签
2.html是不区分大小写。一般小写居多
3.标签可以嵌套，但不可以交叉嵌套
4.养成注释习惯，尽量注释
5.html，css，js都是一种宽泛的语言，容错率比较高，会自动纠错，但尽量避免，防止影响网站性能，但是他改的并不一定是你想要的
<!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>网页标题</title></head><body><!-- 1.html标签有成双成对，也有自结束标签2.html是不区分大小写。一般小写居多3.标签可以嵌套，但不可以交叉嵌套4.尽量注释5.html，css，js都是一种宽泛的语言，容错率比较高会自动纠错，但尽量避免，防止影响网站性能他改的并不一定是你想要的-->爱作徒是会言，娘是。</body></html>07.实体
什么是实体：
编写网页时有些字符打不出来，例如大于小于空格。这些字符已经提前被编译器或者浏览器征用，我们不能正常使用，我们要用一些额外的字符来代替， 这些额外的字符就叫实体
实体的语法：
&实体的名字;
常用的实体：
空格  
大于号 >
小于号 <
版权符号 ©l;
更多实体：https://www.w3school.com.cn/html/html_entities.asp
<!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><!-- 实体什么是实体：编写网页时有些字符打不出来，例如大于小于空格这些字符已经提前被编译器或者浏览器征用，我们不能正常使用，我们要用一些额外的字符来代替这些额外的字符就叫实体实体的语法：&实体的名字;常用的实体：空格  大于号 >小于号 <版权符号 ©更多实体：https://www.w3school.com.cn/html/html_entities.asp-->很开心</body>
</html>08.常用的标签
html 主要就学一些标签，30-40就够用
1.标题标签
h1.h2.h3.h4.h5.h6
h1一级标题 h2二级标题
有默认样式 h1-h6，字体大小逐步减小，字体加粗变黑
从语义看，h1到h6语义逐步降低，也是可以帮助浏览器检索内容，提高网络排名
注意：常用标题标签h1到h3
h1语义最重，所以一个页面一般只有一个
标题标签会独占一行，是块元素
2.段落标签 p
默认样式：段落与段落之间有较大的距离
段落标签也会独占一行
3.标题分组 hgroup
让标题之间有关系，没有默认样式
4.strong
强调标签 默认样式字体加粗
5.em
强调标签 默认样式字体斜体
面试题：在html中，有两个强调标签，他们什么区别？
默认样式上有区别
语义上也有区别：strong强调的是内容 em强调语音语调
一般情况，在实际使用中，em，strong不做区别
6.br 强制换行
是一个自结束标签
7. hr 分割线
是一个自结束标签
8. del 删除线
9.center 居中效果
10.div
是一个没有任何语义的标签块元素，独占一行
11.span
是一个没有任何语义的标签，一般用来包裹文字
12.引用标签 q
子曰：”学而时习之“
<!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><!-- html 主要就学一些标签，30-40就够用css 样式 --><!-- 标签 html 要关注语义 -->要下雨了<!-- 1.标题标签 h1.h2.h3.h4.h5.h6h1一级标题 h2二级标题有默认样式 h1-h6，字体大小逐步减小，字体加粗变黑从语义看，h1到h6语义逐步降低，也是可以帮助浏览器检索内容，提高网络排名注意：常用标题标签h1到h3h1语义最重，所以一个页面一般只有一个标题标签会独占一行，是块元素--><h1>要下雨了</h1><h2>下雨</h2><h3>雨</h3><!-- 2.段落标签 p 默认样式：段落与段落之间有较大的距离段落标签也会独占一行--><p>德快仆只，笔人到俭。</p><!-- 3.标题分组 hgroup 让标题之间有关系，没有默认样式 --><hgroup><h1>要下雨了</h1><h2>下雨</h2><h3>雨</h3></hgroup><!-- 4.strong 强调标签 默认样式字体加粗--><p>我真 <strong>帅</strong></p><!-- 5.em 强调标签 默认样式字体斜体 --><p>我真<em>帅</em></p><!-- 面试题：在html中，有两个强调标签，他们什么区别？默认样式上有区别语义上也有区别：strong强调的是内容 em强调语音语调一般情况，在实际使用中，em，strong不做区别--><!-- 6.br 强制换行 是一个自结束标签-->云将甲狱，<br>汪情洪必。<br><hr><!-- 7. hr 分割线 是一个自结束标签--><!-- 8. del 删除线 -->原价:<del>99999999</del><br>现价:9.9<!-- 9.center 居中效果 --><center><h1>且有国而明洪德感瞠。</h1></center><!-- 10.div 是一个没有任何语义的标签块元素，独占一行 --><div>领太许松，如他不鼓。</div><!-- 11.span 是一个没有任何语义的标签，一般用来包裹文字--><!-- 12.引用标签 q -->子曰：<q>学而时习之</q>
</body>
</html>09.img标签
开始标签里 可以添加多个属性，用空格隔开即可
img标签
引入外部的图片，也是一个自结束标签
4个属性
src 引入图片的路径 暂时将html文件和图片放在同一个文件夹
alt 是对图片的描述，正常情况下，alt内容是不显示，
当图片的路径出问题了，引入不成功，alt就会显示
它可以帮助浏览器检索图片，养成写alt的习惯
width 设置图片的宽度
height 设置图片的高度
一般情况下，不会同时设置width和height只用单独设置其中一个，另一个就会自适应调整
<!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标签 引入外部的图片也是一个自结束标签4个属性 src 引入图片的路径 暂时将html文件和图片放在同一个文件夹alt 是对图片的描述，正常情况下，alt内容是不显示，当图片的路径出问题了，引入不成功，alt就会显示它可以帮助浏览器检索图片，养成写alt的习惯width 设置图片的宽度height 设置图片的高度一般情况下，不会同时设置width和height只用单独设置其中一个，另一个就会自适应调整--> <img src="./FLAMING MOUNTAIN.JPG" alt="桌面背景图" height="300px">作业一：京东新闻
代码如下：
<!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><center><h1>看不见的完美硬币 ：细节的负担</h1></center><center><h2>创新公司皮克斯的启示</h2></center><hr><center>2015年05月05日 17:47</center><center><img src="./book.jpg" alt="书" height="300px" ></center><p> <em>细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</em></p><p> <em>但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</em></p><p> <em>怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</em></p><p> <strong>看不见的完美硬币：细节的负担 </strong> </p><p> 在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。</p><p> 皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect coin）”，这个词指代的是皮克斯制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中，好奇的小布第一次来到麦克和萨里的公寓，还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她，而她还是一步步走到了两摞高高堆起的CD旁，“别乱动！”麦克大喊起来，可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张， CD全部倒塌散落在了地板上。麦克抱怨道：“哎，那些CD都是按字母顺序排列好的！”小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟，观众们只能够看到几个CD盒而已，但皮克斯的制作人员不仅为每一个CD盒制作了封面，还使用了可计算物体在运动时渲染效果变化的着色器。</p><p> “你能看到所有CD盒吗？看不到。”萨拉菲安接着说，“把所有CD盒全部设计一遍，这工作有意思吗？其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚，所以就任劳任怨地把每张CD都雕琢了一番。也许，这其中的乐趣只有当事人才能体会吧。”</p>
</body>
</html>完成效果：
作业二：歌曲推荐 原点 西单女孩
代码如下
<!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><center><h1 id="0">歌曲推荐</h1></center><hr><center><h2>原点</h2></center><center><a href="#1"><p>西单女孩</p><p>去最后一张图片</p></a></center><br><center><p><strong>真的以为 我能闭目不言</strong></p></center><center><p><strong>早已远离 世俗尘缘</strong></p></center><center><p><strong>真的相信 我已超然物外</strong></p></center><center><p><strong>可将一切烦恼化青烟</strong></p></center><center><p><strong>从未想过 前世今生的界限</strong></p></center><center><p><strong>竟是如此 难以分辨</strong></p></center><center><p><strong>从未念过 往复轮回的记忆</strong></p></center><center><p><strong>在滚滚红尘的世间</strong></p></center><center><p><strong>一如既往孤独相伴</strong></p></center><center><p><strong>万千纷扰与我何干</strong></p></center><center><img src="./6a0fe65b6dc0ef3367c164c173e93991.jpeg" alt="原点1"height="200xp"></center><center><p><strong>那一刻 你走过我的身边</strong></p></center><center><p><strong>再也没能放下心中的思念</strong></p></center><center><p><strong>那一刻 见你甜美的笑颜</strong></p></center><center><p><strong>我已无法忘记有你的瞬间</strong></p></center><center><p><strong>那一刻 我飘落你的窗边</strong></p></center><center><p><strong>无声的卷起你垂落的珠帘</strong></p></center><center><p><strong>那一刻 我放弃神灵的箴言</strong></p></center><center><p><strong>不顾一切的站在你的面前</strong></p></center><center><img src="./54179c39fcbfaffe150f86fc9d68da00.jpeg" alt="原点2"height="200xp"></center><center><p><strong>那一天 我翘起了你的足尖</strong></p></center><center><p><strong>紧紧抓住了风中的红线</strong></p></center><center><p><strong>那一天你闭上了我的双眼</strong></p></center><center><p><strong>触到了空中久违的缠绵</strong></p></center><center><p><strong>那一天我们染上了白色发线</strong></p></center><center><p><strong>携手相望那沧海的变迁</strong></p></center><center><p><strong>那一天面对你老去的脸</strong></p></center><center><p><strong>我看到的是你未变的容颜</strong></p></center><center><p><strong>一悲一喜 一枉然</strong></p></center><center><p><strong>一草一木 一红颜</strong></p></center><center><img id="1" src="./d1d3a97345d65963049bdc458c79ae23.jpeg" alt="原点3"height="200xp"></center><hr><center>友情链接：<a href="https://www.kugou.com/song-36/76s6m47.html?from_360#hash=3E823C871E7CAE780A004D5BE47A609D&album_id=15820381">酷狗音乐</a> | <a href="https://music.163.com/#/song?id=32737581">网易云音乐</a> | <a href="https://www.bilibili.com/video/BV1wx411V7gW/">哔哩哔哩</a></center><center><a href="#0">回到顶部</a> | <a href="https://baike.baidu.com/item/%E6%AF%94%E5%B0%94%C2%B7%E7%9B%96%E8%8C%A8/83241">联系我</a></body>
</html>实现效果：
我的HTML学习笔记（一）相关推荐
- PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...
- 容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
- 2020年Yann Lecun深度学习笔记（上）
2020年Yann Lecun深度学习笔记(上)
- 知识图谱学习笔记（1）
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用 知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
- 计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记 采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
- Go 学习推荐 —（Go by example 中文版、Go 构建 Web 应用、Go 学习笔记、Golang常见错误、Go 语言四十二章经、Go 语言高级编程）
Go by example 中文版 Go 构建 Web 应用 Go 学习笔记:无痕 Go 标准库中文文档 Golang开发新手常犯的50个错误 50 Shades of Go: Traps, Gotc ...
- MongoDB学习笔记(入门)
MongoDB学习笔记(入门) 一.文档的注意事项: 1. 键值对是有序的,如:{ "name" : "stephen", "genda" ...
- NuGet学习笔记(3) 搭建属于自己的NuGet服务器
文章导读 创建NuGetServer Web站点 发布站点到IIS 添加本地站点到包包数据源 在上一篇NuGet学习笔记(2) 使用图形化界面打包自己的类库 中讲解了如何打包自己的类库,接下来进行最重 ...
最新文章
- BB84和B92协议
- CentOS 7安装mysql-5.6.17
- jdk卸载不干净怎么办_雨刮器“刮不干净”怎么办？老司机：用这招，分分钟解决！...
- 485. 最大连续1的个数 golang
- 一步步编写操作系统 55 CPL和DPL入门2
- 使用.NET System.IO.Pipelines和Kestrel套接字库创建Redis客户端
- layui admin 当前子页面 刷新 其他页面 layui 关闭 子弹窗
- k8s 1.16安装metrics server
- Retinex算法详解
- 怎么把ppt弄成链接的形式_ppt制作视频教程(就是把office powerpoint幻灯片转换成视频格式)...
- 大智慧策略投资终端_智慧历史：不需要宏伟的策略，只需开放
- c语言数字字符一起读,如何同时输入字符串和数字
- 怎样修改edge默认浏览器
- YOLO v2 学习与研究
- 为Onda v820w CH (v1) DualOS平板刷写Remix单系统
- 河南工业大学高级JAVA实验,大学_计算机控制技术实验报告河南工业大学4
- Personalized Federated Learning with Moreau Envelopes论文阅读+代码解析
- 下一代云原生应用交付会怎样发展？KubeVela帮大忙。
- 『已解决』0/1 nodes are available: 1 node(s) had taints that the pod didn‘t tolerate.
- python 等值线_绘图系列(1)：利用matplotlib绘制等值线图