关于HTML系统学习（1）

第一讲，欢迎大家交流学习，HTML开工
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;----
其中这个&nbsp有几个就代表有几个空格
我们的段落标签语法格式是：

段落

（但是会发现这个会分成两行）
如果只需要一行出现（怎么把这个<>显示出来）
我们的段落标签语法格式是：

段落

版权符号：©

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>

里面也只能放li标签的，
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

关于HTML系统学习（1）相关推荐

零基础参加java培训的系统学习路线
零基础想要学习java技术,那么最好的选择就是参加java培训,进行系统的学习,以下就是小编为大家整理的零基础参加java培训的系统学习路线,希望能够帮助到正在学习java技术的零基础同学. 零基 ...
java学mybatis还用学jdbc吗,mybatis系统学习（二）——使用基础mybatis代替原始jdbc
mybatis系统学习(二)--使用基础mybatis代替原始jdbc 前言这一篇笔记的内容应当是建立在上一篇的基础之上,不论是使用的数据表,还是对应的实体类,都在上一篇有过说明. 有兴趣的或者对相 ...
Redis 系统学习目录
Redis 系统学习目录 1.redis是什么 2.redis的作者何许人也 3.谁在使用redis 4.学会安装redis 5.学会启动redis 6.使用redis客户端 7.redis数据结构 ...
Dubbo -- 系统学习笔记 -- 示例 -- 参数验证
Dubbo -- 系统学习笔记 -- 目录示例想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式参数验证参数验证功能是基于JSR303实现的,用户只需标识JSR303标准的验证 ...
java php mysql_系统学习javaweb13----MYSQL学习（使用PHP、SQL）1
系统学习javaweb13----MYSQL学习(使用PHP.SQL.mysqladmin)1 (本随笔是自学笔记,我学习的教程来自"菜鸟教程|MYSQL教程",十分感谢!) 目录 ...
python自学流程-Python系统学习流程图，教你一步步学习python
对于刚开始接触Python的小伙伴来说,没有思路方法,不知道从何开始学习,把软件环境安装好后就不知所措了!接下来我给大家分享下多位大牛倾力打造的python系统学习流程,一个月才设计完的! Pytho ...
.NET系统学习----Globalization Resources
前言: 在学习如何使用.NET资源文件以及如何开发World-Ready程序之前,我们先通过一个例子来看看为什么要使用资源文件,以及使用它的好处. 假设要在程序中根据当前的Culutre来设置Form ...
Java I/O系统学习系列二：输入和输出
编程语言的I/O类库中常使用流这个抽象概念,它代表任何有能力产出数据的数据源对象或者是有能力接收数据的接收端对象."流"屏蔽了实际的I/O设备中处理数据的细节. 在这个系列的第一篇 ...
linux进程的环境变量,LINUX系统学习一（进程、MMU,环境变量、getenv、fork、getpid/ge...
LINUX系统学习一(进程.MMU,环境变量.getenv.fork.getpid/ge LINUX系统学习一(进程.MMU,环境变量.getenv.fork.getpid/getppid.ps.ki ...
吴恩达登录知乎，亲自回答如何系统学习机器学习
如何系统地学习机器学习?知乎里有很多回答,近日,吴恩达老师亲自在知乎回答了这个问题: 作者:吴恩达链接:https://www.zhihu.com/question/266291909/answer ...

关于HTML系统学习（1）

关于HTML系统学习（1）相关推荐

最新文章

热门文章