一、html文档结构
<!-- html文档的声明,告诉浏览器是html文档 -->
<!DOCTYPE html>
<!-- html是根元素,lang是语言,默认英语en,汉语是zh-Hans -->
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PHP中文网</title>
<link rel="stylesheet" href="style.css">
<script src="" charset="utf-8"></script>
</head>
<body>
<h1>PHP中文网!</h1>
欢迎观看:<a href="http://www.php.cn">PHP中文网</a>
</body>
</html>
总结:
1.声明
<!DOCTYPE html>
2.lang
英语是en
image.png
image.png
4.meta 元数据
image.png
image.png
5.title网页标题
image.png
6.link
image.png
7.script 用来引入脚本
image.png
二、html常用元素
2.1段落,标题,格式化输出
段落,<p 标签
标题,<h 标签
image.png
格式化输出
image.png
2.2行内文本详解
单独一行添加横线
<del></del>给中间的文字添加删除线
<s></s>给中间的文字添加删除线
<ins></ins>给中间的文字添加下划线
</u>下划线
</strong>加粗
</b>加粗
</em>斜体
</i>斜体
</mark>高亮显示
<code>用来包装文本中的额代码片段。经常套在<pre>标签中使用
2.3表格
包含标题,头部,主题,底部
image.png
代码如下:
image.png
image.png
2.4图片元素
<img>标签
src中可以放本地图片地址也可以是网络地址
width是设置图片宽度,长度等比例缩放
alt是添加图片说明文字,便于浏览器收录
image.png
2.5有序列表
有序列表用<ol>标签包装
内部列表项勇<li>标签说明
默认从1顺序排列
reversed 逆序排列
start可以设置起始序列号
image.png
image.png
结果:
image.png
2.6无序列表
无序列表用<ul>标签包装
内部列表项勇<li>标签说明
image.png
结果:
image.png
有序列表和无序列表可以嵌套使用
2.7描述列表
image.png
一对<dl>标签进行包装
要描述的对象,放在一对<dt>标签中
具体的内容,放在一对<dd>标签中
image.png
结果:
image.png
三、html常用表单元素
表单是网页中数据采集的工具
组成:
image.png
3.1<from>标签中的属性
image.png
语法:
image.png
image.png
image.png
示例:
image.png
结果:
image.png
3.2常用表单控件的元素,type
image.png
实例:
image.png
image.png
image.png
image.png
3.3下拉框与分组
下拉框由标签<select>和<option>组成。
变量名保存在<select>标签的name属性中。
变量的值保存在<option>标签的value属性中。
默认项由<option>标签中selected属性说明。
image.png
分组由<optgroup>标签中label设置
image.png
3.4<lable>表单元素描述标签
image.png
3.5文本域<texttarea>
image.png
3.6表单元素分组标签<fieldset>
<fieldset>标签默认加边框,可以加背景,去除边框
image.png
四、H5新增表单元素
4.1H5新增表单属性
image.png
实例:
image.png
image.png
image.png
image.png
4.2H5新增表单类型(input属性type对应的值)
image.png
实例:
image.png
image.png
image.png
效果:
image.png
五、H5新增的视频与音频元素
5.1视频标签<video>
src:指示视频源
width:设置宽度,高度随宽度等比缩放,两者选一个设置
controls:显示视频控制按钮
autoplay:视频加载时自动播放
preload:预加载,和autoplay是互相排斥的
poster:制定视频封面,不指定封面显示视频第一帧
muted:播放时静音
loop:循环播放
image.png
5.2音频标签<audio>
标签属性和视频相同
image.png