写在前面（秃了也就强了）
刚入前端的菜鸟在线爬。。。。。如有错误烦请各位大佬指正（突然正经）
谈HTML前我们先聊聊什么是前端
根据W3S（w3school）标准，前端分为结构、表现、行为三个层面，而我们今天所谈的HTML就是前端的结构层面
HTML的基本结构框架为
**<html>
<head>
</head>
<body>
</body>
</html>**
其中，body标签之间的文本是可见的页面内容。
在HTML中，实体是很重要的一个存在，那么，什么是实体，为什么要使用实体呢？
实体的大体形式为**&xxx；**，它之所以会现世，主要是因为在HTML中部分字符的组合出现，浏览器会误认为是标签，导致错误。
简单例举一些实体：空格—— ；（non-breaking space牛逼视频/不是）、小于号——<；（less than）、大于号——>；（greater than）等等。（好像混进了什么奇怪的东西）
更多HTML实体符号参考
除此外，meta标签也很特殊，meta标签主要是设置网页的元数据（元数据：描述数据的数据）
我们需要认识meta的一些属性，像charset是指定网页的字符集、name指定数据的名称、content指定数据的内容
其中，name中的keywords指定网站的关键字、description指定网站的描述，网站描述会显示在搜索引擎的搜索的结果中
<meta charset = "UTF-8">
<meta name = "keywords" content = "HTML5,前端,CSS3">//注：里面的逗号为英文逗号
<meta name = "description" content = "正在开启前端之旅">
<meta http-equiv = "refresh" content = "3;url = https://www.baidu,com">//表示3秒后，将页面重定向到另一个网站
补：title标签的内容会作为搜索结果的超链接的文字显示
由于HTML专门负责网页的结构，所以对于HTML标签，应该专注标签的语义，而非样式（样式主要由CSS负责）
标题标签：h1 ~ h6 一共有六级标题（从h1到h6重要性递减）
注：h1在网页的重要性仅次于title标签，一般情况下一个页面只会有一个h1，一般情况下标题标签只会用到h1~h3
hgroup标签：用来为标题分组，可以将一组相关的标题同时放入到hground中（布局标签）
p标签：表示页面中的一个段落
em标签：表示语音语调的加重（斜体）
strong标签：表示强调，重要内容（加粗，和b标签效果类似）
blockquote标签：表示一个长引用（有缩进效果）
q标签：表示一个短引用（有双引号效果）
br标签：表示页面的换行
header标签：表示网页的头部（布局标签）
main标签：表示网页的主体部分（一个页面中只会有一个main，布局标签）
footer标签：表示网页的底部（布局标签）
nav标签：表示网页中的导航（布局标签）
aside标签：和主体相关的其他内容（侧边栏，布局标签）
article标签：表示一个独立的文章（布局标签）
section标签：表示一个独立的区块，当上面的布局标签都不能表示时使用section（布局标签，老备胎了、、、）
div标签：没有语义，就用来表示一个区块，目前来说div还是我们主要的布局元素
span标签：行内元素，没有任何语义，一般用于在网页中选中文字
在页面中，独占一行的元素称之为块元素（block element），在网页中一般通过块元素对页面进行布局
在页面中，不会独占一行的元素称之为行内元素（inline element），行内元素主要用来包裹文字
既然有块元素和行内元素之分，就会涉及网页内容的规范问题：
·一般情况下，我们会在块元素内放行内元素，而不会在行内元素内放块元素
·块元素中基本什么都能放
·p元素中不能放任何的块元素
注：浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
在html中也可以创建列表，html列表一共有三种：（列表之间可以互相嵌套）
1.无序列表：使用ul来创建，使用li表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
2.有序列表：使用ol来创建，使用li表示列表项
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
3.定义列表:使用dl标签来创建，使用dt来表示定义的内容，使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>网页结构，用来表示标题、段落等</dd>
<dd>网页结构，用来表示标题、段落等</dd>
<dd>网页结构，用来表示标题、段落等</dd>
</dl>
超链接是一个行内元素，我们使用a标签来定义超链接，在a标签中可以嵌套除它自身外的任何元素
a标签的属性：
href属性：指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址
可以直接将href属性设置为#（href = “#”），这样点击超链接后，页面不会发生跳转，而是转到页面的顶部位置（在开发中可以将#作为超链接路径的占位符使用；也可使用 javascrip:; 来作为href的属性，点击此超链接什么也不会发生）
也可以跳转到页面的指定位置，只需将href属性设置为**#目标元素的id属性值**
对于目标路径，当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径。相对路径都会以 ./ 或 …/ 开头（也可省略）
./ 表示当前文件所在的目录
…/表示当前文件所在目录的上一级目录
对于
target属性：用来指定超链接打开的位置，它存在两个可选值，_self为默认值，在当前页面下打开超链接；_blank是在一个新的页面中打开超链接
id属性：是唯一且不重复的，每一个标签都可以添加一个id属性，id属性是元素的唯一标识，同一个页面中不能出现重复的id属性，id值一定为字母开头
img标签：图片标签，用于像当前页面中引入一个外部图片，img标签是自结束标签
注：img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
img标签的属性：
src属性：指定的是外部图片的路径（绝对路径/相对路径，路径规则和超链接是一样的）
alt属性：对图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性，则图片不会被搜索引擎所收录
width属性：图片的宽度（单位是像素）
height属性：图片的高度
注：宽度和高度如果只修改了一个，则另一个会等比例缩放，一般情况下在pc端，不建议修改图片的大小，需要多大图片裁多大；但在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式（效果一样，用小的；效果不一样，用效果好的）：
jpeg（jpg）：支持的颜色比较丰富，不支持透明效果 ，不支持动图，一般用来显示照片
gif：支持的颜色比较少，支持简单透明，支持动图，适合颜色单一的图片、动图
png：支持的颜色丰富，支持复杂透明，不支持动图，专为网页而生
webp：这种格式是谷歌新推出的专门用来表示网页中图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别小。缺点：兼容性差
base64：将图片使用base64编码，这样可以将图片转化为字符，通过字符的形式来引入图片，一般都是需要和网页一起加载的图片才会使用base64
iframe标签 ：内联框架，用于向当前页面引入一个其他页面，替换元素
iframe标签的属性：
src属性：指定要引入的网页的路径
frameborder属性：指定内联框架边框的有无，属性值为0，则无；为1，则有
width属性：引入网站的宽度
height属性：引入网站的高度
audio标签：用来向页面中引入一个外部的音频文件，替换元素
注：音视频文件引入时，默认情况下不允许用户自己控制播放停止
audio标签的属性：
width属性：音频文件的宽度
height属性：音频文件的高度
controls属性：是否允许用户控制播放
autoplay属性：音频文件是否播放，如果设置了autoplay，则音乐再打开页面时会自动播放，但目前来讲大部分浏览器都不会自动对音乐进行播放
loop属性：循环播放
src属性：指定外部音频的路径
还可以通过source来指定文件的路径，可以插入多个source，在不同src里面放入该音频的多个音频格式（mp3/mp4/ogg），解决大部分浏览器兼容性问题
<audio controls>
对不起！您的浏览器不支持音频播放！请升级浏览器！
<source src="音频路径">
</audio>
embed标签：对一些老浏览器引入音视频文件（如ie8），自带自动播放功能
embed标签的属性：
width属性：音频文件的宽度
height属性：音频文件的高度
type属性：指定文件类型（如type=”audio/mp3“）
src属性：指定外部音频的路径
以下格式解决浏览器对音频文件的兼容性问题：
<audio controls>
<source src="音频路径">
<embed src="音频路径" type="文件类型" width="300" heigth="100">
</audio>
video标签：向网页中引入一个视频，替换元素（用法与audio标签类似）
芜湖~~向css进发！！！
4654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
