1. HTML介绍
1.1 什么是HTML
HyperText Markup Language,超文本标记语言.简单来说,HTML文件本质上就是一个文本文件,但是这个文本文件是带有标签的. 不同的标签会有不同的作用和含义,可以将一个文本文件的内容变得更丰富.比如
玲珑骰子安红豆,入骨相思知不知
这一句话,我想让它变成红色就可以使用一个标签
<front color="red">玲珑骰子安红豆,入骨相思知不知</front>
让一个正常的人类去解读这种标签,并且靠想象力把它想象成红色显然是一件很蛋疼的事情. 所以,我们把解析标签的事情交给浏览器了. 也就是说,浏览器可以解析HTML标签,然后把它按照标签的含义把”文本”展示出来. 换句话说,HTML就是告诉浏览器,一个页面应该是什么样子的. 比如哪里该大,哪里该小. HTML的学习其实就是学习各种html标签
1.2 HTML文件的基本格式
- 一个HTML文件首先要告诉浏览器,我是一个HTML文件,所以最外层需要有一个html标签.
- 要有头(head) 有身体(body)
- 其中head中存放一些属性和辅助信息. 比如标题,引用的css和js文件,以及一些SEO的信息.
- body中存放的是真正会在浏览器中展示的数据.
一个HTML的文件基本格式如下:
<html>
<head>
存放属性的信息，辅助性的信息
引入外部的文件（重要）
会先加载
</head>
<body>
存放的是真正的数据
</body>
</html>
- 绝大部分的标签都是成对出现的.
- 想要对标签修饰的内容有更丰富的意义,标签可以被指定一些属性
- 属性与属性值之间以=连接.属性值,可以用双引号,单引号甚至可以不写引号,一般情况下都是使用双引号,这个在语法上没有要求.
2. 排版的标签
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>排版的标签</title>
</head>
<body>
<!-- HTML的注释 -->
<!--
*
* <br /> 换行
* <hr /> 一条水平线
* color: 颜色
* 直接写英文单词,red green blue
* RGB三原色 #ffffff
* 宽度
* 像素 200px
* 百分比 30%
> 区别,像素是固定的. 而百分比是会根据窗口大小变化的.
* <p></p> 段落标签
* 段落开始和结束的位置会留一个空行
* align:对齐方式
* left
* center
* right
* 空格
* 一个区域
* <div></div>
* CSS+div在网页上进行布局
* 块元素,自带换行光环
* <span></span>
* 行元素,不会换行
* 通过js动态添加内容的时候,经常使用
-->
我 的 题 目
<hr color="red" width=30% />
<p align="left">
一尺深红胜曲尘，天生旧物不如新<br />
合欢桃核终堪恨，里许元来别有人<br />
井底点灯深烛伊，共郎长行莫围棋<br />
玲珑骰子安红豆，入骨相思知不知<br />
</p>
<div>这是存放在div区域的一些文字</div>
<div>图片</div>
<div>新闻</div>
<span>这是存放在span区域的一些文字</span>
</body>
</html>3.字体标签
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>字体标签</title>
</head>
<body>
<!--
* 字体标签
* <font></font>
* color: 颜色
* size: 字体大小
* 最大值和最小值
* 最小值:1
* 最大值:7
* 默认值:3
* 另一种写法, +2 默认值+2
* face: 字体的类型
* 标题标签
* <h1></h1> ...<h6></h6>
* 粗体
* <b></b>
* 斜体
* <i></i>
* 标签和嵌套
* 转义字符
* < <
* > &at
* & &
* 滚动的字幕
* 太土了...都没人用了
* <marquee></marquee>
-->
<font color=red size="7" face="楷体">我被字体标签修饰了</font><br/>
<font color=red size="1" face="楷体">我被字体标签修饰了</font><br/>
<font color=red size="5" face="楷体">我被字体标签修饰了</font><br/>
<font color=red size="+2" face="楷体">我被字体标签修饰了</font><br/>
<hr/>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<marquee>这是一个老土的滚动字幕</marquee>
</body>
</html>4.列表标签
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列表标签</title>
</head>
<body>
<!--
#列表标签
- 格式化成一个列表
##不常用的一种列表
```
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>
```
##有序列表和无序列表
###有序列表
```
<ol>
<li>数据的条目<li/>
</ol>
```
**<ol>标签的属性**
- type="a" 指定列表序号方式
- start="" 指定起始序号
###无序
```
<ul>
<li>数据的条目</li>
</ul>
```
-->
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>
<h3>有序列表</h3>
<ol type="a" start="3">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
<h3>无序列表</h3>
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
</body>
</html>5.图片标签
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
##图片标签
<img/>
- 属性:
- src="图片的地址"
- width="图片显示的宽度"
- height="图片显示的高度"
- alt="图片的说明文字"
-->
<img src="../imgs/girl4.jpg" width="60%" height="70%" alt="我了个去!">
<marquee>
</marquee>
</body>
</html>6.超链接标签
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>超链接标签</title>
</head>
<body>
<!--
##超链接标签
**作用**
- 链接资源
- 必需的属性 href="url"
- 需要填写协议,默认是file,如果浏览器解析不了,会弹出下载
- 支持自定义协议
- 定位资源
- name属性可以定位一个锚点
- 通过href="#锚点名称" 可以通过超链接来定位到锚点
**语法**
`<a></a>`
-->
<a href="http://www.thecatcher.net">野生程序员</a>
<!-- 这就是一种自定义协议,点击这个链接之后,浏览器会调用本地软件打开该链接 -->
<a href="thunder://lkjasdasdhkjnkj">监狱风雨2</a>
<hr/>
<a name="top"></a>
balabalabla....
<a href="#top">返回顶部</a>
</body>
</html>