HTML知识点概括

前端三件套分别是HTML3，CSS5，JavaScript

稍微介绍一下W3C标准：

结构化标准语言（HTML）
表现标准语言（CSS）
行为标准（DOM，JavaScript）

HTML是超文本标记语言，负责网页最基本信息的构造

HTML的优势：

市场需求量
跨平台使用
浏览器支持

我们使用的工具依旧选择老朋友：

IDEA

因为内容过多，大部分内容可能都在代码中详细介绍，请仔细阅读代码

HTML基本框架

下面我们稍微介绍以下HTML的基本框架：

<!--告诉浏览器我们使用的标准规范-->

<!DOCTYPE html>

<html lang="en">

<!--表示网页头部开始-->

<head>

    <!-- meta 描述性标签，用来描述网页的一些信息：例如作用等   -->

    <meta charset="UTF-8">

    <meta charset="keywords" content="第一天学习HTML">

    <meta charset="description" content="我们在这里学习HTML">

    <!-- title 标题，表示我们打开网页后的标题   -->

    <title>我的第一个网页</title>

</head>

<!--body 表示网页内容开始-->

<body>

<!--内容-->

Hello，World！

</body>

</html>

其中<></>这种成对出现的标签，我们称为开放标签和闭合标签

其中<>这种单个出现的标签，我们称为单个标签

块元素和行内元素

我们简单介绍一下块元素和行内元素：

块元素：
- 无论内容多少，该元素独占一行
- 例如：p，h1，h2
行内元素：
- 内容撑开宽度，当左右都是行内元素时，可以排在一行
- 例如：a，strong，em

页面结构分析

下面给出页面结构分析：

元素名	描述
header	标记头部区域的内容
footer	标记脚部区域的内容
section	Web页面中一块独立区域
article	独立的文章内容
aside	相关内容或应用
nav	导航类辅导内容

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>页面结构分析</title>

</head>

<body>

<!--表示头部-->

<head>

</head>

<!--表示独立板块-->

<section>

</section>

<!--表示脚部-->

<footer>

</footer>

</body>

</html>

网页基本标签

网页基本信息：

代码	说明
<!-- -->	注释；用来注解内容，不被编译器读取
<h1></h1>	大标题；分为h1~h6
<P></p>	分段符号；
<br>	换行符号;
<hr>	水平线符号;
<strong></strong>	加粗符号；
<em></em>	斜体符号；
&~~~~；	特殊符号格式；

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>网页基本标签</title>

</head>

<body>

<!--我们从这里依次介绍各种标签-->

<!--标题标签：成对标签；h开头，h1~h6依次为n级标题-->

<h1>一级标签</h1>

<h2>二级标签</h2>

<h3>三级标签</h3>

<h4>四级标签</h4>

<h5>五级标签</h5>

<h6>六级标签</h6>

<!--然后我们介绍段落标签：成对标签；p-->

<!--用段落标签后，段与段自动换行且有明显距离-->

<p>1</p>

<p>2</p>

<p>3</p>

<!--如果不是用段标签，即使在HTML代码中分段，网页中也不显示分段-->

1

2

3

<!--接下来我们介绍换行标签：单个标签；br-->

<!--换行标签使内容换行，但其本质还是在一段中，且间隔较小-->

<p>-----------------</p>

1 <br>

2 <br>

3 <br>

<!--接下来介绍水平线标签：单个标签；hr-->

<!--水平线标签随着页面的大小改变大小，随时充斥整个页面-->

<hr>

<!--然后我们稍微介绍两个字体样式标签，因为我们的字体样式主要在css中写出，这里仅简单介绍即可-->

<!--粗体；成对标签；strong-->

<!--斜体：成对标签；em-->

<h1>字体样式标签</h1>

<p>粗体：<strong>我是粗体</strong></p>

<p>斜体：<em>我是斜体</em></p>

<!--最后我们介绍一些特殊符号：空格，大于，小于-->

<!--我们先说一下格式：&~~~；-->

<p>空格：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格</p>

<p>大于：&gt;</p>

