HTML
一、网页的结构，表现，行为
结构
HTML 用于描述页面的结构
表现
CSS用于控制页面中元素的样式
行为
javascript用于相应用户操作
二、HTML简介
1、HTML是超文本标记语言
2、它负责网页的三个要素之中的结构
3、HTML用标签的形式来标识网页中的不同组成部分
4、所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
三、HTML编写第一个网页
<html>
<head>
<title>我在哪？</title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章</h2>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
</body>
</html>
<标签名>
里面填写标签名字，标签一般成对出现，有开头和结尾，但也存在一些自结束标签，标签给所写文本划分结构
四、自结束标签和注释
自结束标签
<img>
<img />
<input>
<input />
<!--
这是注释的写法，注释中的内容会被浏览器忽视，但会在源码中出现
注释不能嵌套
-->
五、在标签中设置属性
<html>
<head>
<title>属性</title>
</head>
<body>
<!-- 在标签中（开始标签或者自结束标签）可以设置属性
属性是一个名值对
-->
<h1>这是一个关于设置<font color="red" size='3'>属性</font>的语言</h1>
</body>
</html>
在标签中（开始标签或者自结束标签）可以设置属性
属性是一个名值对
属性和标签名或其他属性应该用空格隔开
属性名不能瞎写，根据文档规定编译
有些有属性值有些没有
属性值用引号引起来
六、文档声明（doctype）
<!doctype html>
<!-- 告诉浏览器当前网页的版本-->
<html>
<!-- 通过meta设置网页的字符集，避免乱码 -->
<meta charset="utf-8">
<head>
<title>文档声明</title>
</head>
<body>
</body>
</html>
七、实体
在html中有时候需要使用特殊的转义字符来实现所要表达的含义
比如：
空格，换行，大于号，小于号等等
<!-- 表示空格
>大于号
<小于号
© 版权符号
-->
<h1>哈     哈</h1>
a > b < c
八、meta标签
meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中，meta 标签的用处很多。meta 的属性有两种：name和http- equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个：
name 属性
1、用以说明生成工具；
2、向搜索引擎说明你的网页的关键词；
3、告诉搜索引擎你的站点的主要内容；
4、告诉搜索引擎你的站点的制作的作者；
，，，，，，
<meta name="Keywords" content="html5,css">
<meta name="description" content="这是一个不错的网站">
<!--meta标签主要用于设置网页中的元数据，元数据不是给用户看的
charset 指定网页的字符集
name 指定数据的名称
content 指定数据的内容
Keywords是网站的关键字，可以同时指定多个关键字，关键字之间用逗号隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,
电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
description用于网站的描述
title标签 的内容会作为搜索结果的超链接上的文字显示
-->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com ">
<!--
<meta http-equiv="refresh" content="3;url=http://www.baidu.com ">
将页面重定向到另一个网站
3 代表隔几秒开始跳转
url后面代表跳转的网址
-->
九、块和行内
块元素（block element）
在网页中一般用块元素来布局
行内元素（inline element）
主要用来包裹文字
一般在块元素中放行内元素，而不能在行内元素中放块元素
-p元素中不能放任何块元素
浏览器在解析网页时，会自动对不符合规范的内容进行更正
十、语义化标签
在网页中HTML专门负责网页的结构
所以在使用html标签时应该关注标签的语义而不是样式
<!--
标题标签
h1~h6一共有六级标题
从一到六重要性依次递减
h1最重要，h6最不重要
h1在网页中重要性仅次于title标签，一般情况下只有一个h1
一般只会使用到h3，h4~h6最少用
在页面中独占一行的元素为块元素（block element）
标题标签也是块元素
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
p标签也是一个块元素
-->
<p>在p标签中的内容表示一个段落 </p>
<!--
hgroup组标签，可以将一组相关的标签放在一起
-->
<hgroup>
<h1>一级标题</h1>
<h2>二级标题</h2>
</hgroup>
<!--
em标签表示语音语调的加重
在页面中不会独占一行的元素为行内元素
strong标签强调重要内容
-->
<p>今天天气<em>真</em>不错！</p>
<p>今天必须<strong>完成作业</strong>！</p>
<!--
blockquote引用，，说过的话，长引用
是一个块元素
-->
我说：<blockquote>我从来没有说过这些话</blockquote>
<!--
q引用，，说过的话，短引用
是一个行内元素
br标签表示换行
-->
<br><br>
子曰<q> 学而时习之，温故而知新</q>
十一、布局标签
header 表示网页的头部
main 表示主体部分（一个页面中只有一个）
footer 表示网页的底部
nav表示网页中的导航
aside 和主题相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div 没有语义，就用来表示一个区块，目前来讲还是较为常用的布局元素
span 行内元素，没有任何语义，一般用于网页中选中文字
.
.
.
十二、列表
<!--
列表（list）
1 铅笔
2 尺子
在html中也可以创建列表，html一共有三种
1有序列表
2无序列表
3定义列表
无序列表 用ul标签来创建无序列表
有序列表 用ol标签来创建无序列表
定义列表 用dl标签来创建无序列表 用dt来表示定义的内容
用dd来解释定义的内容
列表之间可以互相嵌套
-->
<ul>
<li> 结构</li>
<li> 表现</li>
<li> 行为 </li>
</ul>
<ol>
<li> 结构</li>
<li> 表现</li>
<li> 行为 </li>
</ol>
<dl>
<dt>beautiful</dt>
<dd>漂亮</dd>
</dl>
十三、超链接
超链接
可以从一个页面跳转到新的页面，也可以是跳转到当前页面的其他位置
使用a标签来定义超链接
属性
href指定跳转的目标路径
值可以是外部网站的地址
也可以写一个内部页面的地址
超链接是一个行内元素，在a标签中可以嵌套除它自身以外的任何元素。
<a href="#bottom">去底部</a>
<br>
<a href="http://www.baidu.com">超链接</a>
<br><br>
<a href="./inner/lianjie2.html">超链接2</a>
当我们需要跳转到服务器内部页面时，一般都会使用相对路径
相对路径都是.或者..开头
./
../
./可以省略不写，如果不写./也不写../相当于默认写了./
./表示当前文件所在的目录
../表示当前文件所在的上一级
<a href="./inner/lianjie2.html" target="_blank">超链接2</a>
<a id="bottom" href="#">top</a>
target属性 用来指定超链接打开的位置
_self 默认值，在当前页面打开超链接
_blank 在一个新的页面打开超链接
#表示回到当前页面的顶部
id属性 唯一不重复
每一个标签都能添加id属性
同一个页面中不能出现重复的id属性
javascript作为href的属性，此时点击这个链接什么也不会发生
十四、图片标签
<img src="./推人.PNG" alt="推箱子的素材">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3840277674,3692629638&fm=26&gp=0.jpg" width="800" height="800">
图片标签
img引入图片
img属于替换元素
src属性指的是外部图片的路径（路径规则和超链接一样）
alt是关于图片的描述（会在图片无法加载时显示）
width图片宽度
height图片高度
宽和高只改一个，图片会等比例缩放，一般在pc端不建议修改图片大小
图片格式
jpeg（支持的颜色丰富，不支持透明效果，不支持动图）
一般显示照片
gif（支持的颜色少，支持简单透明效果，支持动图）
颜色单一图片，动图
png（支持的颜色丰富，支持复杂透明效果，不支持动图）
专为网页而生
webp
谷歌新推出的网页中图片的一种格式
具备其他图片的所有优点
缺点 兼容性不好
base64
将图片用base64进行编码，可以直接将图片转换为字符引入图片
一般都是需要和网页一起加载的图片才用base64
效果一样，用小的
效果不一样，用好的
十五、内联框架
<iframe src="http://www.baidu.com" width="800" height="800" frameborder="0"></iframe>
内联框架
iframe标签
用于向当前页面中引入其他页面
十六、音视频标签
<audio src="./source/attheage.mp3" controls></audio>
<audio controls>
<source src="./source/attheage.mp3">
<embed src="./source/attheage.mp3" type="audio/mp3" width="300"height="100">
</audio>
audio
标签中用来引入外部的音频文件
音视频文件引入时默认不允许用户自己控制播放停止
controls属性
是否允许用户控制播放
autoplay
音频自动播放 如果设置了autoplay，则音乐在打开页面时会自动播放
但是目前来讲，大部分浏览器都不会自动播放
loop循环播放
embed用于ie8以下的播放器
video标签使用和audio标签类似
学习总结，有所不足，还望订正
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
