前端探索 | 【HTML】

yudaza
149 阅读11分钟

英国科学家蒂姆·伯纳斯-李于1989年发明了万维网。 URL+HTTP+HTML

一、基本概念

1. 网页与网站

  • 网站是指在因特网上根据一定规则，使用HTML等制作的用于展示特定内容相关的网页的集合
  • 网页是网站中的一页，通常是HTML格式的文件，通过浏览器来阅读
  • 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件

2. HTML

  • HTML指的是超文本标记语言（Hyper Text Markup Language），它是一种用来描述网页的语言
  • HTML不是一种编程语言，而是一种标记语言（markup language）
  • 标记语言是一套标记标签（markup tag） 所谓的超文本有两层含义 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制） 2.它可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本）

3. 网页的组成

网页是由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户

4. Web标准

Web 标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

为什么需要Web标准？

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

1.让Web的发展前景更广阔。

2.内容能被更广泛的设备访问。

3.更容易被搜寻引擎搜索。

4.降低网站流量费用。

5.使网站更易于维护。

6.提高页面浏览速度。

5. Web标准的组成

主要包括 结构（Structure）、 表现（Presentation） 和 行为（Behavior） 三个方面。 简单理解：结构写到HTML 文件中，表现写到CSS 文件中，行为写到JavaScript 文件中。

二、HTML语法规范

24430872-c8d13501da6008be.png

1. HTML起手

<!DOCTYPE html>                   //文档类型，是html5类型的
<html lang="en">                  //html标签，language=en，通常改为zh-CN
<head>
    <meta charset="UTF-8">        //字符编码
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //可以防止页面缩放
    <title>Document</title>       //书写标题
</head>
<body>
    
</body>
</html>

2. body中的内容

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <header>广告招租</header>               //头部header
    <div>                                  //划分div
      <main>                               //标记主要内容main
        <h1>这是个标题</h1>
        <section>                          //章节section，建立全新的章节
          <h2>全新的章节</h2>
          <section>
            <h4>1.1</h4>                   //h1~h6，调节字体大小
            <p>一段话一段话</p>             //段落p
          </section>
        </section>
      </main>
      <aside>                              //标记旁支内容aside
        前往 1 2 3 页面
      </aside>
    </div>
    <footer>&copy;YDZ企业</footer>          //底部footer
  </body>
</html>

3. 全局属性

所有标签都拥有的属性

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      .middle {
        background: green;
        color: white;
      }
      .bordered {
        border: 10px solid blue;
      }
      [id=xxx] {
        border: 10px solid yellow;
      }
    </style>
  </head>

  <body>
    <header hidden>广告招租</header>
    <div class="middle bordered" contenteditable>
      <main>
        <h1 style="border: 10px solid red;" tabindex="1" title="完整的内容">
          这是个标题
        </h1>
        <section>
          <h2 tabindex="2">全新的章节</h2>
          <section>
            <h4 tabindex="3">1.1</h4>
            <p>一段话一段话</p>
          </section>
        </section>
      </main>
      <aside>
        前往 1 2 3 页面
      </aside>
    </div>
    <footer id="xxx">&copy;YDZ企业</footer>
  </body>
</html>

  • class 与 id ：每个HTML元素都可以使用class属性，在中加入来赋予样式。每个HTML元素都可以使用id属性，但是必须是唯一的。所以不推荐使用id

  • contenteditable 将所属内容可编辑化

  • hidden 隐藏

  • style 可以定义样式 注：js执行可覆盖样式

  • tabindex 可以让用户用Tab键切换 tabindex=0是为最后一个，tabindex=-1是为永远无法访问

  • title 超出文字用省略号，title指令可以让鼠标悬浮在省略号上时显示内容

4. 默认样式

如何找到默认样式：打开chrome开发者工具，Elements->Styles->user agent stylesheet

CSS reset 更改默认样式

5. 内容标签

5.1. ol+li 有序列表

<ol>
  <li>list </li>
  <li>item</li>
</ol>             //ordered list

5.2. ul+li 无序列表

<ul>
  <li>list</li>
  <li>item</li>
</ul>              //unordered list

5.3. dl+dt+dd

<dl>                //description list
  <dt>描述目标</dt>  //describe term
  <dd>描述内容</dd>
</dl>

5.4. pre 保留空格、回车、Tab

<pre>               
<h2 tabindex="2">全新的    章节</h2>
</pre>

5.5. code 所有字体等宽

<pre>
<code>
  abcd
  efgh
</code>
</pre>

5.6. hr 水平分割线

个人中心
<hr>

5.7. br 换行

<h4>
上一行<br />下一行
</h4>

