<!--文档声明，当前网页版本为html5-->
<!Doctype html>
<!-- 根标签（元素），网页开发的所有内容都要写到根标签中 -->
<html>
<!-- head是网页的头部，其内容不会直接出现在网页中，主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>
<!-- meta标签用来设置元数据，这里主要设置网页字符集，避免乱码问题 -->
<meta charset="utf-8">
<!-- title内容显示在浏览器标题栏，搜素引擎主要根据其内容来判定网页主要内容 -->
<title>实体</title>
</head>
<!-- body是html的子元素，表示页面的主体，网页上所有可见内容都应该写在body里 -->
<body>
<!-- 在HTML中不能直接写一些特殊符号，比如：大于和小于，连续的多个空格等。
我们需要使用HTML中的实体（转义字符）来书写特殊符号
实体语法：&名称;或者&#数字； -->
<p>今天 天气不错</p>
<p>a<b>c</p>
<p>It's a beautiful day.</p>
</body>
</html><!--笔记：！+ Tab或回车 可以获得html的基本结构框架-->
<!DOCTYPE html>
<!-- lang为语言，“en”为英语，“zh”为中文 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 注释快捷键'ctrl+/'-->
<h1></h1>
<p></p>
<!--笔记：live server打不开IE网页时更改系统变量，一般添加Path路径-->
</body>
</html>1、在标签中（开始标签和自结束标签）中还可以设置属性，属性是一个名值对（x=y）；
属性和标签名或其他属性应该用空格隔开；
属性不能瞎写，要根据文本规定来写；
有些属性有属性名个属性值，但有些只有属性名，属性值要用单或双引号引起来；
2、meta标签用来设置元数据，元数据不是给用户看的，属性：
charset 指定网页字符
name 指定数据名称
content 指定数据内容
http-equiv 将页面重定向到另一个网站
keywords 表示网站关键字，可以同时指定多个关键字，关键字中用逗号隔开；
description 用于指定网站描述，且会显示在搜索引擎的搜索结果中；
title标签的内容会作为搜索结果的超链接上的文字显示；
<meta charset="UTF-8">
<meta name="keywords" content="html5,css3,前端设计">
<meta name="description" content="这是一个不错的网站">
<meta http-equiv="refresh" content="3;url=http://www.baidu.com" >3、语义化标签重点在其语言结构，而不是其表现；
标题标签：
h1~h6一共六级标题
从h1~h6重要性递减
h1在网页的重要性仅次于title标签，一般情况下一个页面中只有一个h1
一般情况标题标签会使用到h1~h3,h4~h6很少用
块元素（block element):在页面中独占一行的元素，用来对网页进行页面布局；
标题标签都是块元素，p段落标签也是块元素，还有blockquote长引用标签
行内元素（inline element):在页面中不会独占一行，，主要用来包裹文字；
em标签用于语音语调的加重;strong标签表示强调重要内容；q标签表示短引用
br标签表示页面换行；hgroup标签表示标题分组，可以将一组相关的标题同时放入其中；
一般情况下会在块元素中放入行内元素，而不在行内元素中放入块元素
块元素中基本什么都可以放，但是p元素中不能放任何块元素
浏览器解析网页时会自动修正在网页中不合规范的内容，如：
-标签写在根元素外部
-p标签嵌套块元素
-根元素出现除head和body以外的子元素等
具体修正过程可在“网页-右键-审查元素“查看
4、列表：1、有序列表 2、无序列表 3、定义列表
有序列表：使用ol标签创建，li表示列表项
无序列表：使用ul标签创建，li表示列表项
定义列表：使用dl标签创建，dt表示定义内容，dd表示定义内容解释说明
列表之间可以相互嵌套
5、超链接指从一个页面跳转到另一个页面，或者是当前页面的其他位置
使用a标签来定义超链接
属性： href指定跳转的目标路径
-值可以外部网络的地址，也可是内部网络地址
target用来指定超链接打开的位置；
可选值：_self 默认值 在当前页面中打开
_blank 在新的页面中打开
超链接是一个内行元素，a标签可以嵌套除自身以外的其他元素
绝对路径是外部网络地址；需跳转到服务器内部页面时，一般选用相对路径
相对路径都是使用.或..开头，./可以省略不行，一般不写./和../默认为./;
./ 表示当前文件所在目录
../ 表示当前文件所在上级目录
<a href="../.././target/01.target.html">超链接</a>
<a href="03.meta.html" target="_blank">超链接</a>6、id属性（唯一不重复）：
-每一个标签都可添加一个id属性；
-id属性是元素的唯一标识，同一页面不能出现重复id属性；
将href属性设置为：#目标元素的id属性值 即可跳转到页面指定位置；
直接将超链接的href属性设置为#，当点击超链接是页面不会发跳转，而转到当前页面的顶部；
可以将href属性设置成javascript:; 则点击此链接时不会发什么任何变化，可用于开发中超链接路径的展位符使用（#一般也可以）；
<a id="bottom" href="#">去顶部</a>7、图片img标签用于当前页面引用一个外部图片
img这种元素属于替换元素（介于块和行内元素之间，具有两种元素的特点）
属性：
src 指定外部图片路径（路径规则和超链接是一样的）
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器在图片无法加载时显示
搜索引擎会根据alt的内容来识别图片，若不写则图片不会被搜索引擎所识别
width 图片的宽度（单位是像素）
height 图片高度
高度和宽度只修改一个，则另一个会等比缩放
注意： 一般情况下在pc端不建议修改图片大小，需要多大裁多大，但在移动端经常需要对图片进行缩放（大图缩小）
图片格式：
jpeg(jpg)
-支持的颜色比较丰富，不支持透明效果，不支持动图
-一般用来显示图片
gif
-支持颜色比较少，支持简单透明，支持动图
-颜色单一图片，动图
png
-支持颜色丰富，支持复杂透明，不支持动图
-颜色丰富，复杂透明图片（专为网页生）
webp
-谷歌新推出专用表示网页中图片的格式
-具备其他格式的所有优点，而且文件特别小
-兼容性不好
选用原则：1、效果一样用小的；2、效果不一样用效果好的
<img src="./img/1.jpg" width="200" alt="猪小屁">8、内联框架：用于当前页面引入一个其他框架
src 指定要引入的路径；
frameborder 指定内联框架的边框，0为无，1为有；
<iframe src="http://www.qq.com" width="800" height="600" frameborder="0"></iframe>9、audio 标签用来向页面引入外部音频文件，且默认情况下不允许用户自己控制播放和暂停
属性: controls 是否允许用户控制播放(写上即为允许)；
autoplay 音频是否自动播放 只有在打开页面时自动播放，目前一般浏览器都不会自动播放(写上即为允许)；
loop 音频循环播放(写上即为允许)；
<audio controls>
<!-- 以下三种写法包含所有版本，解决浏览器不兼容问题 -->
<source src="./music/1.mp3">
<!--<source src="./music/1.ogg"> 另外一种播放类型-->
<embed src="./music/1.mp3" type="audio/mp3">
</audio> video标签表示向网页引入一个视频，使用方法与audio基本一致
<video controls>
以下三种写法包含所有浏览器版本，可解决不兼容问题
<source src="./video/1.mp4">
<source src="./video/1.webm">webm是谷歌新开发的视频类型
<embed src="./video/1.mp4" type="video/mp4">
</video>iframe标签用来引用外部视频界面
<iframe src="https://player.mgtv.com/mgtv_v6_out/main.swf?video_id=9954677" width="800" height="600" frameborder="0"></iframe> 
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
