一、HTML 介绍

HTML 是一门语言，所有的网页都是用 HTML 这门语言编写出来的。

HTML(HyperText Markup Language) ：超文本标记语言：

（1）超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
（2）标记语言：由标签构成的语言

HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析

HTML 预定义了很多标签

W3C 标准： 网页是由三部分组成

（1）结构： HTML

（2）表现： CSS

（3）行为： JavaScript

二、快速入门

（1）新建文本文件，后缀名改为 .html

（2）编写 HTML 结构标签

<html>
    <head>
        <title></title>
    </head>

    <body>
        
    </body>
</html>

（3）在 <body> 中定义文字

<html>
    <head>
        <title>html 快速入门</title>
    </head>

    <body>
        <font color='red'>乾坤未定，你我皆是黑马~</font>
    </body>
</html>

总结：

（1）HTML 文件以 .htm 或 .html 为扩展名

（2）HTML 结构标签

（3）HTML 标签不区分大小写

（4）HTML 标签属性值单双引皆可

（5）HTML 语法松散

三、基础标签

基础标签就是一些和文字相关的标签

四、图片、音频、视频标签

（1）img ：定义图片

1️⃣src ：规定显示图像的 URL （统一资源定位符）

2️⃣height ：定义图像的高度

3️⃣width ：定义图像的宽度

（2）audio ：定义音频。支持的音频格式： MP3 、 WAV 、 OGG

1️⃣src ：规定音频的 URL

2️⃣controls ：显示播放控件

（3） video ：定义视频。支持的音频格式： MP4, WebM 、 OGG

1️⃣src ：规定视频的 URL

2️⃣controls ：显示播放控件

尺寸单位：

height 属性和 width 属性有两种设置方式：

（1）像素：单位是 px

（2）百分比：占父标签的百分比。

相对路径： 相对位置关系

（1）【./ 】表示当前路径

（2）【 ../ 】表示上一级路径

（3）【 ../../】表示上两级路径

五、超链接标签

（1）href ：指定访问资源的 URL

（2）target ：指定打开资源的方式

1️⃣_self ：默认值，在当前页面打开

2️⃣_blank ：在空白页面打开

六、列表标签

（1）有序列表

（2）无序列表

七、表格标签

（1）table ：定义表格

1️⃣border ：规定表格边框的宽度

2️⃣width ：规定表格的宽度

3️⃣cellspacing ：规定单元格之间的空白

（2）tr ：定义行

1️⃣align：定义表格行的内容对齐方式

（3） td ：定义单元格

1️⃣rowspan: 规定单元格可横跨的行数

2️⃣colspan: 规定单元格可横跨的列数

（4）th ：定义表头单元格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1" cellspacing="0" width="500">
    <tr>
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>

    <tr align="center">
        <td>009</td>
        <td><img src="../img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
        </tr>

    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="60" height="50"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
<    /tr>
</table>
</body>
</html>

八、布局标签

九、表单标签

（1）表单：在网页中主要负责数据采集功能，使用 <form> 标签定义表单
（2）表单项（元素）：不同类型的 input 元素、下拉列表、文本域等

form 标签属性

（1）action ：规定当提交表单时向何处发送表单数据，该属性值就是 URL

（2） method ：规定用于发送表单数据的方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#">
        <input type="text" name="username">
        <input type="submit">
    </form>
</body>
</html>

十、表单项标签

（1）<input>：表单项，通过 type 属性控制输入形式

（2） <select>：定义下拉列表，<option> 定义列表项

（3）<textarea>：文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">
    <input type="hidden" name="id" value="123">



    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>

    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>

    性别：
    <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
    <br>

    爱好：
    <input type="checkbox" name="hobby" value="1"> 旅游
    <input type="checkbox" name="hobby" value="2"> 电影
    <input type="checkbox" name="hobby" value="3"> 游戏
    <br>

    头像：
    <input type="file"><br>

    城市:
    <select name="city">
        <option>北京</option>
        <option value="shanghai">上海</option>
        <option>广州</option>
    </select>
    <br>

    个人描述：
    <textarea cols="20" rows="5" name="desc"></textarea>
    <br>
    <br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="一个按钮">


</form>


</body>
</html>

十一、CSS

1. 概述

CSS 是一门语言，用于控制网页表现。（Cascading Style Sheet （层叠样式表）。）

style 标签中定义的就是 css 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>

<div>Hello CSS~</div>

</body>
</html>

2. CSS 导入方式

（1）内联样式：在标签内部使用style属性，属性值是css属性键值对

（2）内部样式：定义<style>标签，在标签内部定义css样式

（3）外部样式：定义link标签，引入外部的css文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>


    <link href="../css/demo.css" rel="stylesheet">
</head>
<body>

    <div style="color: red">hello css</div>

    <span>hello css </span>

    <p>hello css</p>
</body>
</html>
css文件：demo.css
p{
    color: red;
}