<p>小于：&lt;</p>

</body>

</html>

网页基本标签-图片标签

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>图片标签</title>

</head>

<body>

<!--

我们先给出图像格式：<img src="" alt="" title="" width="" height="">

img：图像标签

src:表示图像地址，可以写绝对地址，也可以写相对地址（推荐）

    相对地址中返回上一级的标志是：../

alt:表示图像名称，当图像不显示时，直接打出图像名称

title：当鼠标移动上去时出现的名称

width：宽度

height：高度

-->

<img src="../../Resources/picture/1.jpeg" alt="纱雾老师" title="点击查看" width="300" height="300">

</body>

</html>

网页基本标签-链接标签

链接类标签分为三种：

1.超链接：
2.锚链接：
3.功能性链接：

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>链接标签</title>

</head>

<body>

<!--

我们先给出链接标签的整个格式：<a href="" target="">链接文本/图像</a>

href:链接路径，后面可以跟本机所创建的网页或者互联网上可查找网页；且可以附带其锚链接

target：在哪个窗口打开；目前我们仅需要了解两种窗口：_blank新窗口，_self本窗口（默认）

1.超链接：

直接使用上方链接格式即可

2.锚链接：

需要提前用id设置锚点，然后在后续需要跳转位置采用<a>中的#id来跳转

3.功能性链接：

用于与其他设备链接，例如：mailto是指邮箱

-->

<!--设置锚点-->

<a id="Top">Top</a>

<!--1.超链接-->

<p>

<a href="E:\编程内容\HTML\code\第一部分\1.我的第一个网页.html" target="_self">点击进入我的第一个网页</a>

<a href="https://www.baidu.com/" target="_blank">点击进入百度</a>

</p>

<!--2.锚链接-->

<a href="#Top">点击返回顶部</a>

<!--3.功能性链接-->

<a href="mailto:3206154701@qq.com">点击与邮箱交互</a>

</body>

</html>

网页基本标签-列表标签

列表的定义：

列表就是信息资源的一种展示形式

列表的分类：

有序列表
- ol是有序列表的框架标签
- li是有序列表的内容标签
无序列表
- ul是无序列表的框架标签
- li是无序列表的内容标签
自定义列表
- dl是自定义列表的框架标签
- dt是自定义列表的内容标题
- dd是自定义列表的内容标签

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列表标签</title>

</head>

<body>

<!--列表标签分为三种：有序列表，无序列表，自定义列表-->

<!--1.有序列表：

<ol></ol>

<li></li>

-->

<ol>

    <li>Java</li>

    <li>Python</li>

    <li>Web</li>

</ol>

<hr>

<!--2.无序列表：

<ul></ul>

<li></li>

-->

<ul>

    <li>Java</li>

    <li>Python</li>

    <li>Web</li>

</ul>

<hr>

<!--3.自定义列表：

<dl>

    <dt></dt>

    <dd></dd>

    <dd></dd>

</dl>

-->

<dl>

    <dt>我是小标题</dt>

    <dd>我是列表1</dd>

    <dd>我是列表2</dd>

</dl>

</body>

</html>

网页基本标签-表格标签

使用表格的好处：

简单通用
结构稳定

表格的组成以及HTML中的格式：

表格标签：
单元格：由行列组成
行：
列：
跨行：rowspan=""
跨列：colspan=""

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>表格标签</title>

</head>

<body>

<!--表格格式：

<table></table>是基本表格框架， 其他内容需要在框架里面写(这里提前涉及到：border表示边框，这里设置边框宽度border="1px"表示边框为1像素)

<tr></tr>:行

<td></td>:列，需要写在行中

colspan="n":表示跨列，跨n列

rowspan=“n”：表示跨行，跨n行

-->

<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-4</td>

  </tr>

  <tr>

    <td>3-1</td>

    <td>3-2</td>

    <td>3-3</td>

  </tr>

</table>

</body>

</html>

网页基本标签-视频和音频

视频元素：

<video src="" ></video>

音频元素：

