HTML
一、HTML简介
1.定义
HyperText Markup Language，超文本标记语言。
HTML运行在浏览器上，由浏览器解析。
2.HTML基本结构
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
</body>
</html>
| 结构 | 说明 |
|---|---|
| !DOCTYPE html | 表示定义的文档类型是HTML5 |
| html | 表示HTML文档内容定义 |
| head | 表示文档头部信息，如标题，字符集编码，文档是否可缩放（ctrl网站缩放） |
| title | 定义标题 |
| body | 文档主体内容 |
| html lang=“en” | 设置语言为英文 |
二、HTML标签
1.标签分类
分为块级标签（block elements）和行级标签（inline-block elements）
标签可以理解为容器
2.块级标签
-
块级标签特征
- 总是在新行上开始
- 高度，行高以及外边距和内边距（边缘）都可控制
- 宽度缺省是它的容器的100%
- 可以容纳内联元素和其他块元素
-
标题标签
<!--可以用于加粗--> <h1>一级标题</h1> <h2>二级标题</h2> <!--...--> <h6>六级标题</h6> -
水平线
<hr> <hr /> -
段落标签
<!--id使标签唯一-->
<p id="a">
<!--段落内容-->
</p>
-
无序列表标签
<!--Unordered List--> <ul> <!--List Item--> <li>列表项1</li> <li>列表项2</li> <!--...--> </ul> -
有序列表
<!--Ordered List type表示序号类型，默认是1--> <ol type="A"> <!--List Item--> <li>列表项1</li> <li>列表项2</li> <!--...--> </ol> -
表格标签
<!--使表格的每个元素都有边框--> <table border='1'> <caption><h1>表格标题</h1></caption> <!--表头--> <thead> <!--table row--> <tr> <td>列表头1</td> <td>列表头2</td> </tr> </thead> <tbody> <tr> <td>列表头1数据</td> <td>列表头2数据</td> </tr> <!--下一组数据--> <tr> <td>列表头1数据</td> <td>列表头2数据</td> </tr> </tbody> <!--脚注:主要用于数据统计--> <tfoot> <tr> <td>平均值</td> <td>数据</td> </tr> </tfoot> </table>创建不规则表实例：
<table border="1"> <caption><h1>成绩信息表</h1></caption> <thead> <tr> <!--行范围 列范围默认值1--> <td rowspan="2" colspan="1">姓名</td> <td rowspan="1" colspan="5">成绩</td> </tr> <tr> <td>6月</td> <td>7月</td> <td>8月</td> <td>9月</td> <td>10月</td> </tr> </thead> <tbody> <tr> <td>张三</td> <td>60</td> <td>70</td> <td>80</td> <td>90</td> <td>100</td> </tr> </tbody> </table> -
层标签
<div style="height:1000px; background-color:black"> <!--内容--> </div>没有边距的行
-
表单
<!--表单主要用于采集数据，然后发送数据-->
<form action="请求资源" method="请求方式">
......
</form>
3.行级标签
-
行级标签特点
- 和其他元素都在一行上
- 高度，行高及外边距和内边距不可改变
- 宽度就是内容的宽度，不可改变
-
图像标签
<img src="logo.png" title="鼠标放在上面显示的内容" alt="图片未加载时显示"> -
范围标签
<!--标记内容作特殊处理--> <!--像素pixel--> <span style="font-size:30px; color:red">内容</span> -
超链接标签
<a href="资源地址" target="目标窗口位置">内容</a>target 说明 _blank 在新窗口打开 _self 在当前窗口打开，默认值 超链接通常分为页面间链接，锚链接和功能性链接。
-
页面间链接
<a href="页面名称">内容</a> -
锚链接
<a href="页面名称#元素的ID属性值">内容</a>锚链接定位同一个页面元素时，页面名称可省
-
功能性链接
<!--会自动打开邮件--> <a href="mailTo:xxx@qq.com">联系我们</a>
-
-
输入标签
可以采集数据
<input type="类型" name="名称" value="值">
| 属性 | 说明 |
|---|---|
| type | text、password、checkbox、radio、submit、reset、file、hidden、image、button、number、date、datetime-local，默认为text |
| name | 表单元素的名称 |
| value | 元素初始值，type为radio时必须指定一个值 |
| size | 表单元素的初始宽度。当type是text或password时，size以字符为单位， 否则以像素为单位 |
| maxlength | type是text或password时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被默认选中 |
应用例子
<form action="" method="get">
<div>账号<input type="text" name="username"></div>
<!--password时用户可以选择明文查看或密文-->
<div>密码<input type="password" name="password"></div>
<!--number只能输入数字，可以手动调整数字大小-->
<div>年龄<input type="number" name="age"></div>
<!--date支持日历选择-->
<div>生日<input type="date" name="birthday"></div>
<!--datetime-local除了日历还可以选择时间-->
<div>生日<input type="datetime-local" name="birthday"></div>
<!--radio为选项卡，可选择，同组radio只能选择一个-->
<!--name属性还具有分组的功能-->
<div>性别
<input type="radio" value="M" name="sex" checked>男
<input type="radio" value="F" name="sex">女
<input type="radio" value="O" name="sex">其他
</div>
<!--checkbox为复选框，可以多选-->
<div>
<input type="checkbox" value="1" name="channel" checked>报纸
<input type="checkbox" value="2" name="channel">杂志
<input type="checkbox" value="3" name="channel">网络
</div>
<!--file可让用户选择文件-->
<div>头像<input type="file" name="head"></div>
<!--value为按钮上显示的文字-->
<div><input type="button" value="按钮"></div>
<!--hidden隐藏域，用户看不到，一般不使用-->
<div><input type="hidden" name="名称"></div>
<!--submit按钮可以提交表单，表单通过name属性采集数据-->
<div><input type="submit" value="登录"></div>
</form>
-
文本域
<!--多行输入--> <!--label和span都有范围选择功能，用于加粗--> <label> <textarea rows="10" cols="30" name="名称" placeholder="提示信息"></textarea> </label> <!--label还有指定表单元素的功能--> <form action="" method="get"> <div> <label for="input1">账号：</label> <input id="input1" type="text" name="username"> </div> <!--当用户点击label标签时，会选中输入框--> </form> -
下拉列表
<select nmae="名称"> <option value="值">显示值</option> <option value="值">显示值</option> ... <option value="值">显示值</option> </select> -
只读和禁用属性
-
readonly：不能修改输入框的内容，只能选中输入框
例如应用于文本域，让用户阅读官方协议
-
disabled：不能选中输入框
用于权限控制
-
三、实战
实现注册功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册表单</title>
</head>
<body>
<form action="" method="get">
<div>
<!-- 空格转义-->
<label>账 号:</label>
<label>
<input type="text" name="username">
</label>
</div>
<div>
<label>密 码:</label>
<label>
<input type="password" name="password">
</label>
</div>
<div>
<label>确认密码:</label>
<label>
<input type="password" name="confirm">
</label>
</div>
<div>
<label>性别:</label>
<label>
<input type="radio" name="sex" value="M" checked>男
<input type="radio" name="sex" value="F">女
<input type="radio" name="sex" value="O">其他
</label>
</div>
<div>
<label>国籍:</label>
<label>
<select name="country">
<option value="">请选择</option>
<option value="CN">中国</option>
<option value="JP">日本</option>
</select>
</label>
</div>
<div>
<input type="submit" value="注册">
</div>
</form>
</body>
</html>
四、HTML5新增元素
1.结构标签
| 标签 | 说明 |
|---|---|
| header | 页面页眉 |
| nav | 页面导航 |
| main | 页面主要内容区块 |
| section | 页面内容区块 |
| article | 独立的内容快 |
| aside | 侧边栏 |
| footer | 页面脚注 |
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构标签</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
header{
height: 40px;
background-color: black;
color:white;
}
main{
height: calc(100% - 40px);
display:grid; /*网格布局*/
grid-template-columns: 200px calc(100% - 200px);
}
aside{
background-color: red;
}
section{
background-color: antiquewhite;
}
nav{
height: 40px;
background-color: mediumaquamarine;
}
footer{
height: 40px;
background-color: black;
color: white;
}
article{
height: calc(100% - 80px);
}
</style>
</head>
<body>
<header>页面页眉</header>
<main>
<aside>侧边栏</aside>
<section>
<nav>操作导航</nav>
<article>独立内容块</article>
<footer>页面脚注</footer>
</section>
</main>
</body>
</html>
2.其他标签
| 标签 | 说明 |
|---|---|
| audio | 定义音频 |
| video | 定义视频 |
| canvas | 定义图形 |
| datalist | 定义可选数据的列表 |
| time | 标签定义时间或日期 |
| mark | 高亮需要突出的文字 |
-
音频
<!--controls生成播放按钮和进度条（音频操作控件）--> <!--autoplay表示音频就绪后立即播放--> <!--loop表示循环播放--> <audio src="资源地址" controls = "controls" autoplay="autoplay" loop="loop" preload="metadata"></audio>preload 说明 auto 当页面加载后载入整个音频 metadata 当页面加载后只载入元数据 none 当页面加载后不载入音频 常见音频格式：MP3、OOG、Wav
设置多个音频文件
<!--当第一个支持则显示第一个，都不支持则显示最后文字--> <audio controls = "controls" autoplay="autoplay" loop="loop" preload="metadata"> <source src="资源地址" /> <source sec="资源地址" /> 浏览器不支持该音频格式 </audio> -
视频标签
<video src="资源地址" controls = "controls" autoplay="autoplay" loop="loop" preload="metadata"> </video>常见视频格式：avi、flv、mp4、mkv、ogv
也可以设置多个视频文件
-
列表标签
和select类似
<input list="id"> <datalist id="id"> <option>选项1</option> <option>选项2</option> <option>选项3</option> </datalist> -
时间与标记标签
<!--用时间标记了情人节，但用户看不到--> <p> 我在<time datatime="2021-02-14">情人节</time>有个约会 </p><p> 给我一杯<mark>忘情水</mark>，换我一夜<mark>不伤悲</mark> </p>
3.HTML5新增元素属性
-
全局属性
属性 说明 contentEditable 元素是否允许可编辑内容 spellcheck 是否必须对元素进行拼写或语法检查 tabindex 指定元素的tab键选择次序 <div style="border: 1px solid #ddd; height: 200px;" contentEditable="true" spellcheck="true" tabindex="2"></div> -
表单属性
属性 说明 placeholder 元素的默认提示信息 required 元素内容必填 pattern 使用RE检查元素内容是否合法 <form action="" method="get"> <div> <input type="name" name="username" placeholder="请输入用户名" required pattern="[a-z]{8,15}"> </div> </form>
802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