5.8. a 超链接

<p>
  <a href="//google.com">搜索</a>
</p>

5.9. em重点标注

<p>
  <em>重点标注</em>
</p>

5.10. strong

<p>
  <strong>加粗字体</strong>
</p>

5.11. quote

引用

5.12. blockquote

引用前面空格隔开

6. a标签

6.1. 属性

href 意为 hyper reference 超链接

<p>
  <a href="//google.com">搜索</a>
</p>

可安装工具parcel，利用parcel打开链接，切勿双击html【Git】

λ yarn global add parcel
λ parcel index.html
Server running at http://localhost:1234 
√  Built in 4.43s.

6.2. 网址

//google.com 书写此种网址，不用https或http防止报错

6.3. 路径

/a/b/c.html及a/b/c.html（在同一根目录下，绝对路径和相对路径都相同）

index.html同于./index.html（同一根目录下）

6.4. 伪协议

6.4.1 javascrip: 代码

（可以制作一个没有反应的a标签，空代码）

<body>
  <a href="javascrip:alert(1);">javascrip伪协议，javascrip:填写代码；</a>
</body>

6.4.2 mailto: 邮箱

<body>
  <a href="mailto:yudada1994@gmail.com">邮件联系YDZ</a>
</body>

6.4.3 tel: 手机号

<body>
  <a href="tel:1384135xxxx">电话联系YDZ</a>
</body>

6.4.4 id

href=#xxx

HTML中a标签中href="#xxx"，当点击后，页面会跳转到标签中id="xxx"的地方。

6.4.5 target

指定在哪个窗口打开超链接

<p>
  <a href="http:google.com" target="_blank">搜索</a>
</p>

target的取值：

  • _blank （在新的页面打开链接）
<body>
  <a href="//google.com" target="_blank">前往搜索</a>
</body>
  • _self （在当前页面打开链接）
<body>
  <a href="//google.com" target="_self">前往搜索</a>
</body>
  • _top （如果没有框架，跟_self效果一样，在当前的浏览器窗口打开超链接；如果有框架就跟_self不一样，_self会在超链接所在的框架中打开超链接，而_top会在所在浏览器窗口(浏览器窗口包含了框架)打开连接）
<body>
  <a href="//google.com" target="_top">前往搜索</a>
</body>
  • _parent （target="_parent" ，属性作用使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。）
<body style="background: yellow;">
    <a href="//google.com" target="_parent"></a>
  </body>
  • 自己命名window.name （命令会新打开页面并且命名为“YDZ”，可以让某些链接同样在YDZ页面打开（例如上图baidu））
<body>
  <a href="//google.com" target="YDZ">前往搜索</a>
  <a href="//baidu.com" target="YDZ">前往搜索</a>
</body>
  • 自己命名iframe.name （在一个页面又可以谷歌又可以百度）
<body>
  <a href="//google.com" target="YDZ">前往搜索</a>
  <a href="//baidu.com" target="DZY">前往搜索</a>
  <hr />
  <iframe src="" name="YDZ"></iframe>
  <hr />
  <iframe src="" name="DZY"></iframe>
</body>

6.5. download

下载当前页面（多数浏览器不支持）

6.6. rel=noopener

用于解决被恶意利用安全漏洞。利用target="_blank"打开新标签页面后，JS功能将会赋予新窗口一些权限来操作原Tab页，新页面的window对象上有一个属性opener，它指向的是前一个页面的window对象，恶意网站会利用window.opener.location.replace来更改原网站URL

24430872-d60f5a92bf2523c0.png

7. iframe标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。内嵌窗口。（现在很少用）

8. table标签

8.1. HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息

<body>
    <table>
      <thead>
        <tr>
          //table row
          <th></th>
          <th>班级</th>
          //table head
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>第一名</th>
          <td>高三八班</td>
          //table data
          <td>鱼大杂</td>
        </tr>
        <tr>
          <th>第二名</th>
          <td>高三八班</td>
          <td>马大哈</td>
        </tr>
        <tr>
          <th>第三名</th>
          <td>高三八班</td>
          <td>猴大雷</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>统计</th>
          <td>3名八班学生</td>
          <td>3名学生</td>
        </tr>
      </tfoot>
    </table>
  </body>

观察上述实例与注释（table、thead、tbody、tfoot、tr、td、th）

8.2 相关样式

8.2.1 table-layout

table-layout CSS属性定义了用于布局表格单元格，行和列的算法。

取值：

  <style>
      table{
          table-layout: auto;
      }
  </style>

大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。

  <style>
    table {
      table-layout: fixed;
    }
  </style>

