HTML详解

HTML 详解

1.HTML介绍 & 规范

1.1 介绍

HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)

专门制作网页的计算机语言

普通的文本就是英文单词，英文字母一样的存在。

超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。

比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，
普通人是没有执法权的。

字母img只是普通的字母，没什么特殊的含义。而被加上尖括号后，在网页的世界中，就具备了
显示图片的作用。

1.2 使用记事本开发第一个网页

在计算机任意的位置，创建一个空白的记事本

重点：文件的后缀名必须是 "htm" 或 "html"

鼠标右键文件，选择打开方式为"记事本"，输入下面代码

<html>
　　<head>
　　　　<title>拉钩有我title>
　　head>
　　<body>
　　　　必须火！
　　body>
html>

保存文件，双击文件会以计算机默认的浏览器运行，你的第一个网页就制作完成了！

注意：

1.标签它代表当前页面是一个HTML
2.标签中可以声明HTML页面的相关信息
3.标签中它主要是用于显示页面信息
4.标签要有开始，有结束，成双成对
4.开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭
5.大多数标签它具有属性,属性值要使用引号引起来。
6.HTML它本身是不区分大小写的。

1.3 下载和安装 VSCode

记事本编写网页太难了，我们推荐一款编写网页的神器！

1.3.1 下载地址

https://code.visualstudio.com/

1.3.2 初始中文设置

安装vscode之后，在界面的左侧，选择安装中文插件。

点击安装后，右下角会弹出重启的窗口

重启之后，界面就是伟大的中文了。

1.3.3 创建项目

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如: vscode目录

然后打开vscode软件，在vscode软件中选择 File -> Open Folder 打开刚才创建的文件夹

右键目录，创建子目录lagou-html，在lagou-html目录下创建文件，输入Test1.html

在代码编辑区，最上面输入！回车，就是见证奇迹的时刻

1.3.4 运行页面

需要安装插件 “open in browser ”

安装完插件，右键想要运行的页面文件，或者使用快捷键 alt+b

这里推荐使用chrome谷歌浏览器，精简，速度快。

先安装好chrome浏览器

修改默认的浏览器：首页的设置

添加代码

"open-in-browser.default":"chrome"

保存成功后，使用默认浏览器打开页面就是chrome了，当然你也可以修改成自己喜欢的浏览器，比如
火狐等

1.3.5 修改软件主题颜色

文件 -> 首选项 -> 颜色主题

字体大小：文件 -> 首选项 -> 设置 -> 文本编辑器 -> 字体

2.HTML的使用

2.1 文件标签

标签：代表当前书写的是一个HTML文档

标签：存储的本页面的一些重要的信息，它不会显示

