一、HTML
HTML（HyperText Mark-up Language）是超文本标记语言。
网页实现基本结构
- HTML：页面结构
- CSS：页面样式，如元素大小、颜色、位置、隐藏显示、部分动效等
- JavaScript：页面行为，部分动画效果，页面与用户交互等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="html,css,javascript">
<meta name="description" content="前端学习">
<meta http-equiv="refresh" content="3; url=https://www.baidu.com">
<title>网页标题</title>
<style type="text/css">
div{
width:100px; height:100px; color:red }
</style>
</head>
<body>
网页显示内容
</body>
</html>
meta标签说明：
- keywords：表示网站的关键字。
- description：指定网站的描述。
- title：网站搜索结果的超链接上的文字描述。
- http-equiv=“refresh”：N秒后跳转指定网址。
二、HTML常用转义字符
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 |  ； | |
| < | 小于号 | <； |
| > | 大于号 | & gt; |
| & | 和号 | & |
| " | 引号 | " |
三、常见标签
图像标签
| 属性 | 含义 |
|---|---|
| src | 图像路径 |
| width | 图像宽 |
| height | 图像高 |
| alt | 图像不能显示时的文本 |
链接标签
说明：在网页中不仅可以创建文本超链接，还可以在图像，表格，音频，视频都可以添加超链接
| 属性 | 含义 |
|---|---|
| href | 跳转url，#或javascript:;作为空链接 |
| target | 目标弹窗弹出方式 |
表单标签
| 属性 | 含义 |
|---|---|
| type | text 单行文本输入框 |
| password 密码输入框 | |
| radio 单选按钮 | |
| checkbox 多选按钮 | |
| button 普通话按钮 | |
| submit 提交按钮 | |
| reset 重置按钮 | |
| image 图像按钮 | |
| file 文件按钮 | |
| email 邮箱格式输入框 | |
| url 网址格式输入框 | |
| number 数字格式输入框 | |
| search 搜索框样式输入框 | |
| name | 控件名称 |
| value | input标签默认文本 |
| size | input标签显示宽度 |
| maxlength | input标签允许输入的最大字符数量 |
| placeholder | 占位符 |
| autofoces | 自动获取焦点 |
| required | 必填项 |
<label> 标签
| 属性 | 含义 |
|---|---|
| for | 用于绑定input标签（请把 “for” 属性的值设置为相关元素的 id 属性的值） |
文本域标签
| 属性 | 含义 |
|---|---|
| cols | 每行显示字符数 |
| rows | 显示的行数 |
表单域
| 属性 | 含义 |
|---|---|
| action | 提交表单的url地址 |
| method | 提交方式 |
| name | 表单名称，用于区分一个页面多个表单（为控件命名，以备后台程序 ASP、PHP 使用） |
<strong> 加粗
<em> 斜体
<del> 加删除线
<ins> 加下划线
<header> 头部标签
<nav> 导航栏标签
<footer> 底部标签
<article> 文章标签
<section> 文章的区域
<aside> 侧边区域
表单的基本使用（写一遍就会）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="#">
<fieldset>
<legend>学生档案</legend>
<label for="username">姓名:</label>
<input type="text" name="username" id="username" placeholder="请输入用户名"><br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required="required" name="email" id="email"><br>
<label for="collage">所属学校:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端学院"></option>
<option value="C++学院"></option>
<option value="java学院"></option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<form action="#">
<fieldset>
<legend>学生档案</legend>
<label>姓名:<input type="text" placeholder="请输入学生姓名"></label><br><br>
<label>手机号:<input type="tel"></label><br><br>
<label>邮箱:<input type="email"></label><br><br>
<label>所属学校:<input type="text" placeholder="请选择学校" list="university"></label><br><br>
<datalist id="university">
<option>java学院</option>
<option>前端学院</option>
<option>C++学院</option>
<option>Python学院</option>
</datalist>
<label>所选择的专业:
<select name="major">
<option value="1">开发</option>
<option value="2">测试</option>
<option value="3">产品</option>
</select> </label><br><br>
<label>出生日期:<input type="date"></label><br><br>
<label>成绩:<input type="number"></label><br><br>
<label>毕业时间:<input type="date"></label><br><br>
<input type="submit">
<input type="reset">
</fieldset>
</form>
<label for="inTime">入学时间:</label>
<input type="date" id="inTime" name="inTime"><br><br>
<label for="leaveTime">毕业时间:</label>
<input type="date" id="leaveTime" name="inTime"><br><br>
<input type="submit">
</fieldset>
</form>
</body>
</html>
音视频标签
<audio src="audio.mp3" controls autoplay loop></audio>
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="audio.mp3">
<source src="audio.ogg">
</audio>
<video controls>
<source src="flower.mp4">
</video>
四、HTML标签分类
HTML标签可分为：容器级和文本级。
容器级的标签中可以嵌套其它所有的标签 ，文本级的标签中只能嵌套文字/图片/超链接，不能嵌套容器级
容器级
div h li ul ol dl dt dd......
文本级
p span a img buis strong em ins del......
五、HTML 快速参考
HTML基本文档
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
文本元素
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
逻辑样式
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
物理样式
<b>This text is bold</b>
<i>This text is italic</i>
链接、锚定和图像元素
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:[email protected]">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
无序列表
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
有序列表
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
定义列表
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
表格
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
框架
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
表单
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>
实体
< is the same as <
> is the same as >
is the same as ‘ ’
© is the same as ©
其他元素
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
结语
如果你觉得这篇博客还可以，别忘记点个赞加个关注再走哦。
如果你不嫌弃，还可以关注微信公众号———梦码城（持续更新中）
梦码在这里感激不敬