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文档，其他元素要包裹在它里面，标签定义了文档的开始点和结束点

1
2
3

<!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优化

1	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>标签来定义。

1 2	<p>这是一个段落</p> <p>这是另一个段落</p>

换行：

如果在不产生一个新段落的情况下进行换行，使用<br>

1	<p>hhhh<br>aaaa<br>hhhh</p>

水平线：

<hr>标签在HTML页面中创建水平线

1	<hr color="" width="" size="" align=""/>

属性：

color：设置水平线颜色

width：设置水平线长度

size：设置水平线高度

align：设置水平线对齐方式（默认居中），可取值（left|right）

图片标签：

<img>标签定义HTML页面中的图像

1	<img src="" alt="" title="" width="" height="">

注意：<img> 是单标签，不需要进行闭合操作。

属性：

src：路径（图片地址与名字）

alt：规定图像的替代文本

width：规定图像的宽度

height：规定图像的高度

title：鼠标悬停在图片上给予提示

超文本链接标签：

HTML使用标签<a>来设置超文本链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分

1	<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网页中用来给用户填写信息，从而能够采集用户信息，使网页具有交互的功能

所有的用户输入内容的地方都用表单来写，如登录注册，搜索框

只要有用户输入的地方一定会有表单

表单由容器和控件组成，一个表单一般应该包含用户填写的输入框，提交按钮等，这些输入框，按钮叫做控件，表单就是容器，它能够容纳各种各样的控件

1	<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">标签来设定，当用户要在表单中键入字符数字等内容时，就会用到文本域

1
2
3

<form>
    用户名：<input type="text">
</form>

密码框：

密码字段通过标签<input type="password">来定义

1
2
3

<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属性无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素不包含块级元素