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. 数据库(SQLITE3函数总结): sqlite3_open, sqlite3_exec, slite3_close,sqlite3_prepare_v2,sqlite3_column_text,

    Sqlite3 的确非常好用.小巧.速度快.近期研究它,有一些收获,这里把我对 sqlite3 的研究列出来,以备忘记. 导入SQLLite library并引入头文件. libsqlite3.dyl ...

  2. TortoiseGit和msysGit安装及使用笔记（windows下使用上传数据到GitHub）[转]

    TortoiseGit和msysGit安装及使用笔记(windows下使用上传数据到GitHub) Git-1.7.11-preview+GitExtensions244SetupComplete+T ...

  3. linux 下文件的比较

    1.cmp命令,比较两个文件是否相同 比较文件test1和test2,如果这两个文件完全相同,则无任何输出,否则,输出第一处不同所在的字节以及行号,然后忽略后面的不同之处,退出命令的执行. [root ...

  4. Cookie[1]

    1.什么是Cookie Cookie是一小段文本类型的数据,由服务器发送,并保留在客户端的计算机上. 2.Cookie的作用 服务器可以利用Cookie包含的信息来筛选并经常维护这些信息,以判断在Ht ...

  5. C#SaveFileDialog的使用

    SaveFileDialog sfd = new SaveFileDialog(); //默认打开的路径 sfd.InitialDirectory = "C:\\Users\\Adminis ...

  6. MySql 1045错误

    配置时以管理员身份运行MySQL Instance Configuration Wizard 当你登录MySQL数据库出现:Error 1045错误时(如下图),就表明你输入的用户名或密码错误被拒绝访 ...

  7. POJ 1151 - Atlantis 线段树+扫描线..

    离散化: 将所有的x轴坐标存在一个数组里..排序.当进入一条线段时..通过二分的方式确定其左右点对应的离散值... 扫描线..可以看成一根平行于x轴的直线..至y=0开始往上扫..直到扫出最后一条平行 ...

  8. 3步学会用gulp

    1.安装gulp 安装gulp到全局:npm install -g gulp 安装gulp到某个项目:npm install --save gulp 注意:请先安装nodejs(自带npm) 2.创建 ...

  9. Git学习笔记01--初始化设置

    1.查看git版本 $ git --version 2.设置用户姓名和邮箱 $ git config --global user.name “Craftor” $ git config --globa ...

  10. 为什么ELF文件的加载地址是0x8048000

    在一个进程的虚拟地址空间中,ELF文件是从0x8048000这个地址开始加载的,为什么会是这个地址? 回答:用命令ld --verbose可以看到0x08048000,ld的默认脚本用这个地址作为EL ...