温故而知新——HTML篇
2017-11-27 本文已影响0人
jia林
HTML概念
- HTML（Hypertext Markup Language）即超文本标记语言
HTML发展史
- 1993年（IETE）HTML1.0
- 1995年（W3C）HTML2.0
- 1996年（W3C）HTML3.2
- 1997年（W3C）HTML4.0（SGML）
- 1999年（W3C）HTML4.01——分化点——2004年（WHWHATWG）HTML5草案
- 2000年（W3C）XHTML1.0
- 2001年（W3C）XHTML1.1——分歧——XHTML2.0？
- 2008年（合并）HTML5正式版
- 2014年HTML5定稿
HTML特点
- HTML不需要编译，直接有浏览器执行
- HTML史一个文本文件
- HTMl文件必须使用html或xml为文件名后缀
- HTML大小写不敏感，HTML和html一样
HTML基本机构
image.png
HTML标签
- 语法：<标签名></标签名>
- 例子:<html></html>
- 规范 : 1、一般成对出现，结束标签比开始标签多了一个/
2、单标签：没有结束标签，如<img /> 、<hr />
HTML标签属性
- 语法：< 标签名 属性名1=‘值’ 属性名2=‘值’>......</标签名>
HTML注释
- 注释在网页中不显示
Documnet文档类型声明
- <!document>声明必须放在HTML文档第一行
- <!document>声明不是HTML标签
网页编码设置
-
当网页显示出现乱码时，在<head></head>标签之间添加：
<meta http-equiv='Content' content='text/html;charset=uth-8'></meta>
image.png
文字和段落标签
- 标题标签<h1~ h6></h1~ h6>
- 段落标签 <p></p>
- 换行标签<br />
- 水平线<hr />
- 文字斜体： <i></i>、<em></em>
- 加粗：<b></b>、<strong></strong>
- 下标：
- 上标：
- 插入内容：<ins>
- 删除内容：<del>
特殊符号
| 属性 | 显示结果 | 描述 |
|---|---|---|
| <； | < | 小于号或显示标记 |
| >； | > | 大于号或显示标记 |
| ®； | ® | 已注册 |
| ©； | © | 版权 |
| &trade； | ® | 商标 |
|  ； | space | 不断行的空白 |
列表标签
- 无序列表
<ul>
<li></li>
<ul/>
- 有序列表
<ol>
<li></li>
<ol/>
- 定义列表
<dl>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
</dl>
图像标签
- <img src='图片路径' alt='图片无法正常加载的显示的文本' heght='图片高' width='图片宽'>
超链接标签
- <a href='链接' name='链接命名' target='打开窗口方式' title='鼠标划过显示的文字'></a>
- <a href='mailto:邮件地址'></a>
HTML表格
-
语法与结构
image.png
-
表格属性
image.png
image.png
image.png
-
<td>和<th>标签属性
image.png
-
跨列属性colspan
<table>
<tr>
<td colspan='2'>..</td>
<td>..</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
</table>
- 跨行属性rowspan
<table>
<tr>
<td>..</td>
<td rowspan='2'>..</td>
<td>..</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
</tr>
</table>
image.png
HTML表单
image.png
-
表单的工作原理
image.png
-
form标签
image.png
- input标签：<input type='类型属性' name='名称' placeholder='用户填入字段提示' value='文本框默认值' >
| type属性 | 描述 |
|---|---|
| text | 文字域 |
| password | 密码域 |
| file | 文件域 |
| checkbox | 复选框 |
| radio | 单选框 |
| button | 按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| hidden | 隐藏域 |
| image | 图像域 |
- 下拉菜单
<select>
<option value="定义送往服务器的选项值" selected="设置初始选中状态">...</option>
</select>
| 属性 | 描述 |
|---|---|
| name | 设置下拉菜单和列表名称 |
| multiple | 设置可选择多个选项 |
| size | 设置列表中可见选项的数目 |
- 分组下拉菜单
<select>
<optgroup label='组1'>
<option value="定义送往服务器的选项值" selected="设置初始选中状态">...</option>
</optgroup>
<optgroup label='组2'>
<option value="定义送往服务器的选项值" selected="设置初始选中状态">...</option>
</optgroup>
</select>
-
多行文本域 <textarea>
image.png
-
HTML重要标签
image.png
- button里的按钮在表单里才会有意义
- label和input的属性进行关联
image.png
注：文章内容借鉴慕课网
