Augists-ZDCZ

LESS is MORE

0%

HTML Study Note

Posted on Edited on
HTML note in Summer Term

html 基本元素

超链接

1
<a href="www.augists.top">augists.top</a>

新建窗口进入

1
<a href="www.augists.top" target="_blank">augists.top</a>
  • _blank 新窗口
  • _self 本地刷新（默认）

augists.top

粗体

1
<b>augists.top</b>

augists.top

斜体

1
<em>augists.top</em>

augists.top

下划线

1
<u>augists.top</u>

不再支持

augists.top

删除线

1
<s>augists.top</s>

augists.top

html 表格元素

1
2
3
4
5
6
<table>
  <tr>
    <td>网站域名</td>
    <td>augists.top</td>
  </tr>
</table>

边框

1
2
3
4
5
6
<table border="1px">
  <tr>
    <td>网站域名</td>
    <td>augists.top</td>
  </tr>
</table>

不建议使用

居中

1
2
3
4
5
6
<table border="1px" align="center">
  <tr>
    <td>网站域名</td>
    <td>augists.top</td>
  </tr>
</table>

不建议使用

多行表格

1
2
3
4
5
6
7
8
9
10
<table border="1px">
  <tr>
    <td>网站域名1</td>
    <td>augists.top</td>
  </tr>
  <tr>
    <td>网站域名2</td>
    <td>augists.网址</td>
  </tr>
</table>

表格首行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1px">
  <tr>
    <th>名称</th>
    <th>域名</th>
  </tr>
  <tr>
    <td>个人博客</td>
    <td>augists.top</td>
  </tr>
  <tr>
    <td>其他域名</td>
    <td>augists.网址</td>
  </tr>
</table>

表头表身表脚

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table border="1px">
  <thead>
    <tr>
      <th>名称</th>
      <th>域名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>个人博客</td>
      <td>augists.top</td>
    </tr>
    <tr>
      <td>其他域名</td>
      <td>augists.网址</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>名称</td>
      <td>域名</td>
    </tr>
  </tfoot>
</table>
名称 域名
个人博客 augists.top
其他域名 augists.网址
名称 域名

合并单元格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table boder="1px">
  <tr>
    <th rowspan="2">aaaa</th>
    <th>aaaa</th>
    <th>aaaa</th>
    <th>aaaa</th>
  </tr>
  <tr>
    <td colspan="2">aaaa</td>
    <td>aaaa</td>
  </tr>
  <tr>
    <td>aaaa</td>
    <td>aaaa</td>
    <td>aaaa</td>
    <td>aaaa</td>
  </tr>
</table>
aaaa aaaa aaaa aaaa
aaaa aaaa
aaaa aaaa aaaa aaaa

html5 列表元素

有序列表

1
2
3
4
5
6
<ol>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ol>

降序

1
2
3
4
5
6
<ol reversed>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ol>

html5 新

样式

1
2
3
4
5
6
<ol type="A">
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ol>
  • A
  • 1 默认
  • a
  • I
  • i

多级有序列表

1
2
3
4
5
6
7
<ol>
  <li>网址</li>
  <ol type="a">
    <li>www.augists.top</li>
    <li>www.augists.网址</li>
  </ol>
</ol>
  1. 网址
    1. www.augists.top
    2. www.augists.网址

无序列表

1
2
3
4
5
6
7
<ul>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ul>

html5 表单元素

表单是 HTML 中获取用户输入的手段

1
2
3
<form>
  <input>
</form>

type text

1
2
3
<form>
  <input type="text">
</form>

单行文本框

value

1
2
3
<form>
  <input type="text" value="augists.top">
</form>

默认填充

placeholder

1
2
3
<form>
  <input type="text" placeholder="augists.top">
</form>

占位，不占文本框内的

maxlength

1
2
3
<form>
  <input type="text" maxlength="8">
</form>

size

1
2
3
<form>
  <input type="text" maxlength="8" size="8">
</form>

文本框拓宽

readonly

1
2
3
<form>
  <input type="text" value="augists.top" readonly>
</form>

只能复制

type password

1
2
3
<form>
  <input type="password" placeholder="密码">
</form>

textarea

1
2
3
4
5
<form>
  <textarea>
    augists.top
  </textarea>
</form>

多行文本框
内容相当于 value

