HTML
初识
什么是HTML
- HTML： Hyper Text Markup Language (超文本标记语言)
H5的优势
- 浏览器都支持
- 市场需求
- 跨平台
W3C标准
- W3C
- World Wide Web Consortium (万维网联盟)\
- W3C标准包括
- 结构化标准语言 (HTML, XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
常见IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm
网页基本信息
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部-->
<head>
<!-- meta描述性标签， 它用来描述网站的一些信息 -->
<!-- meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="" content="">
<!-- title网页标题-->
<title>title</title>
</head>
<!-- body标签代表网页主体 -->
<body>
<!-- ... -->
</body>
</html>
网页基本标签
-
标题标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> -
段落标签
<p>段落</p> -
换行标签
<br/> -
水平线标签
<hr/> -
粗体
<strong></strong> -
斜体
<em></em> -
特殊符号
空格 > 大于 < 小于 © 版权 <!-- .... -->
图像标签
常见图像格式
- JPG
- GIF
- PNG
- BMP
- ...
<img src="path" alt="text" title="text" width="x" height="y" />
<!--
src: 地址
alt: 图像的替代文字
title: 鼠标悬停提示文字
width: 图像宽度
height: 图像高度
-->
超链接标签及应用
-
页面间链接
-
从一个页面链接到另一个页面
<a href="url" ></a> <!-- href: 表示药跳转的页面 target： 表示窗口在哪里打开 _blank 在新标签打开 —self 在自己网页中打开 -->
-
-
锚链接
<p name="top">this is the top paragraph</p> <p> </p> <a href="#top">back to top</a> <!-- 锚链接 1.需要一个锚标记 2.跳转到标记 # --> -
功能性链接
<a href="mailto:email@example.com">mail to me</a> <!-- 邮件链接： mailto -->
行内元素和块元素
块元素
- 无论多少，该元素独占一行
- (p, h1-h6)
行内元素
- 内容撑开宽度， 左右都是行内元素的可以排在一行
- (a , strong, em ...)
列表标签
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条例化，并以列表的样式显示出来，以便浏览者能快捷的获得相应的信息
列表分类
- 有序列表
- 无序列表
- 自定义列表
<!-- 有序列表 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<!-- 自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容
-->
<dl>
<dt>title</dt>
<dd>data</dd>
</dl>
表格标签
为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
| 跨四列 | |||
| 跨两行 | 2-2 | 2-3 | 2-4 |
| 3-2 | 3-3 | 3-4 | |
<!-- 表格 table
行: tr
列： td
-->
<table border="1px">
<tr>
<!-- colspan 跨列 -->
<td colspan="4">跨四列</td>
</tr>
<tr>
<!-- rowspan 跨行 -->
<td rowspan="2">跨两行</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
媒体元素
视频元素
- video
音频元素
- audio
<!--
controls: 控制条
autoplay: 自动播放
-->
iframe内联框架
<!--iframe 内联框架
src: 引用页面地址
name: 框架标识名
-->
<iframe src=“path" name=”mainFrame">
</iframe>
表单
<!-- form
method：
action: 表单提交的位置， 可以是网站， 也可以是一个请求处理地址
-->
<form method="post" action="result.html">
<!-- input
type:
text(defualt), password, checkbox, radio, submit, reset, file, hidden, image, button
name: 名称
value: 元素的初始值
size: 指定元素的初始宽度，当type为text或password时元素大小以字符为单位。对于其他类型，以像素为单位
maxlength: type为text或password时，输入的最大字符数
cheched:type为radio或checkbox时，指定按钮是否是被选中
-->
<input type="text">
<!-- 下拉框， 列表框
-->
<select name="name">
<option value="value1">option1</option>
<option value="value2">option2</option>
<option value="value3">option3</option>
</select>
<!-- 文本域
-->
<textarea name="textarea" clos="50" rows="10"></textarea>
<!-- 文件域
-->
<input type="file">
</form>
表单应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disable
表单初级验证
- 用户提示 placeholder
- 非空判断 required
- 正则表达式 pattern