<audio src="" ></audio>

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>媒体标签</title>

</head>

<body>

<!--媒体标签：我们这里仅介绍：视频和音频

视频格式：<video src="" ></video>

音频格式：<audio src="" ></audio>

controls：表示控制面板，我们需要在媒体标签中加入，才可以显示控制面板

autoplay：表示自动播放，默认情况下需要手动播放

-->

<!--视频-->

<video src="E:\编程内容\HTML\Resources\video\1.mp4" controls autoplay></video>

<!--音频-->

<audio src="E:\编程内容\HTML\Resources\audio\1.mp3" controls autoplay></audio>

</body>

</html>

网页基本标签-表单

表单作用：

用于收集用户信息

表单组成：

表单域
表单控件
提示信息

表单域

表单域是一个包含表单元素的区域

表单域格式：

<form action="" method="" name=""></form>

常用属性：

属性	属性值	作用
action	url地址	用于指出接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式
name	名称	用于指定表单的名称，用来区分同一页面的多个表单

表单挂件

最常用的表单挂件：<input type="属性值”>

我们先介绍input内置元素：

元素	说明
type=""	表示input类型
value=""	表示input的值（内置文本）
name=""	表示input的姓名（用于同一类）
checked=""	表示被选中
maxlength=""	表示最大长度

我们再来介绍以下input的属性包括哪些：

属性值	说明
button	定义可点击按钮（配合js使用）
checkbox	定义复选框
file	定义输入字段和浏览按钮，负责上传文件
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，输入内容不可见
radio	定义单选按钮
reset	定义重置按钮，点击后重置表单内所有内容
submit	定义提交按钮，点击后将数据发送至后台
text	定义单行输入的字段，默认20字节

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单标签</title>

</head>

<body>

<!--

表单标签form

含有三种属性：

action=“url地址”：用于指定接收并处理表单数据的服务器程序的url地址

method=“post/get”：提交方法

name=“”：表单名称，以便于区分

-->

<form action="#" method="post" name="表单域名称">

<!--1.<input>

格式：<input type="">

type：属性值

name:表单元素名称

value：表单元素默认内容

checked：默认被选中

maxlength：内容最大值

-->

<!--    text文本，用于正常书写-->

姓名：<input type="text" value="请输入姓名">

    <br>

<!--    password隐藏文本，用于书写密码-->

密码：<input type="password" >

    <br>

<!--    radio单选框，用于多选一，需要配合name使用-->

性别： 男 <input type="radio" name="sex"> 女 <input type="radio" name="sex">

    <br>

<!--    checkbox多选框，用于多选，也需要配合name使用-->

爱好： 吃饭 <input type="checkbox" name="like"> 睡觉 <input type="checkbox" name="like"> 打豆豆 <input type="checkbox" name="like">

    <br>

<!--    button普通按钮，后期搭配js使用;可以使用value定义显示内容-->

    <input type="button" value="点击发送二维码">

    <br>

<!--    file上传文件-->

    <input type="file" >

    <br>

<!--    reset重置按钮，点击后表单内所有内容重置;可以使用value定义显示内容-->

    <input type="reset" value="重新填写">

<!--    submit点击提交，点击后把内容上传给action中；可以使用value定义显示内容-->

    <input type="submit" value="免费注册">

</form>

</body>

</html>

label标记

label标记可以连接其他元素（常用于与button，checkbox，radio等点击性标签使用）

label格式：

<!--for对应其id值-->

<label for="~~~">内容</label>

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>label标签</title>

</head>

<body>

<!--当点击相同for和id的label属性时，会相当于点击id属性-->

<label for="button">点击我为后面button画勾</label>

<input type="checkbox" id="button">

</body>

</html>

select下拉表单

select可以单独形成下拉表单

select格式：

<!-- 可以在里面加上selected=“selected”表示默认选择-->

<select>

  <option selected="selected"></option>

  <option></option>

  <option></option>

</select>

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>select标签</title>

</head>

<body>

<!--

select作为一个框架

option作为折叠选项

可在option选项中加入selected=“selected”将其设为默认选项