rows

1
2
3
4
5
<form>
  <textarea rows="5">
    augists.top
  </textarea>
</form>

增加文本框的行数

type button

1
2
3
<form>
  <input type="button" value="按钮">
</form>
1
2
3
<form>
  <button>按钮</button>
</form>

与 js 相关，作为绑定事件

1
2
3
<form>
  <input type="submit" value="提交">
</form>

适用于提交表单，必须声明 form 里的 method 属性，涉及 PHP

type range

1
2
3
<form>
  <input type="range">
</form>

max min

1
2
3
<form>
  <input type="range" min="-100" max="100">
</form>

默认 min 为 0

step

1
2
3
<form>
  <input type="range" min="-100" max="100" step="100">
</form>

value

1
2
3
<form>
  <input type="range" min="-100" max="100" step="100" value="100">
</form>

type number

1
2
3
<form>
  <input type="number">
</form>

min max value

1
2
3
<form>
  <input type="number" min="-100" max="100" value="0">
</form>

type checkbox

1
2
3
<form>
  <input type="checkbox">选择
</form>
选择

type radio

1
2
3
<form>
  <input type="radio">选择
</form>

选中不能取消

选择

name

1
2
3
4
5
<form>
  <input type="radio" name="a">augists.top
  <input type="radio" name="a">augists.top
  <input type="radio" name="a">augists.top
</form>

三选一

check

1
2
3
4
5
<form>
  <input type="radio" name="a" checked>augists.top
  <input type="radio" name="a">augists.top
  <input type="radio" name="a">augists.top
</form>
augists.top augists.top augists.top

select

1
2
3
4
5
6
7
8
<form>
  <select>
    <option>augists.top</option>
    <option>augists.top</option>
    <option>augists.top</option>
    <option>augists.top</option>
  </select>
</form>

列表选择

datalist

1
2
3
4
5
6
7
8
<form>
  <input type="text" list="datalist1">
  <datalist id="datalist1">
    <option>augists.top</option>
    <option>augists.网址</option>
    <option>augists.zdcz</option>
  </datalist>
</form>

type email telephone url

1
2
3
4
5
<form>
  <input type="email">
  <input type="tel">
  <input type="url">
</form>

type date

1
2
3
<form>
  <input type="date">
</form>

type color

1
2
3
<form>
  <input type="color">
</form>
1
2
3
<form>
  <input type="search">
</form>

type hidden

1
2
3
<form>
  <input type="hidden" value="123">
</form>

type image

1
2
3
<form>
  <input type="image" src="augists.jpg">
</form>

type file

1
2
3
<form>
  <input type="file">
</form>
  • multiple 一次允许上传一个文件
  • required 必须上传一个文件 默认

img

1
<img src="img.png">

默认 width=”128”
默认自适应大小

alt

1
<img src="img.png" alt="augists.top">

设置图片的备用内容
当图片出问题的时候使用

分区响应图

rect

1
2
3
4
5
6
7
8
9
<img src="augists.jpg" usemap="#map1">

<map name="map1">
  <area href="augists.top" shape="rect" coods="38,62,175,200" target="_blank">
  <area>
  <area>
  <area>
  <area>
</map>

circle

1
2
3
4
<img src="augists.jpg" usemap="#map2">
<map name="map2">
  <area href="augists.top" shape="circle" coods="64,64,64" target="_blank">
</map>

嵌入视频

1
<video src="augists.mp4" height="500px" autoplay></video>

controls

1
<video src="augists.mp4" controls></video>

preload

1
<video src="augists.mp4" controls preload="auto"></video>
  • auto 自动载入
  • none 不载入
  • metadata 载入第一帧

loop

1
<video src="augists.mp4" controls preload="auto" loop></video>

poster

1
<video src="augists.mp4" controls preload="auto" loop poster="augists.jpg"></video>

视频载入是显示的图片

mute

1
<video src="augists.mp4" mute></video>

source

1
2
3
4
<video src="augists.mp4" controls preload="auto" loop poster="augists.jpg">
  <source src="augists.mp4" type="video/mp4">
  <source src="augists.ogv" type="video/ogg">
</video>

嵌入音频

1
<audio></audio>

基本同 video

视频来源
靠谱学院-星月-html

Welcome to my other publishing channels