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. Android 开发 对话框Dialog dismiss和hide方法的区别

    http://ningtukun.blog.163.com/blog/static/186541445201310151539697/ dismiss和hide方法都可以隐藏对话框,在需要的时候也可以 ...

  2. 怎么给iOS项目打包

    1  首先要选中项目中的真机測试,不要模拟器 ,然后从上边的菜单条中找product watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29tZXJhaW43 ...

  3. JavaScript经典魔力代码

    是什么使得JavaScript不同于其他程序设计语言,在浏览器修饰方面表现出其优异的特性?毫无疑问,JavaScript在Web应用领域受到的好评,既源于它自身灵活的动态特性,也源于浏览器对它充分的支 ...

  4. 你的第一Windows程序——管理应用程序状态

    MSDN原文(英文) 管理应用程序状态 一个窗口过程仅仅是一个为每个消息获取调用函数,所以它本质上是无状态的.因此,你需要一个方法来跟踪你的应用程序从一个函数调用下一个函数的状态. 最简单的方法是把一 ...

  5. SEOer怎样安排一天的工作

    昨天一文谈到seo车型优化恐惧了,一些兄弟果断说,不玩seo.妮子不是吓人的,希望大家好好看清自己如今行业现状,怎样突破下步,如今仅仅剩下竞价和B2B付费平台了吗?每天坚持博客更新,尽管不像那些名博那 ...

  6. 解决蛋疼的阿里云单CPU使用率的问题。

    工作中涉及到阿里云的应用.在性能测试阶段,压测过程中只要一个CPU未使用满,第二个CPU以至于第三个和第四个CPU完全用不到. 后来和阿里云的同事沟通他们现在用的是单队列的网卡,只能靠RPS/RFS这 ...

  7. linux查看系统版本

       RHEL7.0以下,查看系统版本的方式: [rusky@rheltest1 ~]$ cat /proc/version Linux version -.el6.x86_64 (mockbuild ...

  8. 关于一个下载的源代码中的”*.vssscc“文件的问题

    今天下载了一份程序的源代码,老是提示我要连接源代码管理服务器,这个……你的账号密码我怎么知道,有木有.于是上网搜罗了一番找来了解决方案,在这里分享给可能出现同样问题的童鞋. 首先说明一下什么是vsss ...

  9. 用ueditor上传图片、文件等到七牛云存储

    ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll, ...

  10. Objective-C 引用计数：不讲用法，只说原理

    本文所使用的源码为 objc4-647 和 CF-1153.18 实际上这是我本周实习周报的一部分,写的比较仓促,如有差错还请多多指正. 不讲用法,只说原理. 引用计数如何存储 有些对象如果支持使用 ...