介绍:没有任何含义,主要用于 div 进行模块布局
类型:块级元素 block,盒子占用宽度为一整行
属性:没有属性
<div>我是模块</div>
介绍:没有任何含义,主要用于展示文本内容
类型:内联元素 inline,盒子占用宽度根据内容决定
属性:没有属性
<span>我是内容</span>
介绍:默认自带了 margin 样式,主要用于展示一段内容
类型:块级元素 block,独占一行
属性:没有属性
<p>我是第一行内容</p> <p>我是第二行内容</p>
介绍:单标签、主要用于展示图片
类型:内联元素 inline,占用位置根据图片宽度决定
属性:
<img src="https://noxussj.top/head.png" alt="加载失败" width="100px" height="100px" />
介绍:默认自带了 margin 和 font 样式,主要用于展示不同级别标题
类型:块级元素 block,盒子占用宽度为一整行
属性:没有属性
<h1>我是标题1</h1> <h2>我是标题2</h2> <h3>我是标题3</h3> <h4>我是标题4</h4> <h5>我是标题5</h5> <h6>我是标题6</h6>
介绍:默认自带了 font 样式,主要用于展示超链接文字
类型:内联元素 inline,盒子占用宽度根据内容决定
属性:
<a href="http://www.baidu.com" target="_blank">点我跳转</a>
介绍:一般需要结合 thead、tbody、tr、th、td 标签进行使用,主要用于展示表格
类型:表格元素 table,盒子占用宽度为一整行
属性:
子元素:
<table border="1" cellspacing="0" cellpadding="0" width="auto"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>xiaoming</td> <td>12</td> <td>男</td> </tr> <tr> <td>anqila</td> <td>16</td> <td>女</td> </tr> </tbody> </table>
介绍:ul 默认自带了 margin、padding 样式,一般需要结合 li 使用,主要用于展示没有序号的列表
类型:块级元素 block,盒子占用宽度为一整行
属性:没有属性
<ul> <li>xiaoming</li> <li>libai</li> <li>anqila</li> </ul>
介绍:ol 默认自带了 margin、padding 样式,一般需要结合 li 使用,主要用于展示有序号的列表
类型:块级元素 block,盒子占用宽度为一整行
属性:没有属性
<ol> <li>xiaoming</li> <li>libai</li> <li>anqila</li> </ol>
介绍:单标签、默认自带了 margin、width 样式,主要用于展示输入框
类型:行内块级元素 inline-block,盒子占用宽度根据内容决定
属性:
<p> <input type="text" placeholder="请输入内容" /> </p> <p> <input type="password" placeholder="请输入密码" /> </p> <p> <span>男<input type="radio" name="gender" value="1" /></span> <span>女<input type="radio" name="gender" value="2" /></span> </p> <p> <span>男<input type="checkbox" name="gender" value="1" /></span> <span>女<input type="checkbox" name="gender" value="2" /></span> </p> <p> <input type="button" value="我是按钮" /> </p> <p> <input type="file" /> </p>
介绍:默认自带了 padding、border、width 样式,主要用于展示多行文本输入框
类型:行内块级元素 inline-block,盒子占用宽度根据内容决定
属性:
<textarea cols="30" rows="2" placeholder="请输入内容"></textarea>
介绍:默认自带了 padding、border 样式,主要用于展示按钮
类型:行内块级元素 inline-block,盒子占用宽度根据内容决定
属性:没有属性
<button>我是按钮</button>
介绍:默认自带了 border 样式,一般需要结合 option 使用,主要用于展示下拉框
类型:行内块级元素 inline-block,盒子占用宽度根据内容决定
属性:
<select> <option label="xiaoming" value="a"></option> <option label="libai" value="b"></option> <option label="anqila" value="c"></option> </select>
在 HTML5 中提供了 canvasAPI ,允许在 canvas 画布上绘制图形
ie6、7、8 不兼容
<canvas width="300" height="300" id="myCanvas"></canvas> <script> var canvas = document.getElementById('myCanvas') var context = canvas.getContext('2d') context.moveTo(0, 0) // 绘制第一个点,坐标是(0, 0) context.lineTo(300, 300) // 绘制第二个点,然后连线,坐标是(300, 300) context.lineWidth = 5 // 线条宽度 context.strokeStyle = '#058' // 线条颜色 context.stroke() // 开始绘制 </script>
介绍:默认自带了 width、height 样式,一般需要结合 path 使用,主要用于展示矢量图形
类型:内联元素 inline,占用位置根据矢量图形宽度决定
属性:
<svg viewBox="0 0 1024 1024" width="200" height="200"> <path d="M768 768a32 32 0 0 1 0 64H256a32 32 0 0 1 0-64h512zM512 192a32 32 0 0 1 32 32v345.504l128.64-128.608a32 32 0 0 1 42.496-2.496l2.784 2.496a32 32 0 0 1 2.496 42.464l-2.496 2.784-181.024 181.024a32 32 0 0 1-42.464 2.496l-2.784-2.496-181.024-181.024a32 32 0 0 1 42.464-47.744l2.784 2.496L480 565.024V224a32 32 0 0 1 32-32z" ></path> </svg>
介绍:主要用于展示音频播放器
属性:
<audio src="https://noxussj.top/huxiyouhai.mp3" controls></audio>
介绍:主要用于展示视频播放器
属性:
<video src="https://noxussj.top/oceans.mp4" controls></video>
原文链接:https://note.noxussj.top/part1/html5/tag.html?s=im