|
|
HTML相关
=======
## 认识网页
*web标准（w3c三种标准）：结构标准 -->html 表现标准 -->css 行为标准 -->js *
*浏览器和服务器：浏览器发送报文（通过http协议）发送到服务器；服务器通过解析返回报文*
##1.0 简单介绍、简单语法
### 1.1 什么是html
- hyper text language 超文本标记语言
- 超文本：就是链接 用来实现页面之间的跳转
### 1.2 html文档的结构
```
<! Doctype html> <!-- 声明文档类型 必须声明-->
<html> <!-- 根标签开始 -->
<head> <!-- 头部标签 -->
<title></title> <!-- 网页标题标签 -->
</head>
<body></body> <!-- 网页主体标签 -->
</html> <!-- 根标签 -->
```
### 1.3 html标签分为单、双标签
*单标签就是没有结束标签的html标签*
```
<!-- 常见的html单标签 -->
<img/> <!-- 图片 -->
<input/>
</br>
```
*常见的双标签*
```
<!-- 双标签： --><head></head> <title></title> <body></body>
```
### html标签关系分类
```
<head>
<title></title>
</head> <!-- 包含关系（嵌套 -->）
```
### 1.4 常用的开发工具(IDE)
- Sublime: 轻量级，有很多好用的插件
> html:xt+tab Html结构
ctrl+shift+d 快速复制一行
ctrl+shift+k 快速删除一行
tab 补全标签
ctrl+鼠标左键 集体输入 多行游标
ctrl+L 快速选中
ctrl+h 查找替换
ctrl+f 查找
ctrl+shift+↑（↓） 快速上（下）移动一行
- atom：类似于sublime的轻量级开发工具，据说是GitHub码农的最爱。支持插件
- vsCode:微软退出的轻量级开发工具，也同样有很多插件
- Webstorm: 重量级，太智能，不好掌握。
- 还有Hbulider、DreamWeaver等
### 1.5 html标签
```
- <br /> <!-- 文本换行 -->
- <hr /> <!-- 水平线标签 -->
- <h1></h1> <!-- 标题标签：在一个页面里只能出现一次。 -->
- <img/> <!-- src :图片的来源（图片的路径，图片在哪里）
alt:替换文本；
title:提示文本（鼠标放到图片上显示的文本）
width:宽
height:高
注意，如果只单独更改图片的宽或高，图片会等比例缩放。
-->
```
### 1.6 html路径问题
- 绝对路径：本地电脑绝对路径
- 相对路径：文档（html\图片）在同一文件夹，可以直接写图片（html）名字;
### 1.7 html列表
- 无序列表
```
<ul>
<li></li>
<li></li>
</ul> <!-- ul里边只能放li标签 li里边可以放任何标签。 -->
```
- 有序列表
```
<ol>
<li>zzzz</li>
<li>zzzz</li>
<li>zzzz</li>
</ol>
```
- 自定义列表
```
<dl>
<dt></dt>
<dd></dd>
</dl>
```
## 2.0 继续认识-表单和表格
### 表单
- 表单的组成：提示信息、表单的控件、表单域
- 表单标签
```
<form action="1.php" method=“”></form>
Action:<!-- 收集信息，将信息提交给谁。 -->
Method:<!-- 提交数据的方法，get | post -->
get:<!-- 通过浏览器的地址栏传输数据，安全性低。 -->
post:<!-- 通过提交数据的文件处理数据，安全性高。 -->
```
- 文本输入框
```
<input type="text"name="ped" maxlenght="6">
maxlength:设置文本框输入内容的长度。
readonly:将文本框设置为只读状态，只能读，不能写。
Disabled:将文本框设置为未激活状态。
Name:输入框的名字。
Value:输入框的值。
```
- 密码输入框
```
<input type="password" name="pwd"maxlenght="6"/>
```
- 单选框
```
<input type ="radio"name="gender"checked="checked">男
<input type="radio"name="gender"checked="checked">女
当将需要单选的单选框name属性值设置为一样的时候，才能实现单选效果。
Checked=”checked”,设置单选按钮的默认选项。
```
- 下拉列表
```
<select>
<option muitiple=muitiple>河南省 </option>
<option>北京省</option>
<option>河北省 </option>
<option>南京省 </option>
</select>
Multiple=”multiple”,设置下拉列表为多选项。
```
- 多选框
```
Checked=”checked”，可以设置多选框默认选项。
<input type="checkbox" checked="checked">
```
- 多行文本框
```
<textarea name="#" cols="30" rows="10"></textarea>
```
- 上传文件控件
```
<input type="flie" />
```
- 按钮
*提交按钮*
```
<!-- 提交按钮 -->
<input type="submit">
```
*普通按钮*
```
<!-- 普通按钮 -->
<input type="button" value="普通按钮"> <br><br>
```
*重置按钮*
```
<!-- 重置按钮 -->
<input type="reset" value="重置信息">
```
*图片按钮*
```
<input type="image" src="阿牛.png" />
```
*分组控件*
```
<fieldset>
<legend>用户注册信息<lengend>
</fieldset>
```
### 表格
- 表格的定义
```
<table></table>:定义表格。
<tr></tr>:行。
<td></td>：列。
属性介绍:
border:定义边框的粗细。
cellspacing:单元格与单元格之间的距离。
Cellpadding:单元格边框与内容的距离。
Width：宽度。
Height:高度。
Bgcolor:背景颜色。
align：left center right 给tr和td使用时，可以设置单元格内容的水平对齐方式。如果给table使用，设置表格对齐方式。
<th></th>表格的标题标签，用法和td一样，会自动加粗th中文字，居中对齐。
表头，<caption></caption>,设置表的名字。
```
- 经典案例--一个像素表格案例
```
主要是利用一个像素的单元格间距来实现，将表格背景和行背景设置为不一样的背景颜色，显示的是颜色为表格背景的一个像素的边框。
```
- 表格的标准结构
```
<table>
<thead></thead> 表格头部文件
<tbody></tbody> 表格主体
<tfoot></tfoot> 表格尾部
</table>
```
- 单元格的合并
```
Colspan:横向合并 Colspan=“2”横向的二合一
Rowspan:纵向合并 Rowspan=“3” 纵向的三合一了
``` |
|
|
|
|
|
|
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-6-21 20:19:22
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