标签：有一个子标签它是用于定义页面的标题的 <body>标签：书写的内容会显示出来 <body>标签的属性 <ul> <li>1. text 用于设置文字颜色</li> <li>2. bgcolor 用于设置页面的背景色</li> <li>3. background 用于设置页面的背景图片</li> </ul> <h3>2.2 排版标签</h3> <h4>2.2.1 HTML注释</h4> <h4>2.2.2 换行标签</h4> 标签就是一个换行（回车）功能标签，标签中的 / 可有可无的。 有/是html语言的标准化，但是html语言是一门不那么严谨的语言 <h4>2.2.3 段落标签</h4> 在标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行. 常用属性 align 它的作用是设置段落中的内容对齐方式可取值有 left right center <h4>2.2.4 水平线标签</h4> <hr>标签会在页面上产生一个水平线 对于hr标签它有常用属性: <ul> <li>align：可取值有left right center 代表水平线位置</li> <li>size：代表水平线厚度（粗细）</li> <li>width：代表水平线宽度</li> <li>color：水平线的颜色</li> <li> </li> </ul> 单位：size="5"，5是默认的单位，为"像素"/"像素点"，像素就是构成计算机图片的最小单位！ 也可以使用百分比，size="50%" 2.2.5 分区标签 div是一个块标签，用来进行布局的 普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版 div与span都是“容器”的作用，具体区别: <ul> <li>div会自动换行，我们也叫这样的标签为块级元素</li> <li>span标签它不会自动换行，我们也叫它为行内元素</li> <li>div：整体划分区块</li> <li>span：局部划分</li> </ul> 上图，两个div的区别是显而易见的，后面我们再具体学习css语法 <h3>2.3 字体标签</h3> <h4>2.3.1 字体标签</h4> 标签可以设置字体，字的大小及颜色，常用属性： <ul> <li>face:用于设置字体，例如宋体隶书楷体</li> <li>size:用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可）</li> <li>color:用于设置字的颜色</li> </ul> 注： 我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。 每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0， 0），十六进制表示为#FF0000。 按这种表达方式，理论上我们可以得到256 * 256 * 256 = 16777216种颜色。 1. 使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为#cc3300 时，可 简化成 #c30 这种方式 <pre><body bgcolor="#666"></pre> 2. RGB颜色表示法：RGB（x,y,z）。x、y、z是0 ～ 255之间的整数。rgb字母大小写无所谓 <pre><body bgcolor="rgb(11,11,11)"></pre> （在线颜色选择器： http://www.86y.org/code/colorpicker/color.html ） 百度搜索：字魂网，下载一个免费的字体，并安装到计算机中。在我们的网页中显示出来！ <h4>2.3.2 标题标记</h4> 给一段文字起一个标题 <h1> ----- <h6> h1最大 h6最小，它们代表的是标题， 自动换行，字体加粗，标题与标题之间产生一定的距离 注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套 <body bgcolor="#666"> <h4>2.3.3 格式化标签</h4> <ul> <li>：字体加粗</li> <li>：字体倾斜</li> <li><del>：删除线</li> <li>：下划线</li> <li></li> </ul> <h3>2.4 列表标记</h3> <ul> <li>ol：有序列表 <ul> <li>type='A'：字母排序</li> <li>type='I'：罗马排序</li> <li>start=“3” 序列从几开始</li> </ul> </li> <li>ul：无序列表 <ul> <li>type="disc"：默认，实心圆</li> <li>type="square"：方块</li> <li>type="circle"：空心圆</li> </ul> </li> <li></li> </ul> <h3>2.5 图像标签</h3> <img>它可以让我们在网页引入一张图片，常用属性： <ul> <li>1. src 代表的图片的路径</li> <li>2. width 图片的宽度</li> <li>3. height 图片的高度</li> <li>4. border 用于设置图片的边框</li> <li>5. alt 如果图片不可以显示时，默认显示的文本信息</li> <li>6. title鼠标悬停图片上，默认显示的文本信息</li> <li>7. align 图片附件文字的对齐方式，可取值有 <ul> <li>left：把图像对齐到左边</li> <li>right：把图像对齐到右边</li> <li>middle：把图像与中央对齐</li> <li>top：把图像与顶部对齐</li> <li>bottom：把图像与底部对齐（默认）</li> </ul> </li> <li></li> </ul> <h3>2.6 超连接标签</h3> <a>标签,可以实现跳转到其它页面操作. 超链接内容不仅可以是文本，也可以是图片等信息 常用属性: <ul> <li>1. href 代表的我们要跳转的路径</li> <li>2. target 这个属性规定在何处打开这个链接文档，可取值： <ul> <li>_ blank 在新窗口中打开页面</li> <li>_ self 默认。在本窗口打开页面</li> </ul> </li> <li></li> </ul> 功能性连接： 1.发邮件 <pre><a href="mailto:sunguoan@163.com">联系站长</a></pre> 2.QQ聊天窗口 <pre><a href="tencent://message/?uin=19998539&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/> </a></pre> <h3>2.7 表格</h3> <ul> <li><table>：定义一个表格 <ul> <li>border：边框，取值是像素为单位</li> <li>width 代表的表格的宽度</li> <li>align 代表表格的对齐方式；取值 <ul> <li>left 左对齐表格</li> <li>right 右对齐表格</li> <li>center 居中对齐表格</li> </ul> </li> <li>cellspacing：单元格间距（通常设置0表示单线表格）</li> </ul> </li> <li><tr>：表格中的行（Table Row） <ul> <li>align 代表表格的对齐方式；取值 <ul> <li>left 左对齐内容（默认值）</li> <li>right 右对齐内容</li> <li>center 居中对齐内容（th 元素的默认值）</li> </ul> </li> </ul> </li> <li><td>：表格中的数据单元格（Table DataCell） <ul> <li>colspan 指示列的合并</li> <li>rowspan 指示行的合并</li> </ul> </li> <li></li> </ul> <pre><table border="1" width="400px" align="center" cellspacing="0"> 　　<tr align="center"> 　　　　<td colspan="3">计划统计表</td> 　　</tr> 　　<tr> 　　　　<td rowspan="3">收入金额</td> 　　　　<td>5</td> 　　　　<td>6</td> 　　</tr> 　　<tr> 　　　　<td>8</td> 　　　　<td>9</td> 　　</tr> 　　<tr> 　　　　<td>11</td> 　　　　<td>12</td> 　　</tr> </table></pre> <h3>2.8 表单标签</h3> 表单可以让我们将录入信息携带到服务器端。 简单说，通过表单可以将要提交的数据提交到指定的位置。 但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务 器。 常见的登录页面、注册页面都离不开表单的应用 <h4>2.8.1 form属性</h4> action：整个表单提交的目的地 method：表单提交的方式 <ul> <li>get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）</li> <li>post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）</li> </ul> 2.8.2 表单中的元素(控件) <ul> <li><input>元素的type属性 <ul> <li>text：默认值，普通的文本输入框 <ul> <li>placeholder属性：提示文本</li> <li>maxlength属性：最多能输入字符数量</li> </ul> </li> <li>password：密码输入框</li> <li>checkbox：多选框/复选框</li> <li>checked：被选中</li> <li>radio：单选按钮</li> <li>file：上传文件</li> <li>reset：重置按钮</li> <li>submit：提交按钮</li> <li>button：普通按钮</li> </ul> </li> <li><select>：下拉列表/下拉框 <ul> <li><option>：列表中的项</li> <li>selected：被选中</li> </ul> </li> <li><textarea>：文本域（多行文本框） <ul> <li>可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height和 width 属性。</li> </ul> </li> <li><button>：按钮 <ul> <li>在form表单中，作用和submit一样</li> <li>不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）</li> </ul> </li> </ul> <pre><form action="baidu" method="GET"> 　　<p>帐号：<input name="a" type="text" placeholder="请输入帐号..." 　　maxlength="5" ></p> 　　<p>密码：<input name="b" type="password"></p> 　　<p>爱好：　　　　<input name="hobby" type="checkbox"> 抽烟　　　　<input name="hobby" type="checkbox" checked="checked"> 喝酒　　　　<input name="hobby" type="checkbox"> 烫头　　　　<input name="hobby" type="checkbox"> 泡澡　　</p> 　　<p>性别：　　　　<input type="radio" name="sex"> 男　　　　<input type="radio" name="sex" checked="checked"> 女　　</p> 　　<p>身份：　　　　<input type="radio" name="role"> ceo 　　　　<input type="radio" name="role"> cto 　　　　<input type="radio" name="role"> coo 　　　　<input type="radio" name="role" checked="checked"> ufo 　　</p> 　　<p>头像：　　　　<input type="file"> 　　</p> 　　<p>血型：　　　　<select> 　　　　　　<option>A型</option> 　　　　　　<option>B型</option> 　　　　　　<option>C型</option> 　　　　　　<option selected="selected">O型</option> 　　　　</select> 　　</p> 　　<p>个人简介：　　　　<textarea cols="10" rows="5"></textarea> 　　</p> 　　<p> 　　　　<input type="reset" value="清空"> 　　　　<input type="submit" value="提交"> 　　　　<input type="button" value="取消"> 　　　　<button>保存</button> 　　</p> </form> <button>测试</button></pre> 注意事项： <ul> <li>1. 所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不同）</li> <li>2. 单选框要想可以一次只选择一个，要具有相同的name值</li> <li>3. 所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值</li> </ul> <h3>2.9 框架标签</h3> 通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页 面。 注意，框架标签和body标签不共存。“有你没我，有我没你” <pre><!DOCTYPE html> <html lang="en"> <head> 　　<meta charset="UTF-8"> 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"> 　　<meta http-equiv="X-UA-Compatible" content="ie=edge"> 　　<title>Document</title> </head> 　　<frameset rows="10%,*,13%"> 　　　　<frame src="top.html"></frame> 　　　　<frameset cols="15%,*"> 　　　　　　<frame src="left.html"></frame> 　　　　　　<frame src="right.html"></frame> 　　　　</frameset> 　　　　<frame src="foot.html"></frame> 　　</frameset> </html></pre> top.html、left.html、right.html、foot.html 四个页面内容一样，稍微改下文字而已，以top.html为例 <pre><!DOCTYPE html> <html lang="en"> <head> 　　<meta charset="UTF-8"> 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"> 　　<meta http-equiv="X-UA-Compatible" content="ie=edge"> 　　<title></title> </head> <body> 　　<h1>顶部导航区域</h1> </body> </html></pre> <h3>2.10 其它标签与特殊字符</h3> <h4>2.10.1<meta>标签</h4> <meta>标签必须写在<head>标签之间. <pre><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"></pre> 1. 当前页面的字符编码 gbk：中文简体 2. 这里的名字是 viewport （显示窗口） 数据是文本内容 content="width=device-width, initial-scale=1.0" 也就是显示窗口宽度是客户端的屏幕宽度（就是满屏！），显示的文字和图形的初始比例是 1.0 3. 每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版 本都以当前版本所支持的最高级标准模式渲染 <ul> <li>通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面</li> </ul> 注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径。 <h4>2.10.2 <link>标签</h4> 后面我们会使用link标签来导入css 注意:link标签也必须写在<head>标签中。 <h4>2.10.3 特殊字符</h4> <h2>3. HTML5新特性</h2> <h3>3.1 HTML4与HTML5的区别</h3> H5包含h4 1. 大小写不敏感 <ul> <li>(1) 标签</li> <li>(2) 属性</li> <li>(3) 属性的值</li> <li> <pre><inPUT tYPe="pasSWord"/></pre> </li> </ul> 2. 引号可省略 <pre><input type="password"> <input type=password></pre> 3. 省略了结尾标签 <pre><p>哈哈哈哈哈哈哈 <p>哈哈哈哈哈哈哈</pre> 说是省略，其实运行起来，查看源代码，html是自动帮我们补全了 <h3>3.2 新增语义化标签</h3> html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此 新增许多语义化标签，让div“见名知意” <ul> <li>section标签：表示页面中的内容区域，部分，页面的主体部分</li> <li>article标签：文章</li> <li>aside标签：文章内容之外的，标题</li> <li>header标签：头部，页眉，页面的顶部</li> <li>hgroup标签：内容与标题的组合</li> <li>nav标签：导航</li> <li>figure标签：图文并茂</li> <li>foot：页脚，页面的底部</li> <li></li> </ul> <h3>3.3 媒体标签</h3> 想在网页上播放视频，就要使用<video>，属性有： <ul> <li>src：媒体资源文件的位置</li> <li>controls：控制面板</li> <li>autoplay：自动播放（谷歌失效，360浏览器可以）</li> <li>loop：循环播放</li> <li> <pre><video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video></pre> </li> </ul> <h3>3.4 新增表单控件</h3> 表单的控件更加丰富了 <ul> <li><input>，修改type属性： <ul> <li>color：调色板</li> <li>date：日历</li> <li>month：月历</li> <li>week：周历</li> <li>number：数值域 <ul> <li>min：最小值（默认值是1）</li> <li>max：最大值（默认值无上限）</li> <li>step：递增量</li> </ul> </li> <li>range：滑块</li> <li>search：搜索框（带×号，可一键删除框中内容）</li> </ul> </li> <li>进度条<progress/></li> <li>高亮</li> <li>联想输入框<datalist> （模糊查询） <ul> <li>选项<option></li> </ul> </li> </ul> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid263-0.html' class='tagbtn' target='_blank'>html</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566535.html">html标签</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564642.html">HTML和CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561490.html">HTML表单</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-558169.html">HTML5新增</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557384.html">Jmeter+ant实现自动生成基于HTML报告及自动发送邮件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555707.html">Python 发送HTML格式的邮件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555700.html">shell 拼接html table 发送邮件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555084.html">html入门-狂神学java</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-552454.html">SAP导出报表格式XXl、XML、XLSX、MHTML选择</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-549821.html">HTML5手机APP开发入门(2)</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-548983.html">https://m.php.cn/vuejs/464077.html</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-547475.html">HTML+CSS系列:登录界面实现</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> 一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>