html5

基础结构

html 复制代码
<!--声明为html5-->
<!DOCTYPE html>
<html>
<head>
    <!--设置编码方式-->
    <meta charset="UTF-8">
    <!--移动端设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>base</title>
    <!--引入外部资源-->
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/main.js"></script>
</head>
<body>
<!--内容区-->
<form></form>
<!--脚本区-->
<script></script>
</body>
</html>

块级标签:独占一行

html 复制代码
<div>div</div>
<p>段落一</p>
<h1>一级标题</h1>
<h6>六级标题</h6>
<ol>有序列表
    <li>项目一</li>
    <li>项目二</li>
</ol>
<ul>无序列表
    <li>项目一</li>
    <li>项目二</li>
</ul>
<dl>自定义列表
    <dt>列表一</dt>
    <dd>dd1</dd>
    <dd>dd2</dd>
    <dt>列表二</dt>
    <dd>dd3</dd>
    <dd>dd4</dd>
</dl>

行内标签:不能独占一行,不能设置宽高属性

html 复制代码
<a href="http://www.baidu.com">百度</a>
<span>span1</span>
<strong>strong1</strong>

行内块级标签:不能独占一行,可以设置宽高属性

html 复制代码
<br/>
<imgsrc="../img/demo.jpg" height="108" width="192"/>
<input>

块级标签与行内标签转换

html 复制代码
<div style="display: inline">块级转行内</div>
<span style="display: block">行内转块级</span>

表单标签

html 复制代码
<form action="" method="post"/>
    <input type="password"/>
    <input type="submit"/>
    <input type="button"/>
    <input type="date"/>
    <input type="reset"/>
    <input type="checkbox"/>
    <input type="radio"/>
    <select>
        <option></option>
    </select>
</form>

新表单标签

html 复制代码
<form id="form2">
	<input type="email"/>
	<input type="url"/>
	<input type="number" value="0" step="10"/>
	<input type="range"/>
	<input type="datetime-local"/>
	<input type="search"/>
	<input type="color"/>
	<input type="text" placeholder="姓名"/>
	<input type="submit" form="form2"></button>
</form>

表格标签

html 复制代码
<table border="1px" cellspacing="0px" cellpadding="10px">
    <tr>
        <td>td1</td>
        <td>td2</td>
    </tr>
    <tr>
        <td colspan="2">td3</td>
    </tr>
</table>

多媒体标签

html 复制代码
<!--音频-->
<audio controls>
	<source src="../static/demo.mp4">
</audio>
<!--视频-->
<video muted controls style="width: 500px;height: 300px;">
	<source src="../static/demo.mp4">
</video>
相关推荐
tryCbest1 天前
Html5实现弹出表单
html5
xhload3d2 天前
智慧钢厂高炉冶炼仿真分析 | 图扑数字孪生
3d·智慧城市·html5·webgl·数字孪生·可视化·热力图·智慧工厂·工业互联网·工业组态·高炉炼铁·数字工厂·高炉炉体·智慧高炉·高炉
繁花与尘埃3 天前
HTML5简介与基本骨架(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
笔记·学习·html5
无尽夏_4 天前
HTML5(前端基础)
前端·html·html5
2501_915909065 天前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
java水泥工5 天前
基于Echarts+HTML5可视化数据大屏展示-车辆综合管控平台
前端·echarts·html5·大屏模版
cooldream20097 天前
深度解析中秋节HTML5动画的实现
前端·html·html5
皮蛋瘦肉粥_1218 天前
pink老师html5+css3day06
前端·css3·html5
庵中十三居士10 天前
在线音频三选一强制选择测试(3-AFC)
html5
知识分享小能手11 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台