HTML标签
HTML(记不住就去查！！)结构，表现，行为
语义化标签
<!doctype html>
<!--文档声明加在最上面-->
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>html一级标题</h1>1-6级标题
注意:浏览器会自动地在标题的前后添加空行。
<p>这是段落标签</p>浏览器会自动地在段落的前后添加空行。
<!--
<h1>春晓</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
-->
<hr>标签在html页面中创建水平线，用于分割内容
<!-->自结束标签：-->
<!--注释标签-->
<!--注释内容 -->
<!--
属性，在标签中（开始标签或者自结束标签）可以设置属性，属性是一个名值对（x=y）。
属性用来设置标签中的内容如何显示。
属性和标签名或者其他属性应该使用空格隔开
属性应根据文档规定编写，有的属性有属性值，有的没有。如果有属性值，属性值用""引起来
-->
<!--文档声明(doctype)
- 文档声明用来告诉浏览器当前网页的版本
- html5的文档声明
html 标签不区分大小写
<!doctype html>
<!Doctype HTML>
-->
<!--进制：
-十进制
....
-->
<!--超链接标签-->
<a href="www.baidu.com" >这是一个超链接</a>
<br/>换行标签(<br>也可以,但是根据规范使用<br/>是长久之策)
<font color="bule" size="5">设置字体</font>
<img>
<input>
</body>
</html>
------------------------------------------------------
标题标签:<h1></h1>
h1-h6共6级标题
一般情况下一个页面只有一个h1.
块元素:<h1></h1> <p></p>
在页面上独占一行的元素称为块元素(block element)-->自动换行.
- 在网页总一般通过块元素来对页面进行布局
- 一般情况下会在块元素中放行内元素，而不会在行内元素中方块元素
标题组:<hgroup>用于为标题分组，可以将一组相关的标题同时放入hgroup
<h1></h1>
<h2></h2>
</hgroup>
语音语调加重:<em></em>，会倾斜
<strong></strong>表示强调重要内容，加粗
行内元素(inline element):<em></em>,<strong></strong>
在页面内不会独占一行的元素成为行内元素
- 主要用于包裹文字
- 一般情况下会在块元素中放行内元素，而不会在行内元素中方块元素
- 块元素基本上什么都能放
- p元素中不能放任何块元素
长引用:<blockquote></blockquote> 块元素
短引用:<q></q> 行内元素，自动加上""
换行标签:</br>
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
例如:
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body意外的子元素
布局标签:(结构化语义标签)
（显示上没有区别，只有语义区别）
<header></header>网站顶部，头部
<main></main> 网页中的主体部分（一个网页中只有一个）
<footer></footer> 网页的底部
<nav></nav> 表示网页中的导航
<aside></aside> 和主体相关的其他内容(侧边栏)
<article></article>表示文章
<section></section> 表示一个独立的区块，上边的标签都不能表示时使用section
<div></div> 没有语义，就用来表示一个区块，目前div是主要的布局元素
<span></span> 行内元素，没有任何语义，一般用于在网页中选中文字
属性
<!--
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
-->
<a herf="www.baidu.com">这是一个超链接</a>
<!--这里的herf就是一个属性-->
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题
提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'
html文本格式化
<strong>加粗文本</strong>
<b>加粗文本1</b>
<i>倾斜文本</i>
<em>倾斜文本<\em>
注意:通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
<big>这个标签字体变大</big>
<small>这个标签字体变小<\small>
<sub>下标<\sub>
<sup>上标<\sup>
预格式文本
<pre>
用于对空行 和空格 进行控制
<\pre>
<code>计算机输出？<\code><!--这个是什么意思？-->
<kbd>键盘输入<\kbd><!--这个是什么意思？-->
<tt>打字机文本</tt><!--这个是什么意思？-->
<samp>计算机代码样本</samp><!--这个是什么意思？-->
<var>计算机变量</var><!--这个是什么意思？-->
这些标签常用于显示计算机/编程代码。
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<!--
<address> 标签定义文档作者/所有者的联系信息。
如果 <address> 元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息。
如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。
<address> 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。
地址标签:此例演示如何在 HTML 文件中写地址。
Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA-->
缩写和首字母缩写
<abbr title="etcetera">etc.</abbr>
在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
<acronym title="World Wide Web">WWW</acronym>
文字方向
<bdo dir="rtl">该段落文字从右到左显示。</bdo><!--这个是什么意思？-->
块应用
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<q>这里的会被加上引号""</q>
删除字效果和插入字效果
<del>blue</del>删除字效果
<ins>red</ins>插入字效果
超链接
<a href="www.baidu.com" target="_blank">这是一个超链接</a>
使用 target 属性，你可以定义被链接的文档在何处显示。
上面点击会在新标签页中显示。如果你将 target 属性设置为 "_blank" 链接将在新窗口打开。
id属性
HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
创建图片链接
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
无边框的图片链接
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
在当前页面链接到指定位置
<a href="#C4">查看章节 4</a>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
跳出框架
<a href="http://www.runoob.com/" target="_top">点击这里!</a>
电子邮件链接
1. <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
2. <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
注意: 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本
------------------------------------------------------
使用<a></a>标签,a标签是行内元素，在a标签中可以嵌套除它自身外的任何元素，属性href 指定跳转的目标路径
跳转到外部路径:
<a href="https://www.baidu.com">超链接</a>
在同一目录下:
<a href="xxx.html">超链接2</a>
相对路径，绝对路径:
- 当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
- 相对路径都会使用.or..开头
./ 表示当前文件所在的目录
.// 当前文件所在目录的上级目录
./可以省略不写
target属性，用来指定超链接打开的位置
可选值:
_self 默认值 在当前页面中打开超链接
_blank 在一个新的标签页打开
页面不发生跳转，回到当前页面的顶部位置
可以将href属性设置为#，这样点击超链接以后，页面不会发生跳转，而是转到当前页面的顶部位置
跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
<a href="#">回到顶部</a>
id属性(唯一不重复)
- 每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
- id属性的属性值区分大小写
- 跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
<a href="#bottom">去底部</a>
<a id="bottom" href="#">回到顶部</a>
占位符
可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生
<a href="javascript:;">这是一个新的超链接</a>
图片标签
用于向当前页面中引入一个图片，使用img标签引入外部图片，img标签是一个自结束标签
属性：
- src 指定的是外部图片的路径（路径规则相同）
img元素属于替换元素(在块和行内元素之间，具有两种元素的特点)
- alt 图片的描述，这个描述默认情况下不会显示，一些浏览器会在图片无法加载时显示,搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎解析。-->(屏幕阅读器);
- width 图片的宽度（单位是像素）
- height 图片的高度
宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大，但是在移动端，经常需要对图片惊醒缩放（大图缩小）
图片的格式：
jpeg（jpg）
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
png
- 支持闫颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
webp
- 谷歌新推出的专门用来表示网页中图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- 缺点：兼容性不好
base64
- 将图片使用base64进行编码，可以将图片转换为字符，通过字符的形势来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
使用建议:
- 效果一样，用大小小的
- 效果不一样，用效果好的
<img src="./xxx" alt="xx">
<img width="200" src="xxxx">
实体
即为转义字符
(使用时查询即可)
&实体名字;
空格
>大于号
< ;小于号
meta标签
meta表示元数据，用于设置网页中的一些元数据，元数据不是给用户看
void 元素可以没有结束标签
charset 指定网页的字符集
name 指定数据的名称
content 指定数据的内容
description 用于指定网站的描述
<meta charset="utf8">
<meta name="keywords" content="HTML5,前端，css3">
keywords表示网站的关键字(搜索引擎可以搜索到，例如搜索购物，出现京东)，可以同时指定多个关键字，关键字间使用，隔开
<meta name="description" content="......">
网站的描述会出现在搜索引擎的搜索结果中
title 标签内容会作为搜索结果的超链接上的文字显示
<meta http-equiv="refresh" content="3;url=https://baidu.com">3s后跳转到另一个页面
列表
list
列表之间可以相互嵌套
li{
list-style:none;
}--->可以将前面的小圆点去掉
1. 有序列表:使用ol标签来创建有序列表，使用li表示列表项
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
2.无序列表:使用ul标签来创建有序列表，使用li表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
3.定义列表:使用dl标签来创建一个定义列表，使用dt来表示定义内容，使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
内联框架
<iframe src="https://www.qq.com" width="" frameborder="0"></iframe>
- 用于向当前网页中引入一个其他页面,在一个网页中嵌套了另一个网页
属性 - src 指定要引入的网页路径。
- frameborder 指定内联框架的边框 值为 0和1。
存在问题: xxx
音视频播放
<audio src="xxx" controls autoplay></audio> 用于向页面中引入一个外部的音频文件
- 音视频文件引入是，默认情况下不允许用户自己控制播放停止。
属性：
- src 文件路径
- controls 是否允许用户控制播放，该属性不需要指定值
- autoplay 音频文件是否自动播放
如果设置autoplay 则音乐在打开页面时会自动播放，目前大部分浏览器都不会自动对音乐进行播放
- loop 音乐是否循环播放
除了通过src来指定外部文件的路径以外，还可以通过 source 来指定文件的路径
<audio controls>
对不起，您的浏览器不支持播放音频
<source src=".xxx1.mp3">
<source src=".xxx2.ogg">
这样会默认第一个，第一个不支持就加载第二个
</audio>
兼容IE 8
<embed src=".xxx.mp3" type="audio/MP3" width=""> 会自动播放,必须指定width，height
不同浏览器可以放一起得到不同的效果
<audio controls>
对不起，您的浏览器不支持播放音频
<source src=".xxx1.mp3">
<source src=".xxx2.ogg">
<embed src=".xxx.mp3" type="audio/MP3" width="">
这样会默认第一个，第一个不支持就加载第二个
</audio>
使用video标签引入视频属性
- 使用方式和audio基本相同
<video>
<source src=".xxx.webm">
<source src=".xxx.mp4">
<embed src=".xxx.mp4" type="video/mp4">
</video>
作者：程序员包子，转载请注明原文链接：https://www.cnblogs.com/coder-baozi/articles/16283308.html
coder-baozi一位菜鸟码农
