HTML入门笔记(2)

驴初墨
331 阅读8分钟

HTML常用标签

1.a标签的用法

<a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

1.1 属性（href,target,download,rel=noopener）

1.1.1 href属性

href属性是<a>标签必须要有的属性，它为<a>标签定义一个超文本链接，但是href属性的值有多种选择：

1.1.1.1 href值：URL/网址

  1. <a href="http/https://www.baidu.com"></a> 使用http/https协议的标签，
  2. <a href="//www.baidu.com"></a>:无协议<a>标签(推荐用法，可以避免冲突),此时所用协议与当前页面相同。

1.1.1.2 href值：路径

使用路径作为href的值，<a href="main.html">main</a>，点击后会跳转到main.html,适用于跳转到同一路径下的html文件，非同一路径下可使用绝对路径或者相对路径来跳转，如：<a href="/a/b/c/main.html">main</a>(绝对路径)，<a href="a/b/c/main.html">main</a>(相对路径)。

1.1.1.3 href值：伪协议

  1. javascript:代码;<a href="javascript: alert(1);"></a>,会执行href中的JavaScript代码，<a href="javascript:;"></a>将不会执行任何操作；
  2. mailto:邮箱,
  3. tel:手机号,

1.1.1.4 href值：ID值：

  1. <a>标签href使用锚点#，此时点击<a>标签不发送请求，如 <a href="#bbb">bbb<a/>，此时点击a链接页面锚点变为aaa，使用锚点可以实现当前页面的跳转。
  2. 类似 <a href="?name=xxx">a链接</a> 的<a>标签，再点击后会发送一个GET请求，请求的值就是 name=xxx。

1.1.1.5 其他值

<a>标签href内容为空,如：<a href="">baidu</a>,点击a链接会刷新当前页面。

1.1.2 属性target

  1. _self ：加载当前页面，如果没有指定属性，则此值为默认。
  2. _top： 加载响应进入顶层页面，如果没有父级框架或页面，效果与 _self相同。
  3. _parent：在父级页面打开地址。
  4. _blank：在新窗口打开。
  5. target属性的部分值(自定义值)需要有iframe配合使用。

1.1.3 属性download

此属性指示浏览器下载URL而不是导航到URL <a href="http://baidu.com" download>QQ</a>在点击此链接后并不会打开 http://baidu.com，而是将此网页保存到本地。 此属性仅适用于同源URLs,且不是所有浏览器均支持，手机浏览器可能不支持。

1.1.4 属性rel=noopener(待添加)

1.2 a标签的作用

1.2.1 跳转外部界面（href值为url时）

1.2.2 跳转锚点（href 为ID值时）

1.2.3 激发电话或者邮件动作或其他动作（mailto:或tel:或javascript:代码 ）

2.img 标签的用法

2.1 img 标签的作用

HTML <img> 元素将一份图像嵌入文档。

2.2 img标签的属性

2.2.1 src

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

2.2.2 height/width

使用 width、height 设置 原始分辨率：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。图像的高度，在 HTML5 中的单位是 CSS 像素**，可以只指定 width 和 height 中的一个值**，浏览器会根据原始图像进行缩放。

2.2.3 alt

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

2.3 img标签的事件

2.3.1 onload

2.3.2 onerror

2.4 img标签的响应式

适应不同的页面，max-width:100%

2.5 img标签与可替换元素(待更新)

3.table-在浏览器中表示表格的标签

3.1 table的相关标签：

<table></table>,<thead></thead>,<tbody></tbody>,<tbody></tbody> 基本结构组成,thead、tbody、tfoot都是块级容器元素，且都是table的一级子元素，分别表示表头、表体和表尾。这三个元素都是可选的，在源代码中没有先后顺序要求。
<tr></tr>：新建一行表格,<td></td>:数据,<th></th>:表头(和td差不多，只不过数据加粗),tr标签表示表格的一行（table row）。如果表格有thead、tbody、tfoot，那么tr就放在这些容器元素之中，否则直接放在table的下一级。th和td都用来定义表格的单元格。其中，th是标题单元格，td是数据单元格。
table基本结构：

table代码效果示例：

