前端学习第二天——常用的html5标签

前端学习第二天——常用的html5标签

网页上支持的图片格式

---

格式	说明
.bmp	windows画图软件默认保存的格式，位图
.gif	支持动画（比如表情包）
.jpeg(jpg)	有损压缩图片，用于照片
.png	便携式网络图像，用于logo、背景图形等，支持透明和半透明
.svg	矢量图片
.webp	最新的压缩算法非常优秀的图片格式

---

超链接

<a>标签title属性用于设置鼠标移动到超链接上时所显示的文字
target="blank"用于设置超链接跳转时，打开新的网页而不是覆盖当前网页

锚点

较长的页面，可以适当的给h系列标签添加id属性，它讲成为较长的页面的锚点

<h1 id="dalian">大连</h1>
<!-- 使用下面锚点就可以跳转回页面 -->
<a href="#dalian">我要去大连</a>
<!-- 也可以在id前面加上网页名称如dalian.html#dalian -->
<a href="#top">返回顶部</a><!-- 这是HTML5的新特性不设置id="top"也可以返回顶部 -->

邮件链接

有matilto:前缀的链接是邮件链接，系统将自动打开email相关软件

<a href="mailto:1234@163.com">给我发邮件</a>

电话链接

有tel:前缀的链接是电话链接，系统将自动打开拨号盘

<a href="tel:123468">联系我</a>

音频

使用<audio>标签插入音频

<audio controls src="音频地址"> 抱歉您的浏览器不支持audio标签请升级</audio>
<!-- controls显示播放控件  浏览器不支持audio标签显示标签对里面的内容 -->

autoplay属性音频会自动播放
loop属性会循环播放

视频

<wideo>标签可以用于插入视频，属性同<audio>标签，可以设置视频的宽度和高度

区块标签

---

区块标签	说明
<section>	文档的区域，语义比div大
<article>	文档的核心文章内容，会被搜索引擎主要抓取
<aside>	文档的非必要相关内容，比如广告等
<nav>	导航条
<header>	页头
<main>	网页核心部分
<footer>	页脚

---

input 种类

---

type属性值	控件
text	单行文本框
radio	单选按钮
checkbox	复选框
password	密码框
button	普通按钮
reset	重置按钮
sumbit	提交按钮
color	颜色选择控件
date、time	日期、时间选择控件
email	电子邮件输入控件
file	文件选择控件
number	数字输入控件
range	拖拽条
search	搜索框
url	网址输入控件

---

<datalist>控件可以为输入框提供一些备选项，当用户输入的内容与备选内容相同时，将会显示智能感应

<input type="text" list="province-list">
<datalist id="province-list">
    <option value="辽宁">
    <option value="山东">
    <option value="吉林">
    <option value="黑龙江">
</datalist>

label标签

<label>标签用来将文字和单选按钮进行绑定，用户点击文字的时候也视为点击单选按钮

<label>
    <input type="radio" name="gender" id="man">男
</label>
<label>
    <input type="radio" name="gender" id="woman">女
</label>

在HTML4时代，label标签通过for属性和段暄按钮的id属性进行绑定

<input type="radio" name="gender" id="man">
<label for="man">男</label>

下拉菜单

<select> 标签表示下拉菜单，<option>是它的内部选项

请选择你最喜欢的编程语言：
<select>
    <option value="JavaScript">JavaScript</option>
    <option value="Java">Java</option>
    <option value="PHP">PHP</option>
    <option value="C++">C++</option>
</select>

多行文本

<textarea> 表示多行文本
rows和 cols属性，用于定义多行文本的行数和列数

<textarea cols="100" rows="10"></textarea>

表格

<table> 标签表格
<tr> table row 表格的行
<td> table data 表格的数据
<caption> 表格的标题，常作为<table>的第一个子元素出现
<th> 是“标题小格”，可以代替<td>的作用，表示标题小格
colspan 属性用来设置td或者th的列跨度
able data 表格的数据
<caption> 表格的标题，常作为<table>的第一个子元素出现
<th> 是“标题小格”，可以代替<td>的作用，表示标题小格
colspan 属性用来设置td或者th的列跨度
rowspan 属性用来设置td或者th的行跨度