vue

html标签

Posted by アライさん on 2022年03月31日

HTML基本结构

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
<!DOCTYPE html>
<!--
我是注释
-->
<html>
  
  <head>
    <!-- link、meta、title、style都应该在head中 -->
    <meta charset="UTF-8">
    <title>标题</title>
  </head>
  
  <body>

        main元素有助于搜索引擎和无障碍访问快速找到主要内容
    <main>
      <strong>粗体</strong>
      <u>下划线</u>
      <em>斜体</em>
      <s>删除线</s>
      
            分割线：
      <hr>
    </main>
    
  </body>
  
</html>

h1…h6标题标签

1
2
3
4
5
6
7
<!-- h1~h6的标签不应该跳级使用。如果字体太大，可以通过样式调整 -->
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>

p标签

1
2
3
<p>
  新一行段落
</p>

img图片

1
<img src="图片链接" alt="图片内容：图片无法访问时可展示，如果alt的内容为空字符串，那么当图片无法加载时不会显示，但依旧会占位">

a标签跳转

1
2
3
4
5
6
7
8
9
10
11
12
<p>
  之后的文本有超链接<a href="url地址">在当前窗口打开url</a>之前的文本有超链接
</p>
<a href="url地址" target="_blank">在新窗口打开url</a>

<a href="#">链接占位，js更改</a>  

<a href="#"><img src="图片地址" alt="图名"></a>

<a href="#tagId">点此文本跳转到tagId为id的标签</a>

<h2 id="tagId">网页会滚动到这里</h2>

ul ol 列表

1
2
3
4
5
6
7
8
<ul>
  <li>无序列表第一条</li>
  <li>无序列表第二条</li>
</ul>  
<ol>
  <li>有序列表第一条</li>
  <li>有序列表第二条</li>
</ol>

input输入框与form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form action="表单跳转地址">
  
  <!-- name value将会被提交，默认value为on。checked代表默认选中 -->
  <input id="radio1" value="hello" type="radio" name="radioGroupName" checked>
  <label for="radio1">单选按钮1</label>
  <input id="radio2" value="world" type="radio" name="radioGroupName">
  <label for="radio2">单选按钮2</label>
  <p></p>
  
  <!-- name value将会被提交，默认value为on。checked代表默认选中 -->
  <input id="checkbox1" value="ok" type="checkbox" name="checkboxGroupName" checked>
  <label for="checkbox1">复选按钮1</label>
  <input id="checkbox2" value="no" type="checkbox" name="checkboxGroupName">
  <label for="checkbox2">复选按钮2</label>
  
  <!-- required代表必填字段 -->
  <input type="text" placeholder="输入框hint文字" required>
  <button type="submit">提交按钮</button>
  
  <!-- 日期选择 -->
  <input type="date" id="pickdate" name="date">
</form>


div标签

1
2
3
4
5
<!-- tabindex的顺序，用于按tab切换焦点 -->
<div tabindex="1">
    <p>一段文字</p>
  <img src="图片链接">
</div>

audio标签

1
2
3
<audio id="meowClip" controls>
  <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg">
</audio>

其他标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
  
<!-- 这些HTML的新标签，都可以粗暴的使用div -->
  
<!-- 用于包裹导航 -->
<nav></nav>
<!-- 用于包裹标题 -->
<header></header>
<!-- 一段完整内容 -->
<article></article>  
<!-- 分组内容 -->
<section></section>  
<!-- 包裹底部版权信息、相关链接之类的 -->  
<footer></footer>
  
</body>

figure、figcaption

1
2
3
4
5
6
7
8
<!-- 一起展示可视化信息 -->
<figure>
  <img src="roundhouseDestruction.jpeg" alt="">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

fieldset、legend

1
2
3
4
5
6
7
8
9
10
<!-- fieldset一组内容，legend对该组内容的文字描述 -->
<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
  </fieldset>
</form>

time

1
2
<!-- 有辅助设备的，可以获取到time这个值，确定时间 -->
<p> tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>



Tags
vue