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. 学习手机游戏开发的两个方向 Cocos2d-x 和 Unity 3D/2D，哪个前景更好？

    如题! 首先说一说学习手机游戏(移动游戏)这件事. 眼下移动互联网行业的在以井喷状态发展.全球几十亿人都持有智能终端设备(ios android),造就了非常多移动互联网创业机会: 一.移动社交 微信 ...

  2. MVC三和，你能辨别它？

    上次我们聊的时间MVC,而之前我们学习过三层.那么我们不禁就要问,他们说的是一回事吗.他们有什么联系吗? 三层架构(3-tier application)通常意义上的三层架构就是将整个业务应用划分为: ...

  3. 内容观察者 ContentObserver 监听短信、通话记录数据库 挂断来电

    Activity public class MainActivity extends ListActivity {     private TextView tv_info;     private  ...

  4. MenuButton( 菜单按钮)

    一． 加载方式//class 加载方式<a href="javascript:void(0)" id="edit" class="easyui- ...

  5. hdu 2025

    水题 AC代码: #include <iostream> using namespace std; int main() { char a[100],*p; int max,i; whil ...

  6. for语句应用：乘法表

    乘法表: for语句应用: 1: 2: public class chengfa { 3: public static void main(String[] args) { 4: //int i; 5 ...

  7. Java学习笔记（2）：jdk的配置

    配置Java的开发环境 先说明一下,我的jdk文件目录是:D:\language\java\java soft\jdk1.6 JDK的安装与配置 解压“开发软件”中的jdk1.6.rar(解压版)到D ...

  8. Centos6.5使用yum安装Mysql5.7

    想要玩新的东东就要付出代价,我的时间悄悄的都溜走了,说多了都是泪! 实践才是真理! 系统版本:Linux localhost.localdomain 2.6.32-431.el6.x86_64 #1 ...

  9. windows下配置lamp环境(4)---安装MySQL数据库5.6

    图解安装MySQL数据库 1.获取软件就多不说了 2.双击开始安装 3.点击点击NEXT进行下一步 4.同意协议,点击NEXT进入下一步 5.选择指定安装位置安装方法,进入安装位值选择页面: 6.分别 ...

  10. python学习第十八天 --错误&异常处理

    这一章节主要讲解python的错误和异常处理 什么是错误和异常?及其区别? 错误: 1.语法错误:代码不符合解释器或者编译器语法. 2.逻辑错误:不完整或者不合法输入或者计算出现问题.   异常:执行 ...