HTML5入门
2018-08-20 本文已影响0人
想努果
一、HTML简介
html是一个超文本标记语言；
纯文本 是 只能编写字，不能编辑图片，音频，视频等格式化的内容；但不能保存文本的格式，大小，字体，颜色等内容；只能保存内容；（使用记事本编写内容，改变颜色，大小；如果换有一个记事本打开这个纯文本文件，颜色，大小都没有了）；
然而超文本就是可以显示纯文本以外的东西；
所以网页也就是文本文件，只不过后缀名是.html；
标记：即标签；html中有很多很多标签，都是成对出现的；例如一级标签：<h1>***</h1>
二 、标签：
1.<html> </html> 根标签，一个网页中只有一个这样的标签；
2.<head></head> 头标签，编写网页的头部，不会显示在页面上；
3.<title></title> 标题标签，是 <head>的子标签；显示在网页的标题位置；对于搜到引擎特别重要，影响搜索排名；
4.<body> </body> 主体标签，是网页的真正主体内容；所以用户看的见得内容都是在这个标签中编写的；
5. 注释标签；
image
6.<font></font> 文本格式标签，在标签头可以设置属性；但是在开发中基本不使用这种标签；
以为这是表象属性，是通过css来进行设置的；
image
三、网页文档声明
<!DOCTYPE HTML> 在网页的头部天机这个标签，表明是HTML5的版本开发的网页；
四、设置页面编码格式
在<head>节点下添加 ：<mate charset="utf-8"/>
这个标签的目的就是告诉浏览网页的编码格式，让其浏览器使用对应的编码格式进行解码；不然会出现乱码；
五、内容标题
<!doctype html>
<html>
<head>
<mate charset="UTF-8"/>
<title>标题</title>
</head>
<body>
<!--
html存在六种内容标题，重要性依次降低；
字体大小依次降低，但是可以动过css进行控制字体大小；
一级标题是最重要的涉及到搜索引擎的搜索，仅次于title标签；
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
六、段落标签
<!doctype html>
<html>
<head>
<mate charset="UTF-8"/>
<title>标题</title>
</head>
<body>
<!--
html存在六种内容标题，重要性依次降低；
字体大小依次降低，但是可以动过css进行控制字体大小；
一级标题是最重要的涉及到搜索引擎的搜索，仅次于title标签；
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
段落标签，独占一行，并且段落与段落之间会有距离；
在html中在多得空格都会解析成一个空格，换行也解析成一个空格
-->
<p>
这 是一个段落，
hello world
</p>
<p>这是一个段落，hello world</p>
</body>
</html>
七、换行标签（自结束标签）
<!--
段落标签，独占一行，并且段落与段落之间会有距离；
在html中在多得空格都会解析成一个空格，换行也解析成一个空格
那么要换行该怎么办呢？<br/>标签是一个自结束标签；就可以达到换行的目的；
-->
<p>
这 是一个段落，<br/>
hello world <br/>
</p>
<p>这是一个段落，hello world</p>
<!-- hr标签是在产生一条水平线，也是个自结束标签-->
<hr/>
八、实体（转义符）
QQ截图20180818000721.jpg
九、图片标签
<!--
img是图片显示标签，也是自结束标签
src 是图片的路径
alt 是对图片进行描述的，当图片显示不出来的时候会显示描述字样，但是不是所有的浏览器都是这样
主要是搜索引擎的在搜索的时候会对alt进行搜索，不然如何搜索到图片呢
width和height 属性；
-->
<img src="timg.gif" alt="美女" width="100px" height="500px"/>
十、相对路径
QQ截图20180819140432.jpg
十一、mate标签的相关使用
QQ截图20180819142602.jpg
十二、内联框架
QQ截图20180819172828.jpg
十三、超链接
QQ截图20180819211554.jpg
QQ截图20180819214319.jpg
QQ截图20180819214507.jpg
