html基础

最新推荐文章于 2024-04-30 19:47:54 发布

神奇小白

最新推荐文章于 2024-04-30 19:47:54 发布

阅读量289

点赞数

分类专栏： JavaScript 文章标签： html 前端

本文链接：https://blog.csdn.net/uotail/article/details/124676635

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章目录

上下标标签（sub、sup）

都是内联元素，默认没有任何样式

前端<sup><a style="text-decoration: none;" href="https://wwww.baidu.com" target="_blank">[1]</a></sup>
10<sup>5</sup>
Na<sup>+</sup>

<sub></sub>

span标签存在的意义

span标签通常使用来将文本的一部分或者文档的一部分独立出来，从而对独立出来的内容设置单独的样式。
span本身没有任何属性。span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。

列表

order list 有序列表
HTML <ol>元素表示有序列表，通常渲染为一个带编号的列表。

reversed
此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。

（数字倒序排序会出现负数）
start
一个整数值属性，指定了列表编号的起始值。
此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type 属性可能指定为了罗马数字编号等其他类型的编号。
比如说，想要让元素的编号从英文字母 “d” 或者罗马数字 “iv” 开始，都应当使用 start=“4”。

Note: 这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。
type
设置编号的类型：
a 表示小写英文字母编号 (当超出26个字母后应该怎么排序)
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号（默认）

<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

unorder list 无序列表

type
用于设置列表的着重号样式，被定义在 HTML3.2 和过渡版本 HTML 4.0/4.01 中的可用值有:
- circle
- disc
- square

<ul>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ul>

自定义标签

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>

表格

thead
tbody
tfoot

表格的加载顺序
https://stackoverflow.com/questions/18901950/thead-tfoot-and-tbody-order-in-html5

I was reading in a forum about <tfoot> element that it must come after <thead> element.
In contrast I saw some people use the order <thead><tbody><tfoot>. 
So what is the correct and best to follow order?

Before HTML5, <tfoot> had to come after <thead> and before <tbody>. 
With HTML5, <tfoot> can come before <tbody> or after it. 
But there must be only one <tfoot> child of a <table> element, and it must be after <thead>.

使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。
BODY是HTML的文本体，一个HTML文件，只有一个BODY，而在TABLE中可以有多个TBODY。

当打印表格时thead和tfoot会出现在每个打印页

默认的时候,可以不用写tbody,但要使用innerHTML 更改 Table 的内容的时候,必须指明 TBody

<table>
<tbody id="oTbody">
</tbody>
</table>

oTbody.innerHTML="<tr><td>呵呵</td></tr>";

当你使用了thead, tfoot 和 tbody元素，那么你就必须使用它们每一个元素，
它们出现的次序也应该是这样：<thead>, <tfoot> 和 <tbody>，
只有这样浏览器才能在接收所有数据前先得到脚标的信息。
还有一点你必须在table元素内使用它们

frameset、frame

是一个用于包含 frame 的 HTML 元素。
已废弃
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

<frameset cols="50%,50%">
  <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
  <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
  <noframes>
        <body>浏览器太low</body>
  </noframes>
</frameset>

注意: 现在不鼓励使用 frame，而是用iframe。现今的网站一般都不使用 frame。
- 增加http请求
- frame中是独立的网页，js无法跨网页操作
- 对搜索引擎不友好，查看网页源码frame中的内容不会获取
- frameset不能和body共存

iframe

HTML内联框架元素 (iframe) 表示嵌套的browsing context。
它能够将另一个HTML页面嵌入到当前页面中。

可以用body共存（或者其他页面结构共存）

<!DOCTYPE html>
<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>Document</title>
</head>
<body>
    <p>
        <a href="http://www.jd.com" target="mainFrame">京东</a>
        <a href="http://www.jd.com" target="mainFrame">淘宝</a>
        <a href="http://www.jd.com" target="mainFrame">当当</a>
    </p>
    <iframe width="100%" height="1000" src="http://wwww.baidu.com" name="mainFrame"></iframe>
<!-- <iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe> -->

<!-- file:///C:/Users/whale/Desktop/nodejs/vuepress-whaleluo/docs/guide/test.html -->
</body>
</html>

表单

label

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>

将一个 label和一个 input 元素相关联主要有这些优点：
1. 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。
  这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
2. 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。
将一个 label 和一个 input 元素匹配在一起，你需要给 input 一个 id 属性。而 label 需要一个 for 属性，其值和 input的 id 一样。
另外，你也可以将 input 直接放在 label里，此时则不需要 for 和 id 属性，因为关联已隐含存在：

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

md5

MD5加密算法

Message-Digest-Algorithm 信息摘要算法第五代。属于Hash算法一代，是一种单向加密算法，可以将输入的信息加密转换为128位固定长度的散列值，用于检验数据传输过程中的完整性。

功能：

输入任意长度的信息，经过处理，输出都是128位的信息值
不同的输入对应的输出一定不同，保证唯一性

争议：

MD5属不属于加密算法，因为只可以加密，无法获得密码原文，只能属于算法。
另一种观点，正因为看不到原文，使得原文得到加密处理。
个人观点：对于公司的用户，采用MD5是可以放心的，第一，对于黑色截获MD5后很难破解。第二，对于商家内部，只能获得*用户加密后的密文，无法看到用户的真实密码，这也是对用户信息的一定保护。

MD5的优势：

防止被篡改，在传输过程中一旦被串改，那么计算出的MD5值一定不同。
计算速度快。加密速度快，不需要秘钥。
检查文件的完整性，一旦文件被更改，MD5值也是不同的。
防止看到明文，公司存放密码存放的是MD5值。
防止抵赖，用于数字签名，一旦用户的文件被第三方MD5加密，若以后A说这个文件不是他写的，那么当用文件MD5后获得的签名一致，可以确认。

MD5的缺点:

作为一种散列算法，虽然很难发生散列碰撞，但是经过证实，仍然存在两种不同数据会发生碰撞。
MD5的安全性：
将用户的密码直接MD5后存储在数据库是不安全的。
第一，用户普遍习惯用容易记忆的密码，生日，手机号等，黑客容易破译此类密码。这也是加盐值的一个原因。
第二，直接MD5存入数据库，若数据库被破解，通过MD5反查会查到密码，需要随机盐值的配合。
考虑到多数人所使用的密码为常见的组合，攻击者可以将所有密码的常见组合进行单向哈希，得到一个摘要组合，然后与数据库中的摘要进行比对即可获得对应的密码。这个摘要组合也被称为rainbow table。

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不可以换行也不可以空格
textarea没有value属性
如何获取textarea内的属性值

placeholder

placeholder在每个浏览器显示效果不一样，建议自定义

fieldset legend

这两个都是块级元素

<form>
<fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
</fieldset>
</form>

这个元素有几个属性，最值得注意的是 form，其可以包含同一页面的 form 元素的 id，以使 fieldset 成为这个 form的一部分，即使 fieldset 不在其内

内联元素
span/strong/em/del/ins/label/a/sub/sup
块级元素
div/hx/p/address/ul/ol/li/dl/dt/dd/table/form/fieldset/legend
内联块级元素
input/img/select/textarea/iframe

HTML5 新元素
https://www.runoob.com/html/html5-new-element.html

神奇小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础

文章目录上下标标签（sub、sup）span标签存在的意义列表表格frameset、frameiframe表单labelmd5textareaplaceholderfieldset legend上下标标签（sub、sup）都是内联元素，默认没有任何样式前端<sup><a style="text-decoration: none;" href="https://wwww.baidu.com" target="_blank">[1]</a></sup>10
复制链接

扫一扫