HTML基础学习大全

HTML

VSCode常用快捷键列表

1. 代码格式化：Shift+Alt+F

2. 向上或向下移动一行：Alt+Up 或 Alt+Down

3. 快速复制一行代码：Shift+Alt+Up 或 Shift+Alt+Down

4. 快速保存：Ctrl + S

5. 快速查找：Ctrl + F

6. 快速替换：Ctrl + H

HTML5常见标签

标题、换行、水平线

<p>  
<br>
<hr>

图片、路径（绝对&相对）

<img src="" alt="" title="" width="" height="">

超文本链接、超链接之锚点

<a href="">

文本标签

<em> 定义着重文字
<b> 定义粗体文本
<i> 定义斜体字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<del> 定义删除字
<span> 元素没有特定的含义

列表:（type属性可设置排序方法）

//有序列表 
<ol type="">
      <li></li>
</ol>
//无序列表
 <ul>
      <li></li>
 </ul>
//自定义列表
 <dl>
      <dt>
        <dd></dd>
      </dt>
 </dl>

表格

<table>
    <tr>
      <td></td>
    </tr>
</table>

表格名字：<caption>、表格头部：<thead>、特殊单元格：<th>、表格的身体：<tbody>、表格的脚部：<tfoot>

表格属性：

单元格合并属性：

水平合并：colspan 垂直合并：rowspan

 

表单

  <form action="服务器地址" method="数据提交方式：get|post" name="表单名称">
  </form> 

表单元素：

文本框

<form>
  name: <input type="text" name="firstname">
</form>

密码框

<form>
   Password: <input type="password" name="pwd">
</form>

单选按钮

<form>
  <input type="radio" name="sex" value="male">Male
  <br>
  <input type="radio" name="sex" value="female">Female
</form>

复选框

<form>
  <input type="checkbox" name="vehicle" value="Bike"> bike
  <br>
  <input type="checkbox" name="vehicle" value="Car">car
</form>

文件

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

 

提交按钮

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
  <input type="reset">
</form> 

重置按钮

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
  <input type="reset">
</form>

普通按钮

<form name="input" action="url" method="get">
  <input type="button" value="点我"/>
  <button>点我</button>
</form>

图像图片按钮

<form name="input" action="url" method="get">
  <input type="image" src="close.jpg" />
</form>

下拉列表

<form name="input" action="url" method="get">
  <select>
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
</form>

多行文本

<form name="input" action="url" method="get">
  <textarea rows="10" cols="30">我是一个文本框</textarea>
</form>

label(for属性应当与相关元素的id属性相同)

<form action="">
      <label for="username">用户名：</label>
      <input type="text" name="" id="username">
</form>

HTML5新增type类型

email

定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）

<form>
   E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>

url

定义用于输入 URL 的字段

<form>
  <input type="url" name="homepage">
  <input type="submit">
</form>

search

定义搜索字段（比如站内搜索或谷歌搜索等）

<form>
  <input type="radio" name="sex" value="male">Male
  <br>
  <input type="radio" name="sex" value="female">Female
</form>

tel

定义用于输入电话号码的字段

<form>
   电话号码: <input type="tel" name="usrtel">
  <input type="submit">
</form>

color

从拾色器中选取颜色

<form>
   选择你喜欢的颜色: <input type="color" name="favcolor">
  <input type="submit">
</form>

number

定义用于输入数字的字段（您可以设置可接受数字的限制）

<form>
   数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

range

定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制

<form>
  <input type="range" name="points" min="1" max="10">
  <input type="submit">
</form>

请使用下面的属性来规定限制：

max : 规定允许的最大值。

min : 规定允许的最小值。

step : 规定合法数字间隔。

value : 规定默认值。

date

定义 date 控件

<form>
   生日: <input type="date" name="bday">
  <input type="submit">
</form>

month

定义 month 和 year 控件（不带时区）

<form>
   生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

week

定义 week 和 year 控件（不带时区

<form>
   选择周: <input type="week" name="week_year">
  <input type="submit">
</form>

HTML5新增属性

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

<form>
   User name: <input type="text" name="user_name" autofocus />
  <input type="submit">
</form>

温馨提示

autofocus 属性适用于所有 <input>标签的类型

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值

<form>
   User name: <input type="text" name="user_name" autofocus />
  <input type="submit">
</form>

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）

<form>
   Name: <input type="text" name="usr_name" required />
  <input type="submit">
</form>

实体字符

内联元素和块级元素的区别：

块级元素	内联元素
块元素会在页面中独占一行（自上向下垂直排列）	行内元素不会独占页面中的一行，只占自身的大小
可以设置width，height属性	行内元素设置width，height属性无效
⼀般块级元素可以包含行内元素和其他块级元素	⼀般内联元素包含内联元素不包含块级元素

常见块级元素

div、form、h1~h6、hr、p、table、ul、等

常见内联元素

a、b、em、i、span、strong等

行内块级元素（特点：不换行、能够识别宽高）

button、img、input等

H5新标签

<header></header> 头部
<nav></nav> 导航
<section></section>定义文档中的节,比如章节、页眉、页脚
<aside></aside> 侧边栏
<footer></footer> 脚部
<article></article> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

视频

Video标签定义视频，比如电影片段或其他视频流

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

属性	描述
src	要播放的视频的URL
autoplay	自动播放
controls	显示控件,比如播放按钮
loop	循环播放
muted	输出被静音
preload	页面加载的时候,自动预加载资源
height	设置播放器高度
width	设置播放器宽度
poster	视频封面

音频

Audio 标签定义声音，比如音乐或其他音频流

<audio src="someaudio.mp3">
</audio>

属性	描述
src	要播放的音频的URL
autoplay	自动播放
controls	显示控件,比如播放按钮
loop	循环播放
muted	输出被静音
preload	页面加载的时候,自动预加载资源

source

<source>标签为媒介元素（比如 <video>和 <audio>）定义媒介资源。

<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择

<audio controls>
   <source src="horse.ogg" >
   <source src="horse.mp3" >
    Your browser does not support the audio element.
</audio>

figure

用于对元素进行组合。多用于图片与图片描述组合

<figure>
    <img src="img.gif" alt="figure标签" title="figure标签" />
    <figcaption>figure的标题</figcaption>
</figure>

details

<details>
   <summary>指定的标题，用户点击标题时展示下面的所有内容，内容可以是任何形式的内容</summary>
   <div>
     <p>内容描述</p>
   </div>
</details>
<!-- 当增设open属性时，描述内容默认展示 -->
<details open>
   <summary>指定的标题，用户点击标题时展示下面的所有内容，内容可以是任何形式的内容</summary>
   <div>
     <p>内容描述</p>
   </div>
</details>

mark

主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词

<p>你是<mark>大长腿</mark>吗？</p>

meter

定义度量衡。仅用于已知最大和最小值的度量

<meter min="0" max="100" value="81" low="20" high="80"></meter>

low:最低临界点

high：最高临界点

Min：最小值

Max：最大值

Value：当前值

progress

运行中的进程。可以使用 <progress>标签来显示 JavaScript中耗费时间的函数的进程

<progress max="100" value="20"></progress>

max：定义完成值

value：定义当前值

datalist

定义可选数据的列表。与 input元素配合使用，就可以制作出输入值的下拉列表。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list属性来绑定 datalist

<input id="myCar" list="cars" />
<datalist id="cars">
   <option value="BMW">
   <option value="Ford">
   <option value="Volvo">
</datalist>

canvas

定义图形，比如图表和其他图像