HTML极简入门学习

最新推荐文章于 2022-03-20 10:42:19 发布

高崖残雪已无多

最新推荐文章于 2022-03-20 10:42:19 发布

阅读量683

点赞数

文章标签： html web html5

本文链接：https://blog.csdn.net/PeZXO/article/details/106786644

版权

前言

Web诞生

Internet

中文正式译名为因特网，又叫作国际互联网，是由所有使用公共语言互相通信的计算机连接而组成的全球网络。

起源发展

20世纪60年代美国国防部高级研究计划局（ARPA）建设了一个军用网，叫做“阿帕网”（ARPAnet），于1969年正式启用。、

1992年，美国IBM、MCI、MERIT三家公司联合组建了一个高级网络服务公司（ANS），建立了一个新的网络，使Internet开始商用化。

WWW（万维网）

WWW是World Wide Web的缩写，也可以写为W3，中文名为万维网。是集文本、声音、图像、视频等多媒体信息于一身的全球信息资源网络。用户通过浏览器在WWW中搜索和浏览自己感兴趣的所有信息。

Web开发介绍

Web开发分为前端开发与后端开发，在以前是不区分前后端的，前后端的相互独立开发减少了业务难度，也使得后端的错误不会直接反映到前端。

前端开发

前端指的是直接与用户接触的网页，网页上通常有HTML、CSS、Javascript等内容。

后端开发

后端指的是程序、数据库和服务器层面的开发。

Web开发的标准

Web应用开发需要遵循的标准就叫Web标准，这里Web标准是一系列标准的集合。
网页主要由三部分组成：结构标准（XML、HTML和XHTML），表现标准（CSS），行为标准（DOM、Javascrip）。

HTML

HTML用来构成网页的内容，内容就是网页制作者放在页面上想让用户浏览的信息，例如文字、图片、视频等等，简单来说就是用来定义网页的内容。

CSS

CSS决定网页样式的展现，也就是网页的外观。

JavaScript

JavaScript定义网页上的交互，控制网页的行为。

开发工具

开发工具可以使用微软的VScode，它具有丰富的插件，能够快速进行开发。

在这里插入图片描述

HTML发展史

HTML概念

HTML又叫做超文本标记语言，用来构建网页的一种标记语言

HTML历史

1993年由互联网工程工作小组（IETF）发布工作草案1995年发布HTML2.0版本
1997年1月14日由W3C发布HTML3.2版本
1997年12月18日由W3C发布HTML4.0版本
1999年由W3C发布HTML4.01版本
2000年由W3C发布XHTML1.0版本，它是一种更严格的HTML代码

XHTML

XHTML是可扩展超文本标记语言，是一种更加严格、更加纯净的HTML语言。

`XHTML`与`HTML`的区别

XHTML元素必须被正确地嵌套
XHTML元素必须被关闭
标签名必须用小写字母
XHTML文档必须拥有根元素

HTML语义化

HTML5中新增加了很多语义化标签，不同的HTMI标签代表了不同的网页内容。

语义化优势

语义化HTML会使HTML结构变的清晰，有利于代码的维护
有利于搜索引擎抓取
语义化使代码仍具可读性
语义化会使HTML代码变得更简洁，提高页面加载速度
语义化有助于屏幕阅读器等设备的识别

HTML初识

HTML标签

单标签

单标签：只有一个标签就能表达完整的含义

例如：<input/>``<img/>。

反斜线不用写标签也是可以被渲染出来的，

双标签

双标签：由开始标签和结束标签一起组成

例如：<div></div>``<span></span>

元素

一对标签包含的所有内容，其中元素的内容是指开始标签和结束标签之间的内容。

例如：<div>Hello World</div>

属性

标签可以有很多属性，属性总是在开始标签中定义，而且是以名值对的形式出现，其中属性值以双引号包裹。

例如：<img alt="示例图片"/>

一个简单的页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单尝试</title>
</head>
<body>
  <div>Hello World!</div>
</body>
</html>

在这里插入图片描述

HTML常用标签

基本结构

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

如上代码是HTML的一个基本结构，<!DOCTYPE html>是HTML5的文档声明标签，表示这个文档是HTML5的文件，html对大小写并不敏感，即使用大写的代码也会最终当作小写进行处理的，但是为了代码的规范，除了声明标签，其它的html标签均使用小写。

