文章目录
iframe元素
框架页
通常用于在网页中嵌入另一个页面
iframe 可替换元素
- 通常为行盒
- 通常显示的内容取决于元素的属性
- css不能完全控制其中的样式
- 具有行块盒的特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 用于分享视频,例如:哔哩哔哩 -->
<a href="https://www.huya.com" target="myfirme">虎牙</a>
<a href="https://www.douyu.com/" target="myfirme">斗鱼</a>
<a href="https://www.taobao.com/" target="myfirme">淘宝</a>
<iframe name="myfirme" src="https://www.douyu.com/" frameborder="0"></iframe>
</body>
</html>
在页面中使用flash
object:表示嵌入一个对象
embed:表示嵌入
他们都是可替换元素
MIME(多用途互联网邮件扩展类型)
例如:资源是一个jpg图片,MIME:image/jpeg(表示告诉浏览器这里引用的资源是jpg图片)
写法见:页面中使用flash文件夹
表单元素
一些列元素,主要用于收集用户数据。
input元素
输入框
- type属性:输入框类型
type:text,普通文本输入框
type:password,密码框
type:date,日期选择框,兼容性问题
type:search,搜索框
type:range,滑块
type:color,颜色选择器
type:number,数字输入框
type:checkbox,多选框
type:radio,单选框
type:file,上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 本文输入框 -->
<input type="text"><br>
<!-- 密码框 -->
<input type="password"><br>
<!-- 日期选择 -->
<input type="date"><br>
<!-- 搜索框 -->
<input type="search"><br>
<!-- 滑块 -->
<input type="range" min="0" max="5"><br>
<!-- 颜色选择 -->
<input type="color"><br>
<!-- 数字输入框 -->
<input type="number" min="0" max="100" step="20"><br>
<!-- 多选框 -->
爱好:
<input type="checkbox" name="" id=""> 音乐
<input type="checkbox" name="" id=""> 电影<br>
<!-- 单选框 -->
性别:
<input type="radio" name="nan" id="">男
<input type="radio" name="nan" id="">女<br>
<!-- 上传文件 -->
<input type="file" name="" id="">
</body>
</html>
- value属性:输入框的值
- placeholder属性:显示提示的文本,文本框没有内容时显示
input元素可以制作按钮
当type值为reset、button、submit时,input表示重置按钮、普通按钮、提交按钮。
select元素
下拉列表选择
通常和option配合使用
<p>
请选择城市:
<select name="" id="">
<option selected value="深圳">深圳</option>
<option value="">西安</option>
<option value="">四川</option>
</select>
</p>
分组选择
<p>
<select>
<optgroup label="才艺主播">
<option>冯提莫</option>
<option>小团团</option>
</optgroup>
<optgroup label="游戏主播"></optgroup>
<option value="">uzi</option>
<option value="">小站</option>
<option value="">theshy</option>
</select>
</p>
textarea元素
文本域,多行文本框
<p>
请填写简介:
<textarea name="" id="" cols="30" rows="10" placeholder="请输入简介"></textarea>
</p>
按钮元素
button
type属性:reset、submit、button
<p>
<input type="image" src="1.jpg">
<button>
<img src="1.jpg" alt="">
<p>Lorem, ipsum.</p>
</button>
</p>
配合表单元素的其他元素
label:普通元素
- 显示关联
可以通过for属性,让label元素关联某一个表单元素,for属性书写表单元素id的值。
<p>
<input name="gender" id="radMail" type="radio">
<label for="radMail">男</label>
<input name="gender" id="radFemail" type="radio">
<label for="radFemail">女</label>
</p>
<!-- 第二种方式 -->
- 隐式关联
可以将用label元素将input元素包起来
<p>
<label>
<input name="gender" type="radio">
男
</label>
<label>
<input name="gender" type="radio">
女
</label>
</p>
datalist元素
数据列表
该元素本身不会显示到页面,通常用于和普通文本框配合
<p>
请输入你的居住地:
<input type="text" list="selectAger">
<datalist id="selectAger">
<option value="shanxixian">陕西西安</option>
<option value="guangdongshenzhen">广东深圳</option>
<option value="jiangsunanjing">江苏南京</option>
<option value="anhuianqing">安徽安庆</option>
<option value="henanzhnegzhou">河南郑州</option>
</datalist>
</p>
form元素
通常,会将表单元素,放置在form元素的内部。作用是当提交表单时,会将form元素内部的表单以合适的方式提交到服务器。
form对开发静态页面没有什么意义。
<form action="https://www.douyu.com" method="GET">
账号:
<input type="text" name="logeiptxt"><br> 密码:
<input type="password" name="logeippwd">
<p>
城市:
<select name="city">
<option value="1">成都</option>
<option value="2">重庆</option>
<option value="3">深圳</option>
<option value="4">广州</option>
</select>
</p>
<button type="submit">提交</button>
</form>
fieldset元素
表单分组
<!-- 用法 -->
<fieldset>
<legend>账号信息</legend>
<p>
用户账号:
<input type="text">
</p>
<p>
用户密码:
<input type="password">
</p>
</fieldset>
<fieldset>
<legend>用户信息</legend>
<p>
用户姓名:
<input type="text">
</p>
<p>
联系方式:
<input type="number">
</p>
</fieldset>
<p>
<button>提交</button>
</p>
表单状态
readonly属性:布尔属性,是否只读(不会改变表单显示样式)
disabled属性:布尔属性,是否禁用(会改变表单显示样式)
表格元素
在css技术出现以前,网页通常使用表格布局。
现在后台管理系统可能会使用表格布局。
前台:面向用户
后台:面向管理员。对界面要求不高,对功能要求搞。
表哥不再适用页面布局?表格的渲染速度太慢。
表格:table
表格标题:caption
表头:thead
表格主体:tbody
表尾:tfoot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
text-align: center;
font-weight: bold;
}
table caption {
font-size: 2em;
font-weight: bold;
color: #333;
margin: 1em 0;
}
th,
td {
border: 1px solid #ccc;
padding: 20px 0;
}
thead tr {
background-color: #008c8c;
color: #fff;
}
tbody tr:nth-child(even) {
background-color: #e5e5e5;
}
tbody tr td:first-child {
color: #ff8c08;
}
tfoot tr td {
text-align: right;
padding-right: 30px;
}
</style>
</head>
<body>
<!-- 表格 -->
<table>
<!-- 表格标题 -->
<caption>
这会是一个表格
</caption>
<!-- 表头 -->
<thead>
<!-- table row 一行 -->
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<tr>
<!-- 跨行 -->
<td rowspan="2">数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<!-- 跨列 -->
<td colspan="5">总计:xxxxxx</td>
</tr>
</tfoot>
</table>
</body>
</html>
其他元素
HTML5元素周期表
- abbr元素
缩写词
写法
<p>
<abbr title="cascading style sheet">css</abbr>是用于为页面添加样式
</p>
- time元素
提供给浏览器或搜索引擎阅读的时间
用法
<p>
<time datetime="2020-5-27">今年5月27日,</time>我来到了深圳。
</p>
- b元素
区分开同等重要的对象
用法
<p>
我们公司有项目很多,有<b>城市更新</b>和<b>地产投资</b>。
</p>
- q元素
一小段引用文本
<p>
电视剧里说:<q>不要一边担心着未来,一边浪费着现在。</q>
</p>
- blockquote
大段引用文本
<p>
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt laudantium laboriosam modi magnam minima voluptatum voluptatibus voluptates totam sint error?</blockquote>
</p>
-
br
换行用(无语义) -
hr
分割线(无语义) -
meta
还可以用于搜索引擎优化 -
link
链接外部资源(css、图标)
<link rel="stylesheet" type="application/x-shockwave-flash" href="./天诛忍凯旋.swf">
rel属性:relation,链接的资源和当前网页的关系
type属性:链接资源的MIME属性(可省略)
边浪费着现在。
5. blockquote
大段引用文本
```html
<p>
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt laudantium laboriosam modi magnam minima voluptatum voluptatibus voluptates totam sint error?</blockquote>
</p>
-
br
换行用(无语义) -
hr
分割线(无语义) -
meta
还可以用于搜索引擎优化 -
link
链接外部资源(css、图标)
<link rel="stylesheet" type="application/x-shockwave-flash" href="./天诛忍凯旋.swf">
rel属性:relation,链接的资源和当前网页的关系
type属性:链接资源的MIME属性(可省略)