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” 纵向的三合一了
```

HTML浅识的更多相关文章

  1. javascript原型prototype浅识

    C++,java是基于类的语言,主要通过类来实现继承. javascript是基于原型的语言,通过原型来实现继承. 什么是原型?每种物质,都可以追根溯源,原型就是对象的根源.继承就是追根溯源. jav ...

  2. 字符编码浅识：关于Unicode与UTF-8

    参考自阮一峰博客:http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html Unicode只是一个符号集,它只规定了符号的 ...

  3. 新手对css的浅识

    对于css的一个初步理解与认识 在最近的学习中接触到了之前自己从来都不曾想过的语言,C语言,html超文本标记语言等等,还有今天在这里我要进行分析的css,之前浏览过很多的网页,也曾想过这里面的秘密, ...

  4. web前端的发展态势 浅识

    以前 作为一个java程序员写的代码主要还是后台的代码,虽然开始的时候前后端都写,但是也是用别人造好的轮子来用,学学html,css,js,jquery,再找一个前端ui框架学学,上手之后我们就可以写 ...

  5. Android FrameWork浅识

    接收讯息及事件 储存共享数据 处理UI互动的事情 幕后服务(播放背景音乐) 在框架的手中,它的生命的周期完全由框架来控制,new也是由框架.它的逻辑调用则是自己实现,确保强龙的地位 框架反向来控制相应 ...

  6. Vue-router浅识

    一.router-link及router-view :用来做导航,通过传入to属性来指定链接 :用来做路由出口,路由匹配到的组件都会渲染在这里 const router = new VueRouter ...

  7. 关于 block的一些浅识

    block的定义:“带自动变量的匿名函数” (一)写法: ^ void (int iAge){ NSLog(@"%d", iAge);}; 和C函数写法区别在于: 1) :以插入符 ...

  8. 浅识J2EE十三个规范

    前言 没有规矩不成方圆,学习J2EE,先来明白都有什么规范. 内容 1.JDBC(Java Database Connectivity)java数据库连接 a)为java开发人员提供了一个行业标准AP ...

  9. 浅识MySQL

    MySQL常用语句 #操作数据库 ##创建数据库 CREATE DATABASE `dbName`; ##切换数据库 USE `dbName`; ##查看所有数据库 SHOW DATABASES; # ...

随机推荐

  1. Kinect for Windows V2和V1对照开发___彩色数据获取并用OpenCV2.4.10显示

    V1彩色分辨率:640x480 V2彩色分辨率:1920x1080 1,打开彩色图像帧的方式 对于V1: 使用NuiImageStreamOpen方法打开 hr = m_PNuiSensor-> ...

  2. iOS中block实现的探究

    [0. Brief introduction of block] Block是iOS4.0+ 和Mac OS X 10.6+ 引进的对C语言的扩展,用来实现匿名函数的特性. 用维基百科的话来说,Blo ...

  3. C#文件的拆分与合并操作示例

    C#文件的拆分与合并操作示例代码. 全局变量定义 ;//文件大小 //拆分.合并的文件数 int count; FileInfo splitFile; string splitFliePath; Fi ...

  4. Windows server 2008系统下FTP服务器的安装

    一.在 Windows 服务器上安装 FTP 服务 1. 在"开始"菜单上,单击"管理工具",然后单击"服务器管理器". 2. 在" ...

  5. linux文件解-压缩

    常用: 解压tar.gz包  使用命令:tar -zxvf  file.tar.gz   -z 指有gzip的属性  -x 解开一个压缩文件的参数  -v解压过程中显示文件  -f放最后接filena ...

  6. 2、第2节课html教程客户端控件/css第一课/20150917

    1.<form> 标签 提交 <form action="http://www.baidu.com" method="post'> </fo ...

  7. django: form fileupload - 2

    继续介绍文件上传的第二种形式和第三种形式. ------------------------------------------------------------- 第二种形式较简单,直接用 DB ...

  8. Senparc.Weixin.MP SDK 微信公众平台开发教程 索引

    Senparc.Weixin.MP SDK从一开始就坚持开源的状态,这个过程中得到了许多朋友的认可和支持. 目前SDK已经达到比较稳定的版本,这个过程中我觉得有必要整理一些思路和经验,和大家一起分享. ...

  9. spring项目中监听器作用-ContextLoaderListener(项目启动时,加载一些东西到缓存中)

    作用:在启动Web容器时,自动装配Spring applicationContext.xml的配置信息. 因为它实现了ServletContextListener这个接口,在web.xml配置这个监听 ...

  10. Arcgis Server ecp(许可)

    Arcgis Server 10 许可(新建.txt文件,然后拷贝好以下内容,然后修改为 .ecp文件即可): 3dengine,100,ecp.arcgis.server,none,KGE784S1 ...