<html></html>是html的根标签，lang=en表示这个页面是英文的，<html></html>标签中包含着<head></head>和<body></body>标签，<head></head>中可以包含这个文档编码方式、标签名和这个文档的层叠样式和JS等内容。

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<meta charset="UTF-8">表明这个页面的编码方式是UTF-8，<title>Document</title>表示这个页面的标签名是Document，最终会反映到浏览器渲染的页面上。

在这里插入图片描述

<body></body>中定义整个页面的内容。

我们可以在编辑器中保存我们所写的页面为HTML文件（后缀名为.html），然后通过浏览器打开，也可以凭借VScode丰富的插件来打开文件，有关VScode的插件用法可以在网上查阅相关信息。

标题标签

<!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>
  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
  <h4>标题4</h4>
  <h5>标题5</h5>
  <h6>标题6</h6>
</body>
</html>

在这里插入图片描述

之后的代码将不给出完整代码，只给出必要代码。

<h1>~<h6>标签就好比在word里写段落时的段落标题的级别，h1是最高的级别，也会被渲染成字体最大的级别。被包裹在标签内的是它的文本内容，最终会被浏览器渲染出来。

段落标签

有段落标题自然会有段落，段落标签使用的是<p></p>，同样标签内包裹文本内容，

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Ex, aperiam pariatur beatae reiciendis saepe dolore vero
  ratione molestiae sint eligendi ab odit veniam unde facere
  provident explicabo rem? Earum, odio!</p>

在这里插入图片描述

需要注意的是，标签里的文本内容会依据浏览器的大小自动折行（实际上文本内容是依据标签大小折行的，而标签大小则依据浏览器视口大小），这也是html的优势。

div标签与span标签

如果说有最基本的元素，那么<div>标签可以算作基本标签，<div> 可定义文档中的分区或节（division/section）。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div>标签是一个块级标签，可以作为一个容器包裹其它元素进行使用。

<span>标签是一个内联标签，用在一行文字中。

<div>Hello</div>
<div>World</div>
<span>Hello</span>
<span>World!</span>

在这里插入图片描述

上述代码渲染成的页面如上图所示，可以看到<div>在默认情况下一个标签占据浏览器一行，并且高度由内部文本内容决定，而<span>默认时，高度由文本内容决定，宽度也由内部文本内容决定，可以在浏览器内按F12详细查看这两个标签的信息：

在这里插入图片描述

通过div就能将页面内容划分开，再配合css层叠样式就能得到想要的页面效果。

链接

在一个网页中经常存在一段文字或图片点击时就能跳转到其它页面，这就是通过<a>标签做到的效果。

<a href="http://www.baidu.com">
  <span>点击访问百度</span>
</a>

在这里插入图片描述

在a标签内包裹着span标签，span内是我们想要通过点击它就能跳转的文字。

a标签内的href属性可以指定我们要跳转的页面，上述是百度官网。a标签还含有一个target属性，默认的值是_self，表示如果点击链接那么会在当前窗口打开链接，还可以设置成_blank表示在新窗口中打开链接。

图片标签

图片标签使用<img/>来表示，它有两个基本属性，一个是src，代表图片地址，一个是alt，表示图片无法显示时的替代文本。

src属性可以使用相对路径，也可以用绝对路径。

<img
  src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1592463426&di=4b7413ebc5eaa0e536ac0447a46603a7&imgtype=jpg&src=http%3A%2F%2Fimg6.bdstatic.com%2Fimg%2Fimage%2Fpublic%2Fhelian.jpg"
  alt="百度图片" />

以上所使用的就是绝对路径。因为html文件最终会部署到服务器内，所以使用类似./../这个方式是可以遍历到以当前文件为起点的其它文件的，例如，./hello.txt访问的是同级目录中的hello.txt文件，而./../hello.txt访问的是父级目录中的hello.txt文件，其它有关相对路径知识请自行百度解决，此处不再赘述。

还可以为img设置title属性，当鼠标悬浮在图片上方时，会显示设置的title内容。

列表

在word中经常可以通过项目符号在一个个项目前添加符号，在html中也有列表标签<li>来达到相似的效果。

有序列表

<ol>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
  <li>项目5</li>
  <li>项目6</li>
  <li>项目7</li>
</ol>

在这里插入图片描述

如上代码所示，有序列表用<ol>标签去包裹列表中的每一项内容<li>，被浏览器渲染出来时，列表中的每一项默认以数字开头排序。

在<ol>中设置type属性可以更改以数字作为开头的列表排序方式，比如设置type='a'就能以小写英文字母作为排序规则。

