一. 体系介绍
浏览器：（------人
②HTML：人的肉体
③CSS：人的衣服/给人化妆
①JavaScript（JS）：人的灵魂/人的大脑
）
二.HTML-入门
1.HTML概述
为什么要学HTML:：用HTML写网页
文本：纯文字
- 超文本：超越了文本的功能范畴。 音乐、图片、电影、各种样式的文字
- 标记语言：标签语言
- <开始标签> </结束标签>
- XML：自由
- HTML：固定的标签，固定语法
- HTML：是一个标签所组成的语言。可以显示音乐、图片、电影…..超文本内容
- 作用：用来写网页的。
扩展：
编程语言：Java （先编译 后执行）
标签语言：XML
HTML （直接可以解析执行）
2. HTML入门案例
Html文件的扩展名： .html 或 .htm (老格式)
步骤1：快捷创建HTML文件（不要放在SRC下）
步骤二:命名
步骤三:简单操作
3. HTML基本语法
1、HTML不需要编译，直接使用浏览器即可打开执行（谷歌浏览器）
2、HTML的标签名都是预先定义好的，每一个标签都有它的作用。
3、HTML标签名不区分大小写。建议使用小写标签名
4、<开始标签> 内容体/子标签 </结束标签>
5、空标签：没有内容体的标签。 <开始标签/>
6、HTML代码中的空格和换行解析时会被忽略
- 空格：
- 换行：<br/>
7、标签属性：
写在开始标签上的。属性名提前定义好的。
<标签名 属性名1=”属性值1” ……>
属性值建议使用双引号。
4. HTML标准代码格式
开发中，要求HTML必须写为标准代码格式：
<html> <head> <title>这是标题</title> </head> <body> 这里是正文 </body> </html>
- <html>：好比Java类花括号，包裹了HTML中所有的代码
- <head>: 头 （说明信息、功能信息）
- <title>:标题
<body>: 体 （展示给用户看的信息）
三.基本标签:
1.注释
在模板代码中，我们使用到了HTML注释
- 格式：<!-- 注释内容 -->
- 注释特点：
- 浏览器查看时，不显示。右键查看源码可以看到。
- 注释标签不能嵌套。
2. 标题标签：
<h1>~<h6>
其中<h1>最大
<h6>最小
每个标题都会自动换行
简单例子:
3. 水平线标签：
水平线标签：<hr />
用于在页面中创建一条水平分隔线。
属性：
| 属性名 |
属性说明 |
| size |
定义水平线的粗细 单位是像素
|
| color |
定义水平线的颜色 颜色可以是英文单词：例如red,blue,yellow 颜色也可以是编码：#FFFFFF
|
| width |
定义水平线的长短 单位是像素/百分比 |
html长度、宽度、高度：
- 像素。Px （默认的计量单位）
屏幕上的任何信息，例如一张图片，也是由各个一模一样大小的标准色块组成的。
一个色块我们称之为一个像素。
固定的计量单位
- 百分比：
像素是固定值。
百分比是级联改变的动态值。
动态的计量单位
Red红色：
Yellow黄色：
Blue蓝色：
Pink粉色
- 颜色编码：
#000000
#FFFFFF
#000000 表示黑色，#FFFFFF白色，#FF0000红色，#00FF00绿色，#0000FF蓝色
#112233可以简写为#123
#00FF00可以简写为#0F0
4. 字体标签：
<font>
属性：
| 属性名 |
属性说明 |
| size |
定义字号大小 默认大小3号。 取值范围:1~7 1号最小，7号最大
|
| color |
定义字体的颜色
颜色可以是英文单词：例如red,blue,yellow
颜色也可以是编码：#FFFFFF
|
标签上有横线，是过期是被替代的标签。
5. 格式化标签：
- 粗体：<b></b>
- 斜体：<i></i>
6. 段落标签：
今日总结:
- HTML:用来写网页，超文本标记语言。
- 超文本：音乐、视频、图片。。。。。
- 标记语言：标签所组成的语言。
- 标记语言：不需要编译，可以被浏览器直接解析执行。
- 扩展名：.html 或 .html
- <开始标签> 内容体 </结束标签>
- <开始标签/> <br/>换行
- 属性：放在开始标签上。
- 标签名不区分大小写，建议小写。
- 标签嵌套：
- 包裹嵌套：
<a>
<b></b>
</a>
2. 交叉嵌套：不支持
<a>
<b>
</a>
</b>
- <head>： 说明信息，功能信息
<title> 网页标题
- <body>：展示信息
- HTML源码中空格和换行会被忽略。
- 空格：
- 换行：<br/>
- 段落标签：<p> 段前段后自动加空行
- 粗体标签：<b>
- 字体标签：<font>
size:1~7
color:
英文单词：red,blue,yellow
颜色编码：#000000
- 水平线标签：<hr/>
size: 粗细
color: 颜色
width: 宽度/长度
HTML宽度、长度、高度计量单位：
固定：px 像素
动态：百分比
标题标签：<h1><h2>…..<h6>
<h1>最大
<h6>最小
自动换行
看完恭喜你,又知道了一点点!!!
你知道的越多,不知道的越多!
~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!
