html

学习HTML，主要就是学习标签。

静态页面组成元素

文字
图片
超链接
音频和视频

HTML结构

  
<!DOCTYPE html> <!-- 定义文档类型 默认为html5 必须在文档第一行 -->
<html lang="en"> <!-- lang表示语言，lang="en"：英文，lang="zh-CN":中文 -->

<head>
    浏览器解析的特殊内容(定时刷新，网页标题，外部文件)
</head>

<body>
    网页的主体内容
</body>

</html>

head标签的子标签

title标签

浏览器栏目标题

meta标签

定义页面特殊信息供搜索引擎分析，页面关键词，页面描述信息

属性

1.name

  
<!-- 网页关键词 -->
<meta name="keywords" content="前端开发,html+css"/><!DOCTYPE html>
            
<!-- 网页描述 -->
<meta name="description" content="学习前端技术"/>
<!-- 本页作者 -->
<meta name="author" content="flameking"/>
<!-- 版权声明 -->
<meta name="copyright" content="本站内容为原创,版权所有，禁止转载。否则必将追究法律责任。"/>

2.http-equiv：网页使用编码

  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!-- 简写形式 -->
<meta charset="utf-8"/>

3.网页自动刷新跳转

  
<!-- 当前页面在6秒后会自动跳转到http://www.*.com下 很多广告网站就是用这种方法实现页面定时跳转的 -->
<meta http-equiv="refresh" content="6;url=http://www.*.com"/>

link标签

用于引入外部样式文件(CSS文件)

style标签

用于定义CSS样式

script标签

用于定义页面JavaScript代码，也可用于引入外部JavaScript文件

base标签

没啥实际应用的标签

body标签内的常用标签

标题标签

h系列标签：h1~h6

  
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title></title>
 </head>
 <body>
 
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

</body>
</html>

段落标签

会自动换行

  
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>古诗词</title>
</head>
<body>
    <h1>爱莲说</h1>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p>
    </body>
</html>

换行标签

<br/>

文本标签

1.粗体标签

<strong>粗体</strong>

2.斜体标签

  
<!-- 有三种表达 -->
<i>斜体</i>
        <em>斜体</em> <!-- 因为语义性好，更常用-->
<cite>斜体</cite>

3.上标标签

  
<p>
    2<sup>2</sup>=4
</p>

4.下标标签

  
<p>
    H<sub>2</sub>SO<sub>4</sub>
</p>

5.中划线标签

<s>中划线</s>

6.下划线标签

<u>下划线</u>

7.大字号和小字号标签

  
<p>普通文本</p>
<big>大文本</big><br/>
<small>小文本</small>

水平线标签

<hr/>

特殊符号

空格
版权符 ©
注册商标 ®

div标签

语法

<div></div>

划分HTML结构，配合CSS来整体控制某一块的样式
可以放入绝大多数其他标签，如p标签，strong标签，hr标签等。

块级标签与行内标签，容器级标签和文本级标签

块级标签相对于容器级标签多了一个 p 标签，行内标签相对于文本级标签少了一个 p 标签其中 img 为行内块级元素

图片标签

  
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>见崎鸣</title>
</head>
<body>
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.eu52Jg2XlqzucnzBGF81igHaNK?w=187&h=333&c=7&o=5&dpr=1.25&pid=1.7" alt="见崎鸣" title="见崎鸣"/>
</body>
</html>

1.属性解析

title：鼠标放在图片上显示(给用户看的)
alt：图片无法显示会出现alt的提示文字(给浏览器看的)
src：一般使用相对路径，如果文件位置改变也不会有影响

2.图片格式

位图，放大缩小图片会失真
- jpg：图片体积大，不支持保存透明背景，适合颜色丰富的图片
- png：图片体积小，支持透明背景，不适合颜色丰富的图片，可以无损压缩以保证页面打开速度
- gif：适合制作动画
矢量图，放大缩小图片不会失真
- .ai
- .cdr
- .fh
- .swf：Flash动画

超链接

外部链接

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com/">百度</a>  <!--文本超链接-->
<!--图片超链接   target="_blank" 表示在新页面打开窗口 -->
<a href="http://www.baidu.com/" target="_blank"><img src="https://img2.baidu.com/it/u=3997374157,3590333969&fm=26&fmt=auto&gp=0.jpg"/> </a>
</body>
</html>

内部链接
锚点链接

注意：超链接被

iframe框架

实现内嵌框架，指在一个页面中嵌入另一个页面

  
<!-- width：内嵌页面的宽度 height：长度 -->
<iframe src="页面地址" width="640" height="100" ></iframe>

如何应用：

在内嵌窗口中打开任意链接

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
    <style>
        ul{list-style-type: none;}
    </style>
</head>
<body>
    <iframe src="https://www.taobao.com/" width="1529" height="314" name="window"></iframe>
    <ul>
        <li>Top1:<a href="https://www.taobao.com" target="window">淘宝</a></li>
        <li>Top2:<a href="https://www.sina.com.cn" target="window">新浪</a></li>
        <li>Top3:<a href="https://www.163.com" target="window">网易</a></li>
    </ul>
</body>
</html>

这两个元素通常作为文档的页眉和页脚，它们都是块内元素

nav

这个元素通常用来表示导航链接，它是块内元素，它本身不具有任何意义，只是标识导航链接

section

这个元素通常用来包含一个无意义的内容，与div类似，通常与footer、header一起使用