HTML study note

18 Jul 2020

5 min read

html 基本元素

超链接

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

新建窗口进入

<a href="www.augists.top" target="_blank">augists.top</a>

_blank 新窗口
_self 本地刷新（默认）

augists.top

粗体

<b>augists.top</b>

augists.top

斜体

<em>augists.top</em>

augists.top

下划线

<u>augists.top</u>

不再支持

augists.top

删除线

<s>augists.top</s>

~~augists.top~~

html 表格元素

<table>
  <tr>
    <td>网站域名</td>
    <td>augists.top</td>
  </tr>
</table>

边框

<table border="1px">
  <tr>
    <td>网站域名</td>
    <td>augists.top</td>
  </tr>
</table>

不建议使用

居中

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

不建议使用

多行表格

<table border="1px">
  <tr>
    <td>网站域名1</td>
    <td>augists.top</td>
  </tr>
  <tr>
    <td>网站域名2</td>
    <td>augists.网址</td>
  </tr>
</table>

表格首行

<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>

表头表身表脚

<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.网址
名称	域名

合并单元格

<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	aaaa

html5 列表元素

有序列表

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

降序

<ol reversed>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ol>

html5 新

样式

<ol type="A">
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ol>

A
1 默认
a
I
i

多级有序列表

<ol>
  <li>网址</li>
  <ol type="a">
    <li>www.augists.top</li>
    <li>www.augists.网址</li>
  </ol>
</ol>

网址

www.augists.top
www.augists.网址

无序列表

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

html5 表单元素

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

<form>
  <input>
</form>

type text

<form>
  <input type="text">
</form>

单行文本框

value

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

默认填充

placeholder

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

占位，不占文本框内的

maxlength

<form>
  <input type="text" maxlength="8">
</form>

size

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

文本框拓宽

readonly

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

只能复制

type password

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

textarea

<form>
  <textarea>
    augists.top
  </textarea>
</form>

多行文本框内容相当于 value

rows

<form>
  <textarea rows="5">
    augists.top
  </textarea>
</form>

增加文本框的行数

type button

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

<form>
  <button>按钮</button>
</form>

与 js 相关，作为绑定事件

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

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

type range

<form>
  <input type="range">
</form>

max min

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

默认 min 为 0

step

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

value

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

type number

<form>
  <input type="number">
</form>

min max value

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

type checkbox

<form>
  <input type="checkbox">选择
</form>

type radio

<form>
  <input type="radio">选择
</form>

选中不能取消

name

<form>
  <input type="radio" name="a">augists.top
  <input type="radio" name="a">augists.top
  <input type="radio" name="a">augists.top
</form>

三选一

check

<form>
  <input type="radio" name="a" checked>augists.top
  <input type="radio" name="a">augists.top
  <input type="radio" name="a">augists.top
</form>

select

<form>
  <select>
    <option>augists.top</option>
    <option>augists.top</option>
    <option>augists.top</option>
    <option>augists.top</option>
  </select>
</form>

列表选择

datalist

<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

<form>
  <input type="email">
  <input type="tel">
  <input type="url">
</form>

type date

<form>
  <input type="date">
</form>

type color

<form>
  <input type="color">
</form>

type search

<form>
  <input type="search">
</form>

type hidden

<form>
  <input type="hidden" value="123">
</form>

type image

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

type file

<form>
  <input type="file">
</form>

multiple 一次允许上传一个文件
required 必须上传一个文件默认

img

<img src="img.png">

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

alt

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

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

分区响应图

rect

<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

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

嵌入视频

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

controls

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

preload

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

auto 自动载入
none 不载入
metadata 载入第一帧

loop

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

poster

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

视频载入是显示的图片

mute

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

source

<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>

嵌入音频

<audio></audio>

基本同 video

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