HTML系统学习（1）
1）视频1开发工具：主要介绍了一些常见的浏览器（Chrome、Firefox、IE、Edge等）以及一些写代码的软件（vs code、sublime、HBuilder、Dreamweaver，Notepad++），介绍了必要的切图软件Photoshop
2）视频2浏览器内核:介绍了网页主要是由文字、图像、超链接、音频、视频及flash等元素组成
3）视频3Web标准
4）视频4：HTML骨架
HTML不是一种编程语言，而是一种描述网页的标记语言
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>第一天04课堂练习！</title>
<body>
<p>月薪过万 你我之间 黑马洗练 一飞冲天</p>
</body>
</html>
5）视频5：HTML标签分类
双标签：<>内容</>（可以理解成一对夫妻，/是关闭符）
单标签：
形式的（/是关闭符）,非常少，也叫空标签，是指用一个标签符号即可完整的描述整个功能的标签
标签关系分成两种：
① 嵌套关系：
<html>
<head>
<title>
</title>
</head>
</html>
② 并列关系：
<head></head>
<body></body>
在HBuilder中创建文件后，直接敲上一行代码：html:5接着再按一下tab键就可以实现（或者是更为暴力的是直接写上!接着再按一下tab键）下面的一大堆乱七八糟的东西
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
</body>
</html>
6）视频6：文档类型及字符集
7）视频7：排版标签
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>常用标签-新闻界面</title>
</head>
<body>
<h1>40.6摄氏度：上海创出140年气象史上高温新纪录</h1>
<h3>2016年7月27日10:58:26 来源：新华网</h3>
<hr />
<p>新华社上海７月２６日电（记者 李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海
有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值。</p>
<br />
<p>上海已经连续２天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，
对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，
这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，
特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。</p>
<br />
<p>在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站１４０年来仅出现了５次记录，
除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p>
<br />
<p>由于气温实在太高，上海２６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</p>
</body>
</html>
注意：p标签一行只能放一个，div也是
8）视频8：div span
Div span是没有语义的，是我们网页布局主要的2个盒子（div是division的缩写，意思是分割，分区 span是跨度、跨距、范围的意思）
<div></div>
<span></span>
（布局CSS+div）
Span可以集中在一行
9）文本格式化标签
前面的没有强调意义的之类的标签常用作是小部件
10）图像标签：单标签
①<img src = “图像URL”/>
语法中src属性用于指定图像文件的路径和文件名，是img标签的必须属性
③ alt图像（用于无法打开图片的情况，用于解释图片是什么方面的信息）
<img src = “1.jpg” alt = “这是我的大头贴”/>
④ 带有title的图像：
<img src = “2.jpg” title = “刘德华的图像”/>
鼠标悬停时显示的内容
⑤ 带有宽度的照片
<img src = “1.jpg” title = “刘德华的图像” width = “200px” height =”200px”/>
⑥ 带有边框的照片：
<img src = “1.jpg” title = “刘德华的图像” border = “2px”/>
11）链接标签（单词anchor的缩写，表示锚的意思），在HTML中创建超链接只需用标签环绕被链接的对象
文本或图像
(target用于指定链接页面的打开方式，取值有self和blank两种方式，其中self是默认值，blank代表的是打开新页面)
我的作品地址
12)锚点定位：（通过创建锚点链接，用户能够快速定位到目标内容）
创建锚点链接分为两步：
使用”a href = “#id名”创建链接文本
使用相应的id名标注跳转的位置
个人生活
<id = “live”>
13)base标签（可以设置整体链接的）在之间插入这个单标签
这样就可以让这个页面上的链接地址都以另一个窗口打开14）特殊字符：
---- nbsp;特殊字符nbsp;nbsp;----
其中这个 有几个就代表有几个空格
我们的段落标签语法格式是：
段落
（但是会发现这个会分成两行）如果只需要一行出现（怎么把这个<>显示出来）
我们的段落标签语法格式是：<p>段落</p>
版权符号：©
15）注释标签：
一些便于理解但是并不要在浏览器的显示
16）相对路径：
分为相对路径和绝对路径
其中相对路径分为三种情形：
同级和上一级以及上两级的分法
17）无序列表的使用及其注意事项：
列表的最大特点就是整齐、整洁、有序
无序列表ul（各个列表项之间没有顺序级别之分，是并列的）
<h3>你喜欢的水果</h3>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
</ul>
注意事项：
- 标签，不能放别的标签
但是在 - 里面是可以放其他的标签的
<h3>你喜欢的水果</h3> <ul> <li>苹果</li> <li>香蕉</li> <li>桃子</li> <li> <p>水果蔬菜</p> </li> </ul>18）有序列表
有序列表（ol）即为有排列顺序的列表<ol> <li>美国</li> <li>英国</li> <li>中国</li> <li>俄罗斯</li> </ol>19）四大名著案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第一天21四大名著案例</title> <base target="_blank" /> <!--这里使用base盒子的作用就是为了打开链接的时候打开另一个界面--> </head> <body> <h1>中国四大名著</h1> <ul> <li> <img src="https://img01.sogoucdn.com/v2/thumb/resize/w/120/h/120/zi/on/iw/90.0/ih/90.0/crop/x/0/y/0/w/120/h/120?t=2&url=http%3A%2F%2Fimg03.sogoucdn.com%2Fapp%2Fa%2F100520043%2F20170711193732&appid=200524" alt="《水浒传》"/>《水浒传》 <p>《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事， 暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。</p> </li> <br /> <li> <img src="https://img03.sogoucdn.com/v2/thumb/resize/w/120/h/120/zi/on/iw/90.0/ih/90.0/crop/x/0/y/0/w/120/h/120?t=2&url=http%3A%2F%2Fimg04.sogoucdn.com%2Fapp%2Fa%2F100520043%2F20170711193639&appid=200524" alt="《三国演义》" />《三国演义》 <p>《三国演义》是综合民间传说和戏曲、话本，结合陈寿的《三国志》、范晔《后汉书》、元代《三国志平话》、和裴松之注的史料，以及作者个人对社会人生的体悟写成。 现所见刊本以明嘉靖本最早，分24卷，240则。清初毛宗岗父子又做了一些修改，并成为现在最常见的120回本。</p> </li> <br /> <li> <img src="https://img03.sogoucdn.com/v2/thumb/resize/w/120/h/120/zi/on/iw/90.0/ih/90.0/crop/x/0/y/0/w/120/h/120?t=2&url=http%3A%2F%2Fimg01.sogoucdn.com%2Fapp%2Fa%2F100520043%2F20170711193556&appid=200524" alt="《西游记》" />《西游记》 <p>西游记以民间传说的唐僧取经的故事和有关话本及杂剧（元末明初杨讷作）基础上创作而成。</p> </li> <li> <img src="https://img04.sogoucdn.com/v2/thumb/resize/w/120/h/120/zi/on/iw/90.0/ih/90.0/crop/x/0/y/0/w/120/h/120?t=2&url=http%3A%2F%2Fimg02.sogoucdn.com%2Fapp%2Fa%2F100520043%2F20170711193435&appid=200524"alt="《红楼梦》" />《红楼梦》 <p>《红楼梦》是一部章回体长篇小说。早期仅有前八十回抄本流传，八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。 程伟元邀请高鹗协同整理出版百二十回全本，定名《红楼梦》。亦有版本作《金玉缘》。</p> </li> </ul> </body> </html>20）自定义列表:
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号，基本语法如下：<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> … <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释1</dd> … <dl>截图效果分别如下：
第一天，听视频听了好久，而且在例子中我感觉到好多东西没有用到，比如那个特殊字符。
有想要笔记和源代码的同学可以打开百度网盘：（百度网盘维护中，无法进行无提取码的分享）
链接：https://pan.baidu.com/s/1Qf1lV8852fRPO3Mqx2E1cg
提取码：jf2p
浙公网安备 33010602011771号