简介
HTML称为超文本标记语言,是一种标识性的语言。HTML5是构建Web内容的一种语言描述方式。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。
学习
标签速查宝典
这里推荐小甲鱼的网站:https://man.ilovefishc.com/html5/
案例
案例一(入门)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_blank">
<meta name="keywords" content="html5,案例,web开发">
<meta name="description" content="一个案例">
<meta name="author" content="Alex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>HTML学习</title>
</head>
<body>
<h1>学习使我快乐</h1>
<h2>学习使我快乐</h2>
<p>总所周知,b站是用来学习的:<a href="https://www.bilibili.com">bilibili</a></p>
<img alt="学习快乐图" width="300px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585765619223&di=6ed5ae7309e44314317a267fcce564ec&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F546dc4336c7dcc5b47e6c76557c8afbf2f5bddf110638-B08wbu_fw658">
</body>
</html>
效果展示
涉及标签
!DOCTYPE html head body base meta title h1 p img a
案例二(列表和表格)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表、表格、表单</title>
</head>
<body>
<h2>列表</h2>
<dl>
<dt>学习流程</dt>
<dd>web前端开发的学习流程</dd>
<ol type="I">
<li>HTML5</li>
<li>css3</li>
<li>JavaScript</li>
</ol>
</dl>
<h2>表格</h2>
<table border="1">
<caption style="font-size: 20px; color:rgb(185, 73, 21);">宝可梦</caption>
<colgroup>
<col style="background-color:cyan ;">
<col style="background-color:blueviolet;">
</colgroup>
<tr>
<th>姓名</th>
<th>图片</th>
</tr>
<tr>
<td>皮卡丘</td>
<td><img src="http://zkres1.myzaker.com/201811/5beabb2f77ac6433f91de8ab_640.jpg" alt="皮卡丘的照片" width="120px"></td>
</tr>
<tr>
<td>可达鸭</td>
<td><img src="http://5b0988e595225.cdn.sohucs.com/images/20181114/76ba6479ea5b4cd79ea8eec0ecde84d3.jpeg" alt="可达鸭的照片" width="120px"></td>
</tr>
<tr>
<td>杰尼龟</td>
<td><img src="http://pic.rmb.bdstatic.com/b23f799d32a6cad093f7383f5d54336c.jpeg@s_2,w_272,h_272,q_80" alt="杰尼龟的照片" width="120px"></td>
</tr>
<tr>
<td>妙蛙种子</td>
<td><img src="http://img1.gamedog.cn/2015/10/18/327-15101Q245510.jpg" alt="妙蛙种子的照片" width="120px"></td>
</tr>
</table>
</body>
</html>
效果展示
涉及标签
dl dt dd ol ul li table caption colgroup col th th td
案例三(表单)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<h2>表单</h2>
<form>
<fieldset>
<legend>基本信息</legend>
姓名:<input autocomplete="on" autofocus type="text"><hr>
性别:<input autocomplete="on" type="radio" name="性别" id="man"><label for="man">男</label>
<input autocomplete="on" type="radio" name="性别" id="woman"><label for="woman">女</label><hr>
出生日期:<input autocomplete="on" type="date"><hr>
电话:<input autocomplete="on" type="tel"><hr>
个人网站:<input autocomplete="on" type="url"><hr>
</fieldset>
<br>
<fieldset>
<legend>个人喜好</legend>
最喜欢的颜色:<input autocomplete="on" type="color"><hr>
幸运数字:<input autocomplete="on" type="number"><hr>
喜欢的水果:<input type="checkbox" name="fruit" value="watermelon">西瓜
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="blueberry">蓝莓<hr>
最喜欢的一句话:<input autocomplete="on" type="text" list="list">
<datalist id="list">
<option>Be honest rather clever.</option>
<option>Be swift to hear, slow to speak.</option>
<option>There is no such thing as a great talent without great will - power.</option>
<option>For man is man and master of his fate.</option>
</datalist>
</fieldset>
<br>
<button type="submit"><img alt="提交" width="100px" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1817689246,3962475274&fm=15&gp=0.jpg"></button>
</form>
</body>
</html>
效果展示
涉及标签
form fieldset legend input datalist option button