3.2 table的相关样式：

3.2.1 table-layout

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

  1. auto(默认值):大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
  2. fixed:表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

定义方式示例

3.2.2 border-collape

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

参数为：collape,合并模式

参数为：separate,分隔模式

3.2.3 border-spacing

border-spacing 属性指定相邻单元格边框之间的距离（只适用于 边框分离模式 ）。相当于 HTML 中的 cellspacing属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。 border-spacing 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的（水平的或垂直的） 边框间距（border-spacing）和相应的（上，右，下或左）内边距之和。

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

4.form标签

form标签用来定义一个表单，所有表单内容放到这个容器元素之中。

4.1 form属性

  1. action：服务器接收数据的 URL。
  2. method：提交数据的 HTTP 方法，可能的值有POST（表单数据作为 HTTP 数据体发送），GET（表单数据作为 URL 的查询字符串发送）。
  3. autocomplete：如果用户没有填写某个控件，浏览器是否可以自动填写该值。它的可能取值分别为off（不自动填写）和on（自动填写）。
  4. target：在哪个窗口展示服务器返回的数据。
    代码： <form action="https://example.com/api" method="post" autocomplete="on" target="_blank">
    <input type="text" name="user">
    <input type="submit"></form>
    效果：

上面代码就是一个表单，包含一个文本输入框和一个提交按钮，文本输入框的name属性是user。用户在文本输入框里面，输入用户名，比如 Lucky，然后点击提交按钮，浏览器就会向服务器https://example.com/api发送一个 POST 请求，发送 user=Lucky 这样一段数据，并在一个空白窗口展示服务器返回的数据。

4.2 form事件

  1. onsubmit

5.input 标签

input标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。input有多种类型，取决于type属性的值。

5.1 input标签的属性

  1. type="text"：普通的文本输入框，用来输入单行文本。
    代码：<input name="username" type="text" />
    效果：

  2. type="email"：一个只能输入电子邮箱的文本输入框。表单提交之前，浏览器会自动验证是否符合电子邮箱的格式，如果不符合就会显示提示，无法提交到服务器。
    代码：<input name="email" type="email" />
    效果：

  3. type="password"：一个密码输入框。用户的输入会被遮挡，字符通常显示星号“*”或点“·”。
    代码：<input name="password" type="password" />
    效果：

  4. type="radio"：单选框，表示一组选择之中，只能选中一项。单选框通常为一个小圆圈，选中时会被填充或突出显示。
    代码：<input name="gender" type="radio" />男
          <input name="gender" type="radio" />女
    效果： 男 女

  5. type="checkbox"：复选框，允许选择或取消选择该选项。
    代码：
    <input name="hobby" type="checkbox" />网球
    <input name="hobby" type="checkbox" />篮球
    <input name="hobby" type="checkbox" />乒乓球
    <input name="hobby" type="checkbox" />游泳
    效果：
    网球 篮球 乒乓球 游泳

  6. type="file"：一个文件选择框，常用于文件上传功能。默认只能选择一个文件，添加multiple属性后允许选择多个文件。
    代码： <input name="file" type="file" />
          <input name="files" type="file" multiple />
    效果：
           

  7. type="submit"：表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。如果不指定value属性，浏览器会在提交按钮上显示默认的文字，通常是“提交”。
    代码：<input type="submit" value="保存并提交" />
    效果：
    注意：form里面放一个type="submit"才能触发 submit 事件。

5.2 input标签的事件

  1. onchange--监控input内容是否改变。
  2. onfocus--监控鼠标聚集。
  3. onblur--监控鼠标离开。

6.本地服务器-localhost

  1. http-server
    安装 yarn global add http-server
    运行 http-server . -c-1
    运行时命令的.可以不要，简写成http-server -c-1或者是hs -c-1，其中-c是缓存的意思，加上-1就是不要缓存的意思，其中.是可以省略的，不要进行双击打开页面，可以用http-server。
  2. parcel 安装 yarn global add parcel
           运行parcel a-href.html

7.学习感悟

各种标签的各种属性很多，不难理解，但是很难记住，多运用可能是唯一的途径。

avatar
文章
阅读
粉丝