<ol type="a">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
  <li>项目5</li>
  <li>项目6</li>
  <li>项目7</li>
</ol>

在这里插入图片描述

无序列表

无需列表用<ul>来包裹列表中的每一项目，它默认被浏览器渲染出来的效果是列表的每一项前都有一个黑色的圆点。

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
  <li>项目5</li>
  <li>项目6</li>
  <li>项目7</li>
</ul>

在这里插入图片描述

同样的，ol也可以通过设置type来设置排序的样式，type=square时，渲染出来的效果是每一项前都有一个黑色方块。

自定义列表

<dl>
  <dt>项目标题a</dt>
  <dd>项目a.1</dd>
  <dd>项目a.2</dd>
  <dd>项目a.3</dd>
  <dd>项目a.4</dd>
  <dd>项目a.5</dd>

  <dt>项目标题b</dt>
  <dd>项目b.1</dd>
  <dd>项目b.2</dd>
  <dd>项目b.3</dd>
  <dd>项目b.4</dd>
  <dd>项目b.5</dd>
</dl>

在这里插入图片描述

如上是自定义列表的基本结构。

<dl>标签用来表示自定义列表，被它包裹的dt标签是自定义列表的标题标签，dd是每一项自定义列表的内容。

dl是description list的缩写，dtdescription title的缩写，dd是description definition的英文缩写，在了解英文语义时，就能很方便的进行记忆。

表格

表格的基本内容：

<table>
  <caption>表格标题</caption>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>表格内容1</td>
    <td>表格内容2</td>
    <td>表格内容3</td>
  </tr>
  <tr>
    <td>表格内容1</td>
    <td>表格内容2</td>
    <td>表格内容3</td>
  </tr>
</table>

在这里插入图片描述

以上会被渲染出没有边框的表格出来，<table>标签表示接下来的区域是表格内容。

<caption>标签定义表格的标题，<tr>标签表示一行表格的内容，<th>定义表格的表头内容，而<td>则定义出表格基本单元格内容。

为了增添表格的语义化，增加<thead>、<tbody>、<tfoot>标签（实际上不仅仅为了语义化，还有方便网页对整个表格的加载）：

<table>
  <caption>表格标题</caption>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>表格内容1</td>
    <td>表格内容2</td>
    <td>表格内容3</td>
  </tr>
  <tr>
    <td>表格内容1</td>
    <td>表格内容2</td>
    <td>表格内容3</td>
  </tr>
</table>
<table>
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th>公司名称</th>
      <th>资金</th>
      <th>税务</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>甲公司</td>
      <td>1300</td>
      <td>300</td>
    </tr>
    <tr>
      <td>乙公司</td>
      <td>1700</td>
      <td>300</td>
    </tr>
    <tr>
      <td>丙公司</td>
      <td>2010</td>
      <td>400</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>5010</td>
      <td>1000</td>
    </tr>
  </tfoot>
</table>

在这里插入图片描述

tr是table row的英文缩写，表示表格中的行；
th是table head的英文缩写，表示表头；
td是table data的英文缩写，表示表格中的基本单元格。

表格属性

在这里插入图片描述

对于如上这样有着合并跨越、并且还含有居左对齐和顶端对齐的表格，接下来我们将单纯依靠html的属性来完成。

<table border="1" width="300" height="100">
  <tr>
    <td rowspan="2" align="center">a</td>
    <td colspan="3" align="center">b</td>
  </tr>
  <tr>
    <td colspan="3" align="left">c</td>
  </tr>
  <tr>
    <td align="right">1</td>
    <td align="right">4</td>
    <td rowspan="3" colspan="2" align="center" valign=top>d</td>
  </tr>
  <tr>
    <td align="right">2</td>
    <td align="right">5</td>
  </tr>
  <tr>
    <td align="right">3</td>
    <td align="right">6</td>
  </tr>
</table>

在这里插入图片描述

