html入门
html入门
一，前言
HTML 是 Hyper Text Markup Language 的简写，表示超文本标记语言，同时 HTML 也是我们学习前端开发的基础。
二，网页的概述
网页就是放在服务器上的一个文件，浏览网页时，文件会下载到本地，由浏览器解析，渲染出各种漂亮的界面，比如表格、图片、标题、列表等。
网页文件的后缀有很多种，比如.html、.php、.jsp、.asp等
但不管网页的后缀是什么，它的本质都是一样的，就是由 HTML 代码构成的纯文本文件。
三，网页基本信息
<html>
//网页头部
<head>
<title></title>
</head>
//主体部门
<body>
</body>
</html>
1.HTML标签
整个网页是从<html>这里开始的，然后到</html>结束。
2.head标签
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎），不会显示在页面中，主要目的是因为它对机器是可读的。 |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 定义页面所有链接的基础定位（用得很少） |
3.body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
四，网页的基本标签
1.段落与文字标签
| 标签 | 说明 |
|---|---|
| <h1>~<h6> | 标题1~标题6 |
| <p> | 段落 |
| <br/> | 换行 |
| <hr/> | 水平线 |
| <div> | 分割（块元素） |
| <span> | 区域（行内元素） |
2.文本格式化标签
| 标签 | 说明 |
|---|---|
| <strong> | 加粗 |
| <em> | 斜体 |
| <sup> | 上标 |
| <sub> | 下标 |
3.注释和特殊符号
| 标签 | 说明 |
|---|---|
|  ； | 空格 |
| > | 大于号(>) |
| < | 小于号(<) |
| " | 引号(") |
| © | 版权符号（©） |
4.图像标签
<img src = "路径" alt = "图片不显示时的提示文字" title = "鼠标移到图片上的提示文字" width = "宽" height = "高">
5.链接标签
<a href="链接地址" target="目标窗口的打开方式"></a>
| target属性值 | 说明 |
|---|---|
| _self | 默认方式，即在当前窗口打开链接 |
| _blank | 在一个全新的空白窗口中打开链接 |
| _top | 在顶层框架中打开链接 |
| _parent | 在当前框架的上一层里打开链接 |
五，HTML列表
1.无序列表
<ul type = "属性值">
<li>有序列表项</li>
<li>有序列表项</li>
</ul>
| type属性值 | 列表项的序号类型 |
|---|---|
| 1 | 数字1、2、3…… |
| a | 小写英文字母a、b、c…… |
| A | 大写英文字母A、B、C…… |
| i | 小写罗马数字i、ii、iii…… |
| I | 大写罗马数字I、II、III…… |
2.有序列表
<ol>
<li></li>
<li></li>
</ol>
| type属性值 | 列表项的序号类型 |
|---|---|
| disc | 默认值，实心圆“●” |
| circle | 空心圆“○” |
| square | 实心正方形“■” |
3.定义列表
<dl>
<dt>定义名词<</dt>
<dd>定义描述</dd>
<dt>定义名词</dt>
<dd>定义描述</dd>
</dl>
六，HTML表格
<table>
<tr>行
<td>列</td>
<td>列</td>
</tr>
<tr>行
<td>列</td>
<td>列</td>
</tr>
</table>
1.单元格合并
<td rowspan = "n" ></td> 行合并
<td colspan = "n" ></td> 列合并
2.表格属性
left 左对齐
align center 居中
水平对齐方式 right 右对齐
top 顶对奇
valign middle 居中
垂直对齐方式 bottom 低对齐
baseline基线对齐
七.<frameset>标签
<frameset cols = "n%,y%,..." rows = "n%,y%,..." border = "num">
<frame src = "路径1">
<frame src = "路径2">
......
</frameset>
| 属性 | 值 | 描述 |
|---|---|---|
| cols | 百分比 | 纵向排列 |
| rows | 百分比 | 横向排列 |
八，form表单
一个表单是从<form>这里开始的，然后到</form>结束。
-
- method="post" 规定如何发送表单数据常用值：get | post
- action="result.html" 表示向何处发送表单数据。
- 属性
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text |
| name | 指定表单元素的名称。 |
| id | 指定表单元素的id。 |
| value | 元素的初始值。type 为 radio 时必须指定一个值 |
| size | 指定表单元素的初始宽度。当 type 为 text 或 password 时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text 或 password 时，输入的最大字符数 |
| checked | type 为 radio 或 checkbox 时，指定按钮是否是被选中 |
| readonly | 只读文本框 |
| disabled | 禁用 |
1.input标签表单
语法：<input type="表单类型"/>
| type属性值 | 说明 |
|---|---|
| text | 单行文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| button | 普通按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| image | 图片按钮 |
| hidden | 隐藏域 |
| file | 文件上传 |
2.textarea标签表单
语法：<textarea name="showText" cols="x" rows="y">文本内容 <**/textarea **>
- 多行文本域：<**textarea **>
- 显示的列数：cols="x"
- 显示的行数： rows="y"
3.select和option标签表单
下拉列表由<select>标签和<option>标签配合使用。
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>
- 列表框：select name="列表名称"
- 默认选中项：selected="selected"
- 选项：option value="选项的值"
4.文件域
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
- 文件域：type="file"
- 表单编码属性：enctype="multipart/form-data"
5.域和域标题
<form action="" method="post" >
<fieldset>
<legend>用户信息</legend>
姓名：<input type="text"/>
……
</fieldset>
</form>
- 域 ：<fieldset>
- 域标题：<legend>用户信息</legend>
浙公网安备 33010602011771号