HTML 基础语法
【在科学上方是没有平坦的大路可走的，只有那在崎岖小路的攀登上不畏劳苦的人，才有期望到达光辉的顶点。 ——马克思】
前置
生成浏览器文件.html的快捷方式：!+Enter
代码格式化： Shift+Alt+F
HTML5 介绍：
HTML5是用来描述网页的一种语言，称为超文本标记语言，用HTML5编写的文件，后缀为.html，HTML是一种标记语言，标记语言是一套标记标签，标签是由尖括号包围的关键字，例如：<html>
标签有两种表现形式：
- 双标签，例如
<html><html> - 单标签，例如
<img>
HTML5 基本骨架：
DOCTYPE 声明：
DOCTYPE是document type（文档类型）的缩写。<!DOCTYPE html>是H5的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。
html标签：
定义HTML文档，其他元素要包裹在它里面，标签定义了文档的开始点和结束点
<!DOCTYPE html><html></html>head标签：
定义文档的头部，头部描述了文档的各种属性和信息，包括文档的标题，在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<!DOCTYPE html><html> <head> </head></html>body标签：
body元素定义文档的主体。
body元素包含文档的所有内容（例如文本，超链接，图像，表格和列表等）
它会直接在页面中显示出来，也就是用户可以直观看到的内容
<!DOCTYPE html><html> <head> </head> <body> 冰冰邦邦~ </body></html>title标签：
可定义文章的标题
它显示在浏览器窗口的标题栏或状态栏上
<title>标签是<head>标签中唯一必须要求包含的东西，也就是说，写head一定要写title
<title>的增加有利于SEO优化
SEO是搜索引擎优化的英文缩写，通过对网站内容调整，满足搜索引擎的排名需求meta标签
meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset=“utf-8”是说当前使用的是utf-8编码格式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>冰冰邦邦</title> </head> <body> 冰冰邦邦！！！！ </body></html>标题标签
标题介绍与应用
标题是通过<h1><h6>标签进行定义的
<h1>定义最大的标题，<h6>定义最小的标题
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>标题标签的位置摆放：
在标签中添加属性align="left|center|right"来改变位置。默认居左：
段落标签
段落：
段落通过<p>标签来定义。
<p>这是一个段落</p><p>这是另一个段落</p>换行：
如果在不产生一个新段落的情况下进行换行，使用<br>
<p>hhhh<br>aaaa<br>hhhh</p>
水平线：
<hr>标签在HTML页面中创建水平线
<hr color="" width="" size="" align=""/>属性：
color：设置水平线颜色
width：设置水平线长度
size：设置水平线高度
align：设置水平线对齐方式（默认居中），可取值（left|right）
图片标签：
<img>标签定义HTML页面中的图像
<img src="" alt="" title="" width="" height="">注意：<img> 是单标签，不需要进行闭合操作。
属性：
src：路径（图片地址与名字）
alt：规定图像的替代文本
width：规定图像的宽度
height：规定图像的高度
title：鼠标悬停在图片上给予提示
超文本链接标签：
HTML使用标签<a>来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分
<a href="url">链接文本</a>
超链接属性：
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带有下划线
- 点击链接时，链接显示为红色并带有下划线。
文本标签：
常用文本标签：
| 标签 | 描述 |
|---|---|
<em> | 定义着重文字 |
<b> | 定义粗体文字 |
<i> | 定义斜体字 |
<strong> | 定义加重语气 |
<del> | 定义删除字 |
<span> | 元素没有特定的含义 |
**提示：**常用文本标签和段落是不同的，段落表示一段文本，而文本标签一般表示文本词汇
列表标签
有序列表
有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。
<ol> <li>冰冰</li> <li>邦邦</li></ol>
<ol> 的属性type拥有的选项：
1：表示列表项目用数字标号（1，2，3…）
a：表示列表项目用小写字母标号（a，b，c…）
A：表示列表项目用大写字母标号（A，B，C…）
i：表示列表项目用小写罗马字母标号（i，ii，iii…）
I：表示列表项目用大写罗马字母标号（I，II，III…）
有序列表嵌套
列表可以进行嵌套：
<ol> <li>冰冰邦邦1</li> <li> <ol> <li>haha</li> <li>papa</li> </ol> </li> <li>yyyyyy</li></ol>
无序列表
无序列表是一个项目的列表，此列表使用粗体圆点进行标记
无序列表始于<ul>标签，每个列表项始于<li>标签。
<ul> <li>hhh</li> <li>bbb</li></ul>
<ul>的属性type拥有的选项：
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
无序列表嵌套
无序列表也可以进行嵌套：
<ul> <li>aaa</li> <li> <ul> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> </ul> </li> <li>dddd</li></ul>
快捷键：
快速生成ul+li的布局： ul>li*3
表格标签
表格：<table>
行：<tr>
单元格（列）：<td>
<table> <tr> <td>aaa</td> <td>bbb</td> </tr> <tr> <td>ccc</td> <td>ddd</td> </tr></table>快捷键：
快速生成表格结构： table>tr*2>td{单元格}
表格属性：
border：设置表格边框
width：设置表格宽度
height：设置表格高度
单元格合并
**水平合并：**colspan
**垂直合并：**rowspan
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <p>合并单元格6，7: colspan</p> <p>合并单元格15，20: rowspan</p> <P>水平合并：保留左边，删除右边</P> <p>垂直合并：保留上面，删除下面</p> <table border="1" width="600px" height="400px"> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td colspan="2">单元格6单元格7</td> <td>单元格8</td> <td>单元格9</td> <td>单元格10</td> </tr> <tr> <td>单元格11</td> <td>单元格12</td> <td>单元格13</td> <td>单元格14</td> <td rowspan="2">单元格15单元格20</td> </tr> <tr> <td>单元格16</td> <td>单元格17</td> <td>单元格18</td> <td>单元格19</td>
</tr> <tr> <td>单元格21</td> <td>单元格22</td> <td>单元格23</td> <td>单元格24</td> <td>单元格25</td> </tr> </table></body></html>Form表单
表单在Web网页中用来给用户填写信息，从而能够采集用户信息，使网页具有交互的功能
所有的用户输入内容的地方都用表单来写，如登录注册，搜索框
只要有用户输入的地方一定会有表单
表单由容器和控件组成，一个表单一般应该包含用户填写的输入框，提交按钮等，这些输入框，按钮叫做控件，表单就是容器，它能够容纳各种各样的控件
<form action='url' method="get|post" name="myform"></form>属性说明：
action：服务器地址
name：表单名称
method：数据提交方式
表单元素：
一个完整的表单由三个基本部分组成：表单标签，表单域，表单按钮
<form action="url"> <input type="text"> <input type="submit"> </form>
文本框：
文本域通过<input type="text">标签来设定，当用户要在表单中键入字符数字等内容时，就会用到文本域
<form> 用户名：<input type="text"></form>密码框：
密码字段通过标签<input type="password">来定义
<form> 密码：<input type="password" name="pwd"></form>密码字段不会明文显示，而是星号或者圆点来代替。
提交按钮：
当用户单击确认按钮时，表单的内容会被传送到另一个文件，表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的数据进行相关的处理。
<form name="input" action="url" method="get"> Username: <input type="text" name="user"> <input type="submit" value="登陆"></form>
块元素和行内元素（内联元素）
内联元素和块元素的区别：
| 块级元素 | 内联元素 |
|---|---|
| 块元素会在页面独占一行（自上而下垂直排列） | 行内元素不会独占页面的一行，只占自身的大小 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效 |
| 一般块级元素可以包含行内元素和其他块级元素 | 一般内联元素包含内联元素不包含块级元素 |
常见块级元素：
div,form,h1-h6,hr,p,table,ul等常见内联元素：
a,b,em,i,span,strong等行内块级元素（特点：不换行，能够识别宽高）
button,img,input等语义化标签
div: 容器标签
H5新标签：
<header></header>：头部
<nav></nav>：导航
<section></section>：定义文档中的节，比如章节，页眉，页脚
<aside></aside>侧边栏
<footer></footer>脚部
<article></article>代表一个独立的，完整的相关内容块。
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时