-->

请选择性别：

<select>

  <option selected="selected">请选择</option>

    <option>男</option>

    <option>女</option>

</select>

</body>

</html>

textare文本域

textare负责创建一大片文本域，用于大规模的书写

textare格式：

 <!--x，y分别表示 一行字数 和 行数--->

<textarea cols="x" rows="y">

      这里面写入文本域默认显示

</textarea>

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>textare</title>

</head>

<body>

<!--textare

cols：表示可输入的一行内容（不推荐使用，一般在css设置）

rows：表示存在多少列（不推荐使用，一般在css设置）

文本默认文字可以直接在里面书写

-->

<form>

  <textarea cols="50" rows="5">

      这里面写入文本域默认显示

  </textarea>

</form>

</body>

</html>

HTML综合练习

下面给出案例图，请依照案例图写出相关代码：

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>综合案例</title>

</head>

<body>

<!--第一步我们获得大标题-->

<h4>青春不常在，抓紧谈恋爱</h4>

<!--我们下面的内容排列整齐，这里需要采用表格实现-->

<!--表格分为n行2列-->

<table width="1000px">

<!--        第一行：姓名 单选框 带有label的字-->

    <tr>

        <td>姓名:</td>

        <td>

            <input type="radio" name="sex" id="man"> <label for="man">男</label>

            <input type="radio" name="sex" id="woman"><label for="woman">女</label>

        </td>

    </tr>

<!--    第二行：生日 下拉列表-->

    <tr>

        <td>生日：</td>

        <td>

            <select>

                <option>2000</option>

                <option>2001</option>

                <option>2002</option>

                <option>2003</option>

                <option selected="selected">请选择年份</option>

            </select>

            <select>

                <option>1</option>

                <option>2</option>

                <option>3</option>

                <option>4</option>

                <option selected="selected">请选择月份</option>

            </select>

            <select>

                <option>1</option>

                <option>2</option>

                <option>3</option>

                <option>4</option>

                <option selected="selected">请选择日期</option>

            </select>

        </td>

    </tr>

<!--    第三行 所在地区 text带value-->

    <tr>

        <td>所在地区:</td>

        <td><input type="text" value="填写地区"></td>

    </tr>

<!--    第四行：婚姻状况 单选框-->

    <tr>

        <td>婚姻状况</td>

        <td><input type="radio" name="family"> 未婚 <input type="radio" name="family"> 已婚 <input type="radio" name="family"> 离婚 </td>

    </tr>

<!--    第五行：学历 text-->

    <tr>

        <td>学历：</td>

        <td><input type="text"></td>

    </tr>

<!--    第六行：喜欢的类型 多选框-->

    <tr>

        <td>喜欢的类型:</td>

        <td><input type="checkbox" name="love"> 可爱的 <input type="checkbox" name="love"> 妖娆的 <input type="checkbox" name="love"> 放荡的 <input type="checkbox" name="love"> 都喜欢 </td>

    </tr>

<!--    第七行：自我介绍 textare框-->

    <tr>

        <td>自我介绍：</td>

        <td><textare>自我介绍</textare></td>

    </tr>

<!--    免费注册的submit标签-->

    <tr>

        <td></td>

        <td><input type="submit" value="免费注册"></td>

    </tr>

<!--    同意注册条款-->

    <tr>

        <td></td>

        <td><input type="checkbox">我同意注册条款并遵守</td>

    </tr>

<!--    我是会员，跳转页面立即登录-->

    <tr>

        <td></td>

        <td><a href="#">我是会员，立即登录</a></td>

    </tr>

<!--    承诺条款：采用标题和无序列表完成-->

    <tr>

        <td></td>

        <td>

            <h2>我承诺</h2>

            <ul>

                <li>年满18，单身</li>

                <li>抱着严肃的态度</li>

                <li>真诚寻找另一半</li>

            </ul>

        </td>

    </tr>

</table>

</body>

</html>

结束语

好的，关于HTML的介绍就到这里了，恭喜你迈进了前端的第一步！