Live Note

Remain optimistic

Posted on Edited on In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form action="">
  <!--placeholder: 输入框提示信息-->
  <!--autocomplete: 自动保存用户输入过的值，默认为on-->
  <!--pattern: 正则验证-->
  <input
    type="text"
    placeholder="请输入6-8个数字"
    pattern="\d{6,8}"
    name="user"
    autocomplete="off"
    id=""
  />
  <!--formaction: 定义提交地址-->
  <input type="submit" value="提交" formaction="http://www.baidu.com" />
</form>

<form action="">
  <!--autofocus: 自动焦点-->
  <!--required: 必填项-->
  <input type="text" name="username" id="" autofocus required />
  <input type="password" name="" id="" required />
</form>

<!--datalist选项列表，与input元素配合使用，定义input的可能值-->
<input type="text" list="varList" />
<datalist id="varList">
  <option value="javascript">javascript</option>
  <option value="html">html</option>
  <option value="css">css</option>
</datalist>
Read more »

Posted on Edited on In

HTML 框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  #box {
    width: 300px;
    height: 300px;
    background-color: #ddd;
  }
  #child {
    width: 200px;
    height: 100px;
    background-color: orange;
  }
</style>
<div id="box">
  <div id="child">target</div>
</div>
Read more »

Posted on Edited on In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!--语义化标签-->
<header>页面的头部</header>
<hgroup>
  <h1>Test</h1>
  <h2>test</h2>
</hgroup>
<footer>页面的底部</footer>
<nav>
  <a href="#">导航</a>
  <a href="#">link1</a>
  <a href="#">link2</a>
</nav>
<section>用来划分区域</section>
<article>用来在页面中表示一套结构完整且独立的内容部分（主题）</article>
<aside>和主题相关的附属信息</aside>

<figure>用于对元素进行组合，一般用于图片或视屏</figure>
<figure>
  <img src="" alt="" />
  <figcaption>Test</figcaption>
</figure>

<time>9:00</time>

<p>
  明天
  <time datatime="2018-02-14">情人节</time>
</p>

<!--用于描述文档或文档某个部分的细节-->
<details open>
  <!--open时默认打开-->
  <summary>test</summary>
  <!--details元素的标题-->
  <p>testjfkdsjkfsjd</p>
</details>

<!--定义一段对话-->
<dialog>
  <dt>老师</dt>
  <dd>2 + 3 ?</dd>
  <dt>学生</dt>
  <dd>5</dd>
</dialog>

<address>定义文章或页面作者的详细联系信息</address>

<mark>需要标记的词或句子</mark>

<!--keygen给表单添加一个公钥-->
<form action="http://www.baidu.com" method="get">
  用户：
  <input type="text" name="usr_name" /> 公钥：
  <keygen name="security" />
  <input type="submit" />
</form>

<!--定义进度条-->
<progress max="100" value="76">
  <span>76</span>%
  <!--为了兼容-->
</progress>

Posted on Edited on In

validity 对象

通过 validity 对象，通过下面的 valid 可以查看验证是否通过，如果八种验证都通过返回 true，有一种失败则返回 false

  • oText.addEventListener(‘invalid’, fn, false);
  • ev.preventDefault()
  • valueMissing: 输入值为空时
  • typeMismatch: 控件值与预期类型不匹配
  • patterMismatch: 输入值不满足 pattern 正则
  • tooLong: 超过 maxLength 最大限制
  • rangeUnderflow: 验证的 range 最小值
  • rangeOverflow: 验证的 range 最大值
  • setMismatch: 验证 range 的当前值是否符合 min、max、step 的规则
  • customError: 不符合自定义验证–setCustomValidity()设置自定义验证
Read more »

Posted on Edited on In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
  .container {
    width: 200px; /* 固定宽度，触发溢出 */
    overflow: hidden; /* 隐藏溢出内容 */
    white-space: nowrap; /* 禁止换行 */
  }

  .text {
    display: inline-block;
    width: 100%; /* 占满容器 */
    direction: rtl; /* 文本方向从右到左 */
    text-overflow: ellipsis; /* 显示省略号 */
    overflow: hidden;
    text-align: left; /* 强制左对齐，保持视觉上的正常阅读方向 */
  }
</style>
<div class="container">
  <span class="text">短文本不会被省略</span>
</div>

<div class="container">
  <span class="text">这是一段很长的文本，左侧会被省略</span>
</div>