HTML5 pink老师

「已注销」

已于 2022-02-09 18:46:52 修改

阅读量311

点赞数

文章标签： html5 html 前端

于 2022-02-09 14:16:33 首次发布

本文链接：https://blog.csdn.net/m0_51889436/article/details/122840957

版权

文档类型声明及标签

注释格式：

快捷键：ctrl + /

<!DOCTYPE html> <!--文档类型声明, 告诉浏览器使用HTML5来显示网页，它不是标签-->
<html lang="en"> <!--当前文档显示语言-->
<head>
    <meta charset="UTF-8">  <!--字符集，防止乱码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开始</title>
</head>
<body>
    
</body>
</html>

src 属性是必须的，它包含了你想嵌入的图片的文件路径。
alt 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。
使用 width、height 和 intrinsicsize设置原始分辨率 (en-US)：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。

<a>

超链接

<a href="https://www.baidu.com" target="_blank">我通向百度</a>

锚点链接：添加id，a链接连接id 前加上#

属性

href

包含超链接指向的 URL 或 URL 片段。

URL 片段是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML 元素的 ID）。URL 不限于基于 Web（HTTP）的文档，也可以使用浏览器支持的任何协议。例如，在大多数浏览器中正常工作的file:、ftp:和mailto：。

注意: 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。这种行为是 HTML5 的特性。

如果href里面地址是一个文件或者压缩包，会下载这个文件

target

该属性指定在何处显示链接的资源。取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:

_self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。
_blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
_parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同。
_top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self

<table>

各属性都已弃用，应使用CSS实现

<table>
    <thead> <!--表格头部-->
        <tr> <!--行-->
            <th colspan="2">The table header</th> <!--表头标签，居中加粗-->
        </tr>
    </thead>
    <tbody> <!--表格主体-->
        <tr>
            <td>The table body</td><!--单元格-->
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

合并单元格

跨行合并：rowspan=“合并单元格个数”
跨列合并：colspan=“合并单元格个数”

<ul>

无序列表

<ul>
    <li></li>
    <li></li>
</ul>

<ol>

有序列表

<ol>
    <li></li>
    <li></li>
</ol>

<dl>

自定义列表

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

<form>

表单域

<form action="" method="" name="">
    
</form>

属性

action

处理表单提交的 URL。

这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。

method

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

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

这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。

name

表单的名称。HTML 4中不推荐（应使用 id）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。

<input>

表单元素

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

可用的值包括：

Type	描述
button	没有默认行为的按钮，上面显示*`value`*属性的值，默认为空。
checkbox	复选框，可设为选中或未选中。
color	用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
date	输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
datetime-local	输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
email	编辑邮箱地址的区域。类似 `text` 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
file	让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。
hidden	不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
image	带图像的 `submit` 按钮。显示的图像由 `src` 属性规定。如果 src 缺失，alt 属性就会显示。
month	输入年和月的控件，没有时区。
number	用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
radio	单选按钮，允许在多个拥有相同 `name`值的选项中选中其中一个。
range	此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用htmlattrdefmin 和 htmlattrdefmax来规定值的范围。
reset	此按钮将表单的所有内容重置为默认值。不推荐。
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
submit	用于提交表单的按钮。
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
text	默认值。单行的文本区域，输入中的换行会被自动去除。
time	用于输入时间的控件，不包括时区。
url	用于输入 URL 的控件。类似 `text` 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。
week	用于输入以年和周数组成的日期，不带时区。

属性：

属性	相关的type	描述
value	所有	表单控件的值。以名字/值对的形式随表单一起提交
checked	radio, checkbox	用于控制控件是否被选中
maxlength	password, search, tel, text, url	value的最大长度(最多字符数目)

<label>

将一个 <label> 和一个<input>元素相关联主要有这些优点：

标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

<select>

下拉表单

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
<!--
	使用option属性 select="selected" 来确保默认值
-->

<textarea>

文本域标签，可以输入多行文本

<label for="story">Tell us your story:</label>

<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>

上述例子展示了 <textarea> 的几个特点：

为了提高可访问性（accessibility），用于将 <textarea>与一个 `` 关联的 id 属性。
name 属性，用于设置随表单一同提交到服务器的相关数据的名字。
rows 和 cols 属性，用于声明 <textarea> 的精确尺寸。这对于一致性非常有帮助，因为不同浏览器的默认值常常不一样。
位于开始标签和闭合标签之间的默认内容。<textarea> 不支持 value 属性。