如上，设置单元格合并跨越是通过为td标签设置rowspan与colspan属性达到的，rowspan是要跨越合并的行的数目，colspan则是列的数目。对齐方式则通过align与valign完成，align是水平对齐方式，valign是列对齐方式`。

表格的边框则通过为table设置border属性以达到。

以上是通过html的属性做出的表格效果，但是建议将表格效果通过css达到，html应当更多地偏重于页面结构地设置与语义化。

表单

定义表单结构使用<form></form标签，如下是一个表单的基本结构：

<form action="" method="get">
  <div>输入框：<input type="text"></div>
</form>

在这里插入图片描述

<input/>标签被渲染的结果是一个文本输入框。

form中含有的action属性表示的是这个表单要被提交到的地址，method表示文件被提交的方式，被提交的方式一般有两种：post与get。

input的相关属性

input元素中的type='text'出现一个输入框，当input中含有一个属性required时，表示该输入框中一定要输入内容,否则按提交按钮时无法提交。

<form action="" method="get">
  <div>输入框：<input type="text" required></div>
  <input type="submit" value="提交">
</form>

在这里插入图片描述

当input中设置了readonly属性时，表示输入框中已经设置的value值不可通过输入更改，在提交时，value值会提交到后台；如果给input设置了disabled，也能达到readonly只读的效果，但不会把value值提交到后台中。

input中设置palceholder表示设置一个"提示信息"，该"提示信息"文本内容，在输入框获得焦点时隐藏起来。

<input type="text" name="" id="" placeholder="默认内容">

在这里插入图片描述

input的hidden表示将输入框隐藏起来，但在提交信息时，依然会被提交（看不见，但是存在）。

input的pattern可以为input设置一个正则表达式，用于javascript来验证input的输入内容是否符合正则的格式。

input的type属性用途

input标签中的type决定了input的用途。

数字输入框

type=number表示要求输入框内的值是数字；

<div>数字：<input type="number"></div>

在这里插入图片描述

密码输入框

type=password表示输入的内容会以黑点隐藏起来，

<div>密码：<input type="password"></div>

在这里插入图片描述

email输入框

type=email要求输入框内的内容符合email格式；

url输入框

type=url要求输入框内的内容符合url格式；

提交按钮

type=submit时，输入框变成一个按钮

<form action="" method="get">
  <div>输入框：<input type="text" required></div>
  <input type="submit" value="提交">
</form>

在这里插入图片描述

它用于向表单的action提交表单的内容。

重置按钮

与type=submit类似的还有type=reset，它与submit一样根据value属性渲染出按钮内容，如果按这个按钮会将输入框的内容重置。

搜索框

将input的type设置成search会出现搜索框，我们进行搜索时一般会留有搜索历史，如果不想显示搜索历史，只需将search的input中添加autocomplete="off"即能关闭搜索历史。

<input type="search" list="fruits">
  <form>
    <datalist id="fruits">
      <option value="orange">橘子</option>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
    </datalist>
  </form>

在这里插入图片描述

该搜索框采用了自定义的数据源<datalist></datalist>，<option>标签内使用的是每一项数据。

文件上传

把input中的type属性设置成file表示上传文件，文件格式用accept属性进行限制，例如要求上传"jpg"或者"png"格式文件时，accept设置成accept=.jpg,.png，accept可以接收多种文件格式，文件拓展名以逗号隔开；在input内使用multiple，同时name属性设置的值后面加上"[]"，可以同时上传多个文件。

<input type="file" name="" id="" accept=".png,.jpg">

单选按钮

<form action="" method="get">
  <label for="man">
    <input type="radio" name="sex" value="man" id="man">男
  </label>
  <label for="woman">
    <input type="radio" name="sex" value="woman" id="woman" checked>女
  </label>
</form>

在这里插入图片描述

这个单选按钮的设置关键在于要将多个选项的name属性设为一致，另外就是为单选按钮设置checked时，它会默认被选中。

设置label标签的优点在于，被点击label包裹的所有内容（包括文本内容），它都会指向label标签中for属性对应id值（意思是for等于号右边的是一个标签的id）。

多选按钮

<input type="checkbox" name="program[]" value="12"><label for="12">12岁</label>
<input type="checkbox" name="program[]" value="13"><label for="13">13岁</label>

在这里插入图片描述

和radio类似，不过name="program[]"中的program[]像是一个数组（或者列表），实际上checkbox的value被点击后确实会被添加进这个数组（或者列表），表单提交后会传进后台。

其它相关表单元素

文本域

textarea文本域，rows控制行数，cols控制列数，textarea设置默认值时不能使用value值，可以直接用代码块包裹默认值。

<textarea placeholder="提示信息" name="info" cols="20" rows="3">默认值</textarea>

在这里插入图片描述

下拉列表

select用于设置下拉列表，option表示设置可以选择的子选项，option中设置一个selected表示该选项默认被选中。

<label for="">
  <select name="check-bar" id="">
    <option value="0" selected>默认被选中</option>
    <option value="1">新闻</option>
    <option value="2">游戏</option>
  </select>
</label>