html的简介（HTML知识点概括——一篇文章带你完全掌握HTML）
导读：HTML知识点概括 前端三件套分别是HTML3，CSS5，JavaScript...
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>空格： 空格</p> <p>大于：></p> <p>小于：<</p> </body> </html>网页基本标签-图片标签
代码展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片标签</title> </head> <body> <!-- 我们先给出图像格式：<img src="" alt="" title="" > img：图像标签 src:表示图像地址 ，可以写绝对地址 ，也可以写相对地址（推荐） 相对地址中返回上一级的标志是：../ alt:表示图像名称 ，当图像不显示时 ，直接打出图像名称 title：当鼠标移动上去时出现的名称 width：宽度 height：高度 --> <img src="https://www.cnblogs.com/Resources/picture/1.jpeg" alt="纱雾老师" title="点击查看" > </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的介绍就到这里了 ，恭喜你迈进了前端的第一步！
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！