HyperText Markup Language 超文本标记语言
<!DOCTYPE html> ------> DTD 文档类型声明 h5
<html lang="en">
<head>
<meta charset="UTF-8"> ------> 字符集
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> ------> 网页标题
</head>
<body>
</body>
</html>
一、html4
- 1.标题 h1~h6 语义化 容器标签
- 2.段落 p
- 3.超链接 a
- href:链接跳转地址，可以是网址也可以是本地资源文件地址
- title:悬停文本
- target:值为_blank表示新窗口打开,默认_self
- 也可做锚点
- 4.图片 img
- src：路径
- title：悬停文本
- alt：图片资源加载失败 显示的文字
- 5.列表
- 无序列表
<ul><li></li></ul> - 有序列表
<ol><li></li></ol> - 自定义列表
<dl><dt></dt><dd></dd></dl>
- 无序列表
- 6.表格
<style>
table,tr,td{
border-collapse: collapse;
}
</style>
<!--完整表格结构-->
<!-- <h1>学生成绩表</h1> -->
<table border="1">
<caption>学生成绩表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>100001</td>
<td>张三</td>
<td>计科1</td>
<td>90</td>
</tr>
<tr>
<td>100002</td>
<td>王伟</td>
<td>计科1</td>
<td>80</td>
</tr>
</tbody>
</table>
colspan，rowspan
表格嵌套：把完整的表格结构，放到td标签里
- 7.表单
<form action="" method>
<p>用户名<input type="text" value="请输入用户名"/></p>
<p>密 码<input type="password" /></p>
<p>
性别
<input type="radio" checked name="sex" id="">男
<input type="radio" name="sex" id="">女
<input type="radio" name="sex" id="">保密
</p>
<p>
爱吃的菜
<input type="checkbox" name="" id="">红烧肉
<input type="checkbox" checked name="" id="">酸菜鱼
<input type="checkbox" name="" id="">宫爆鸡丁
<input type="checkbox" name="" id="">西红柿鸡蛋
</p>
<p>
城市
<select>
<option value="">北京</option>
<option value="" selected>重庆</option>
<option value="">武汉</option>
<option value="">南京</option>
</select>
</p>
<p>
留言
<textarea cols="30" rows="10"></textarea>
</p>
<p>
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
</p>
</form>
- 8.字符实体
- 空格
- 小于号
< >大于号 - 版权
©
- 空格
- 9.废弃标签
- 文字 font
- 水平线 hr
- 倾斜 i
- 加粗 b
- 倾斜 em
- 删除线 del
- 10.div+span
二、html5
新增元素
<header></header><footer></footer><nav></nav>导航<article></article>文章、评论<section></section>章节 标题<aside></aside>侧边栏<hgroup></hgroup>分组 通常与h1～h6组合使用<figure><figcaption></figcaption></figure>独立内容<mark></mark>标记<time></time>时间
兼容
- 使用js新增元素的方法解决(默认是行内样式)
-
谷歌提供的html5shiv.js
1、在head标签加入 <!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]--> 2、创建元素后，默认内联显示 header,nav,aside,article,footer,section{ display:block; }
音频 audio
- ie9以下不支持
- 属性：
- src 要播放的音频的URL
- controls 显示播放控件
- loop 循环播放
- muted 静音
- 格式
- MP3\Ogg\Wav
<audio controls muted loop>
<source src="videoAudio/biubiubiu.ogg" type="audio/ogg">
<source src="videoAudio/hanmai.mp3" type="audio/mpeg">
您的浏览器不支持audio元素播放音频
</audio>
视频 video
- ie9以下不支持
- 属性：
- src 要播放的视频的URL
- controls 显示播放控件
- loop 循环播放
- muted 静音
- height 播放器的高度
- width 播放器的宽度
- poster 预览图片
- 格式
- MP4\WebM\ogg
<video controls width="400" poster="pic.png">
<source src="videoAudio/butterfly.ogg" type="video/ogg">
<source src="videoAudio/movie.mp4" type="video/mp4">
您的浏览器不支持video元素播放视频
</video>
新增表单元素
<!-- url输入域提交时默认进行格式验证，输入不合法弹出提示且无法提交；移动端：.com 键盘变化-->
<input type="url" name="userurl"/>
<!--email域提交时默认进行格式验证，输入不合法弹出提示且无法提交；移动端：@ 键盘变化 -->
<input type="email" name="usere"/>
<input type="search"/><!--搜索域-->
<!--电话号码输入域 移动端：数字键盘变化 -->
<input type="tel"/>
<!--数值输入域
value 初始值
min最小值
max最大值
step步长（合法输入间隔）
-->
<input type="number" value="10" min="0" max="20" step="2"/>
<!-- 一定范围内的数值输入域（滑块） -->
<input type="range" value="5" min="1" max="10" step="1"/>
<input type="color" /><!--取色器-->
<!--时间日期选择器-->
<input type="date"/><br/><br/>
<!-- 手动输入一个日期和时间-->
<input type="datetime"/><br/><br/>
<!--本地时间：选择年、月、日、 小时、分钟-->
<input type="datetime-local"/><br/><br/>
<!--选择年、月-->
<input type="month"/><br/><br/>
<!--选择 小时、分钟-->
<input type="time"/><br/><br/>
<!--选择年、周-->
<input type="week"/><br/><br/>
<!-- 选项列表-->
<input id="myCar" list="cars"/>
<datalist id="cars">
<option value="WEB"></option>
<option value="ASD"></option>
</datalist>
新增表单属性
- autocomplete
- on 用户输入时显示选项列表
- autofocus 自动获取焦点
- form="form标签的id" 规定表单元素的归属
- multiple 允许多个值，适用于：email file
- pattern 模式验证（正则验证） 提交时进行表单验证
- required 必填项
- placeholder 输入提示占位符