表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

使用 “fixed” 布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow  属性控制是否允许内容溢出。

8.2.2 border-collapse

<style>
    table {
      table-layout: fixed;
      border-spacing: 0px;
      border-collapse: collapse;
    }
    td,
    th {
      border: 1px blue;
    }
  </style>

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

取值：

(1) 合并（collapsed ）模式下，表格中相邻单元格共享边框。在这种模式下，CSS属性border-style 的值 inset 表现为槽，值 outset 表现为脊。

(2) 分隔（separated）模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing 来确定的。

8.2.3 border-spacing

border-spacing 属性指定相邻单元格边框之间的距离（只适用于 边框分离模式 ）。相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

border-spacing 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的（水平的或垂直的） 边框间距（border-spacing）和相应的（上，右，下或左）内边距之和。

该属性只适用于 border-collapse 值是 separate 的时候。

取值：

(1) length

描述单元格之间的水平和垂直距离的一个length值。它只在单值语法下使用。

(2) horizontal

描述相邻两列的单元格之间的水平距离的一个 length值。它只在双值语法下使用。

(3) vertical

描述相邻两行的单元格之间的垂直距离的一个 length值。它只在双值语法下使用。

(4) inherit

一个表示父元素的 border-spacing 的计算值的关键字，其父元素必须应用了border-spacing。

9. img标签

img 元素将一份图像嵌入文档。它可以发出一个get请求，然后展示图片。

9.1. 属性

<img class="fit-picture"
     src="/media/examples/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">

  • src 属性是必须的，它包含了你想嵌入的图片的文件路径。

  • alt 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。

其他的属性：

9.2 事件

onload/onerror

<body>
    <img id="xxx" width="800" src="1234.jpg" alt="这是加载失败的耳朵照片" />
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
        xxx.src = "/备用图片.png";
      };
    </script>
  </body>

可以在图片加载失败后用备用图片显示

9.3 响应式

max-width:100%

max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大

注：max-width 会覆盖width设置, 但 min-width设置会覆盖 max-width。

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>img</title>
    <style>
      * {                               //所有元素
        margin: 0;                      //外边距为0
        padding: 0;                     // 内边距为0
        box-sizing: border-box;         //见注
      }
      img {
        max-width: 100%;
      }
    </style>
  </head>

上代码可以使手机用户浏览图片有更好的体验

注：box-sizing 属性可以被用来调整这些表现： content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

10. form标签

form 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

此元素拥有全局属性

10.1. action

<body>
    <form action="/xxx" method="POST">
      //后台提供的地址，method用来控制用GET还是POST
      <input type="text" />//输入框 
      <input type="submit" />//提交按钮
    </form>
  </body>

处理表单提交的 URL。这个值可被 button、input type="submit"或 input type="image"元素上的 formaction属性覆盖。

10.2. autocomplete

用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。

<body>
    <form action="/xxx" method="POST" autocomplete="on">
      <input name="username" type="text" />
      <input type="submit" />
    </form>
</body>

能够显示用户的用户名，自选

10.3. method

浏览器使用这种 HTTP 方式来提交 表单. 可能的值有：

  • post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器.
  • get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 '?' 作为分隔符，没有副作用 时使用这个方法。
  • dialog：如果表单在 <dialog> 元素中，提交时关闭对话框。

10.4. target

表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中, 这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：

_self：默认值。在相同浏览上下文中加载。

_blank：在新的未命名的浏览上下文中加载。

_parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。

_top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。

  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" />
      <iframe name="a" src="index-demo-0.html" frameborder="0"></iframe>
    </form>
  </body>

10.5. onsubmit

  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" value="Let's Go" />
      <button type="submit">Let's Go</button>
      <iframe name="a" src="index-demo-0.html" frameborder="0"></iframe>
    </form>
  </body>

若要提交必须有type=submit，如若没有则默认type=submit

button与input都用来书写提交按钮，区别是input中只能有纯文本，button中可以有任何标签

11. input标签

HTML input 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。

input的工作方式相当程度上取决于type属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text。

可用的值包括：

24430872-42d63fa719fb8a3f.png

24430872-8809377e10182e8b.png

点击查看具体input

avatar
文章
阅读
粉丝
相关推荐
准实时前端监控探索
3.2k阅读
 · 
28点赞
云音乐前端国际化多语言探索实践
4.4k阅读
 · 
24点赞
探索HTMLx：强大的HTML工具
1.4k阅读
 · 
3点赞
2024 款：最新前端技术趋势
145k阅读
 · 
914点赞
听说前端出大事儿了
371k阅读
 · 
1.4k点赞