HTML学习总结目录
HTML的基本信息
网页的基本标签
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>: <head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<body></body>: <body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
如：
<title>我的第一个网页</title>
<meta charset=“utf-8”>: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。
<meta>是描述性标签，用来描述网页的一些信息，一般用来做SEO（搜索引擎优化）
如：
<meta name="keywords" content="网站的关键词表述">
<meta name="description" content="描述网站是干嘛的">
标题标签
\<h1>一级标签\</h1>
\<h2>二级标签\</h2>
\<h3>三级标签\</h3>
...
标题逐渐减小
段落标签
<p></p>
将文字分行形成段落，文字间距更大
如：
<p>这是一大段字</p>
<p>尽管我也不知道要说些什么</p>
<p>但是为了凑一段字出来</p>
<p>我也只能随便写了这段话真的好无聊</p>
换行标签
<br>单标签，自闭合
将文字分成段落，文字间距更小
如：
这还是一大段字<br>尽管我也不知道要说些什么<br>但是为了凑一段字出来<br>我也只能随便写了这段话真的好无聊
水平线标签
<hr>单标签，自闭合
会在网页出现水平线进行分割
举个例子：
<hr>
字体样式标签
粗体：<strong></strong>
斜体：<em></em>
高亮：<mark></mark>
删除线：<del></del>
标记为不准确：<s></s>
视为文档附加部分：<ins></ins>
下划线：<u>
视作小字印刷：<small></small>
举个例子：
<p><strong>字体会变粗</strong></p>
<p><em>字体会变斜</em></p>
<p>字体会<mark>高亮</mark> </p>
<p><del>字体被划</del></p>
<p><s>字体被标记为不准确</s></p>
<p><ins>文字视为文档附加部分</ins></p>
<p><u>文字有下划线</u></p>
<p><small>小字印刷体</small></p>
注释
<!–注释长这样–>。
提示： 在 code 软件中，输入Ctrl + /即可快捷的进行注释！
注意： HTML 不区分标签的大小写，但建议全部使用小写！
特殊符号
空格：&nbqp;
这是 空格
想要多少个空格就要多少个 
大于符号：>
小于符号：<
版权符号：©
<br>
这是大于符号：>
<br>
这是小于符号：<
<br>
这是版权符号：©版权所有xx
特殊符号记忆方式：
以&开头，直接调用，以；结尾
特殊字符可参考：HTML ISO-8859-1 参考手册
图像标签
img
常见的图像格式：JPG, GIF, PNG, BMP…
图片路径分为：相对路径，绝对路径
例子
<img src="picture.jpg">
<img src="./images/picture.jpg">
<img src="../picture.jpg">
解释
该图片文件与当前文档在同一目录中
该图片文件在当前目录下的images目录中
该图片文件在上一级目录中
上表中，.表示当前目录，..表示上一级目录
<img src=“path” alt=“text” title=“text” width=“x” height=“y”/>
说明：
src属性：为要显示图片文件的位置 URL，即图片文件的路径
alt属性：当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）
输入img后按Tab自动出现<img src="" alt="">这是必填项
如：
<img src="23.jpg" alt="表情包">
提示：
对于小尺寸的图片，现在可采用 base64 编码进行，可提高页面加载速度，提升用户体验菜鸟工具图片转BASE64编码
图片的存储大小对网页的加载有重要的影响，从而影响用户体验。因此，在不明显改变图片质量的情况下压缩图片是提高 Web站点速度的重要手段。请前往WebsitePlanet在线PNG和JPEG压缩以及 TinyPNG智能PNG和JPEG图片压缩
试试！
超链接标签及应用
页面间链接
<a href=“path” target=“目标窗口位置”>链接文本或图像</a>
说明：
href：即为要跳转去的地址 URL（Uniform Resorce Locator)
target：属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
链接文本或图像：超链接标签包含的内容，即为显示在页面上供用户点击的
例如将图片做成一个超链接：
<a href="https://www.baidu.com/"><img src="23.jpg" alt="表情包" title="百度一下"></a>
锚链接
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
使用name作为标记
<a name="top">顶部</a>
#加上标记的名字
<a href="#top">回到顶部</a>
还可以从一个页面调到另一个页面的锚点位置
<a href="另一个页面的链接#锚点名"></a>
功能性链接
邮箱
mailto
<a href="mailto:xxxxxxxxx@qq.com"我的邮箱
行元素和块元素
块元素
无论内容多少，该元素独占一行，以新行结束和开始
（p、h1—h6…）
行内元素
内容撑开宽度，左右都是行内元素的可以在排在一行，不会新起一行
（a . strong . em …）
列表标签
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的形式显示出来，以便浏览者能更快捷地获得相应的信息。
有序列表
有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
<ol type=“a”>
<ol>
<li>列表第一行</li>
<li>列表第二行</li>
<li>列表第三行</li>
…
</ol>
<ol>
<li>列表第一行</li>
<li>列表第二行</li>
<li>列表第三行</li>
<li>列表第四行</li>
<li>列表第五行</li>
</ol>
无序列表
无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
<ul type=“square”>
<ul>
<li>列表第一行</li>
<li>列表第二行</li>
<li>列表第三行</li>
…
</ul>
<ul>
<li>列表第一行</li>
<li>列表第二行</li>
<li>列表第三行</li>
<li>列表第四行</li>
<li>列表第五行</li>
</ul>
自定义列表
有个列表名称
<dl>
<dt>列表名称</dt>
<dd>列表第一行</dd>
<dd>列表第二行</dd>
<dd>列表第三行</dd>
…
</dl>
dl：标签
dd：列表名称
<dl>
<dt>列表名称</dt>
<dd>列表第一行</dd>
<dd>列表第二行</dd>
<dd>列表第三行</dd>
<dd>列表第四行</dd>
<dd>列表第五行</dd>
</dl>
表格标签
简单通用，结构稳定
代码中,<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）
列
td
行
tr
调整线条宽度border=“1px”
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
跨行
rowspan
<td rowspan=“要跨的行数”></td>
跨列
colspan
<td colspan=“要跨的列数”></td>
<table border="1px">
<tr>
<td colspan="4">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
媒体元素
src：资源路径
controls：控制进度条
autplay：自动播放
音频
audio
<audio src="地址">controls autoplay</audio>
视频
video
<video src="地址">controls autoplay</video>
网页的简单布局
头部，脚部，主体
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
<nav>
导航类辅助内容
</nav>
内联框架
在一个网页里面嵌套另外一个
iframe
src：引用页面地址
name：框架标识名
<iframe src="path" name="mainFrame"></iframe>
<iframe src="http://www.baidu.com" frameborder="0"width="1300px"height="600px" ></iframe>
表单
from[post/get]
method：规定如何发送表单数据常用值get/post，提交表单数据
action：表示向何处发送表单数据
get方式提交：我们可以在URL中看到我们的信息，不安全，但是较高效，不能传输大文件
post方式提交：比较安全，可以传输大文件
文本输入框：input type=“text”
密码输入框：input type=“password”
提交：input type=“submit”
重置：input type=“reset”
<h1>注册</h1>
<!--文本输入柜: input type="text"-->
<p>名字:<input type="text" name="username"></P>
<!--密码框: input type="password"-->
<p>密码: <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</P>
表单语法
method：规定如何发送表单数据，常用值：get | post
action：表示向何处发送表单数据
<form method="pdst" actioh="result.html">
<p>名字:<input name="name" type="text"></p>
<p>密码:<input name="pass" type="password"></p>
<p>
<input type="submit" name="Button" value="提交">
<input type="reset" name="Reset" value="重填">
</p>
</form>
默认初始值：
value=“web学习”
最长能写的字符长度：
maxlength=“8"
文本框的长度：
size=“30”
<p>名字：<input type="text" name="username" value="web学习" maxlength="8" size="30"></p>
单选框
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
name相同表示是同一个组
多选框
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="game" name="hobby" checked>玩游戏<!--默认选中玩游戏-->
<input type="checkbox" value="study" name="hobby">学习
<input type="checkbox" value="eat" name="hobby">吃饭
</p>
按钮
input type="button"普通按钮
input type="image"图像按钮
input type="submit"提交按钮
input type="reset"重置，清空表单
下拉框
<p>下拉框
<select name="列表名称">
<option value="选项的值（display screen）">显示屏</option>
<option value="选项的值">主机</option>
<option value="选项的值" selected>鼠标</option>
<!--默认-->
<option value="选项的值">键盘</option>
</select>
</p>
文本域
<!--文本域-->
<p>反馈
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
文件域
<!--文件域-->
<p>
<input type="file" name="files">
<input type="buttom" value="上传" name="upload">
</p>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
