html简介

一、表格标签

表格也是一个组标签！

1.1表格的基本用法

<table>

         <tr>

                   <td>单元格的内容</td>

                   <td>单元格的内容</td>

</tr>

</table>

 

结构说明：

l  <table></table>表示表格开始表格结束

l  <tr></tr>表示表格中的行标签  一个表格中有多少行就应该书写多少对tr标签

l  <td></td>表示表格中的单元格标签  一行中有多少个单元格就应该书写多少对td标签

l  表格中所有的内容都必须在放置在td标签里面  也就是说只有td标签才能存放内容

l  <th></th>表示标题单元格  这个单元格里面的文本会加粗显示并且会居中

1.2table标签的常用属性

属性名	功能
border	给表格设置边框   单位是像素  取值：0~n
width	给表格设置宽度   取值：固定值和百分比
height	给表格设置高度   一般不用 因为表格的高度一般是由其内容来决定的
background	给表格设置背景图片   可以使用相对路径和绝对路径
bgcolor	给表格设置背景颜色
align	给表格设置水平方向的对齐方式   取值：left(居左对齐   默认值)       center 居中对齐       right   居右对齐
cellpadding	表格中单元格中的内容到边框的距离  内填充
cellspacing	表格中单元格与单元格之间的距离  外边距

1.3tr标签的属性

属性名	功能
align	用来设置行里面的内容水平方向对齐方式 取值：left  默认值  居左对齐       center  居中对齐       right    居右对齐
valign	用来设置行里面的内容垂直对齐方式 取值：top  顶部对齐       middle  居中对齐  默认值       bottom  底部对齐
bgcolor	给行设置背景颜色
height	给行设置高度

 

1.4td标签的属性

属性名	功能
align	用来设置单元格里面的内容水平方向对齐方式 取值：left  默认值  居左对齐       center  居中对齐       right    居右对齐
valign	用来设置单元格里面的内容垂直对齐方式 取值：top  顶部对齐       middle  居中对齐  默认值       bottom  底部对齐
bgcolor	给单元格设置背景颜色
height	给单元格设置高度
width	给单元格设置宽度
rowspan	跨行合并单元格
colspan	跨列合并单元格

在实现合并单元格：

1.        一定要明白我们是跨列合并还是跨行合并

2.        要明确的知道在哪一个单元格中书写合并单元格的属性

3.        要明确的知道要合并多少个单元格  合并多少个单元格  那么就是多少

4.        合并后要删除对应的单元格  n-1

 

二、表单初步

1.1表单的主要功能

表单它主要是用来收集用户输入的相关数据！

表单初步：

注意：

         一个完整的表单，是由“form标签”和“表单控件标签”组成！

2.2 form标签的属性

Ø  action：将表单中收集的用户数据提交给“表单的处理程序”进行相关的处理！这个属性可以不写如果不写表示将表单的数据提交给当前页面进行处理！        

有指明action属性

没有写action属性

Ø  method：指表单数据的提交方式   取值：get|post

n  get：如果说method属性没有书写则默认表示表单数据以“get”方式进行提交  以get方式进行提交的数据会显示在浏览器的地址栏中

n  显示格式：表单处理程序?name的属性值=用户输入的数据& name的属性值=用户输入的数据

n  如果使用的是post进行提交的方式  不会将表单数据显示在浏览器的地址栏中  直接发送给表单的处理程序进行处理

get方式与Post方式之间的估缺点：

1、以get方式提交的表单数据 不安全

2、get方式只能提交少量的数据

3、post方式提交的数据相对安全

4、post方式可以提交大量的数据！

 

三、表单控件

3.1表单控件标签

单行文本框

         <input  type=”text”  name=”名称”  value=”值”   />

单行密码框

         <input  type=”password” name=”名称”  value=”值”   />

单选按钮

         <input  type=”radio” name=”名称”  value=”值”  checked=”checked”  />

一组单选按钮一定是只能选择一个  单选按钮是一组相互排斥的按钮！

如何实现相互排斥的按钮：将它们的name属性值设置为一样

checked：表示被选中  这个属性本身没有值  就等于其自己

多选按钮

         <input  type=”checkbox”  name=”名称”  value=”值”  checked=”checked”  />

         一组多选按钮name属性值也要一样！

checked：表示被选中  这个属性本身没有值  就等于其自己

文件上传

         <input  type=”file”  name=”名称”   />

 

隐藏域

         <input  type=”hidden”  name=”名称”  value=”值”/> 

         隐藏里面的表单控件我们在浏览器上面是看不见的！但是这个数据也可以被提交给表单的处理程序进行处理！

 

 

 

提交按钮

         <input  type=”submit”  value=”值”    />

重置按钮

         <input  type=”reset” value=”值”    />

         将表单中表单控件标签输入的内容将其重置！

图片按钮

         <input  type=”image”  src=”图片的地址”   />

图片按钮它具有将表单进行提交的功能  同时它会将鼠标点击图片上面的坐标值也会进行提交！

普通按钮

         <input type=”button”  value=”值”/> 

         普通按钮几乎没有什么功能  它一般需要配合JavaScript来使用！

 

 

 

 

使用<button></button>标签来实现按钮

l  提交按钮   <button type=”submit”>内容</button>

l  重置按钮   <button type=”reset”>内容</button>

l  普通按钮   <button type=”button”>内容</button>

 

 

 

下拉列表

         <select  name=”名称”>

                   <option value=”值”></option>

                   <option value=”值”  selected=”selected”></option>

                  <option  value=”值”></option>

</select>

selected：这个属性表示被选中  这个属性本身也没有值  其值也要等于自己

 

文本域（多行文本框）

         <textarea  cols=”列数”  rows=”行数”  name=”名称”></textarea>

四、标签中的通用属性

何为通用属性？

         每一个标签中都会拥有的属性！

Ø  title：标题  当鼠标放上的时候显示的文字信息！

Ø  class：我们将class的属性值称之为“类名”，只要是拥有相同的class的属性值  不管是什么标签  我们都可以将其称之为一类！class属性一般多用于CSS中

Ø  id：id的属性值必须是唯一的  在一个HTML文档中 ID的属性值必须要唯一！它就好多我们的身份证号码一样！id属性一般多用于JavaScript中

Ø  style：它主要是用来设置CSS样式的！

五、计算机的单位与进制

5.1计算机中的单位

计算机中的最小单位：比特(Bit)   1个比特位  = 2种状态  1与0 (二进制)

字节(Byte)                          1个字节 = 8个比特位  256种  2⁸

KB                                          1KB= 1024字节

MB                                        1MB= 1024KB

GB                                        1GB= 1024MB

TB                                          1TB= 1024GB

 

5.2计算机中的进制

进制：它是一种进位的机制！

生活中的进制：

十进制

24小时1天

60分钟1小时

365天1年

7天1周

 

计算机中的进制

二进制：0、1     运算规则：逢二进一  

八进制：0、1、2、3、4、5、6、7   运算规则：逢八进一

十进制：0、1、2、3、4、5、6、7、8、9   运算规则：逢十进一

十六进制：0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F   运算规则：逢十六进一

 

将其它的进制转换为十进制

按权展开相加

123456 =  1*10₅+2*10₄+3*10₃+4*10₂+5*10₁+6*10⁰

(1101)₂ =      (1*2³+1*2²+0*2¹+1*2⁰)₁₀    13

(567)₈ =   (5*8²+6*8¹+7*8⁰)₁₀

(ABC)₁₆ =   (10*16²+11*16¹+12*16⁰)₁₀

 

将十进制转换为二进制

整数部分  ---à除2取余法

(67)₁₀ =   (100011)₂

六、字符编码

6.1为什么需要有字符编码？

计算机只能识别二进制

字母”A”在电脑上是如何存储的呢？

小张的电脑上面字母“A”是使用二进制的“110”来表示，而小王的电脑上面的字母“A”是使用二进制的“111”来表示，当小张与小王的电脑进行通信时，这样双方交换信息时就会误解。

6.2ASCII编码

美国国家标准学会 于1967年制定的！美国标准信息交换码！它是使用1个字节来存储字符！共可以存储256个字符！

6.3GB2312

GB2312字符编码它是中国标准化局于1980年制定！它是使用2个字节来存储字符！2个字节共可以存储65536个字符！只存储了6000多个一级汉字！一个汉字是采用2个字节来表示

 

6.4GBK

它是使用2个字节来存储字符！它总共存储了2W多个汉字！

 

6.5Unicode

基本上是全世界的编码的集合！大概收录了100多个万字符！每一个字符都采用4个字节来进行表示！4个字节共可以表示42亿！比较浪费资源！

6.6UTF-8

对unicode编码的一种改进，不同的字符占用不同的字节！

七、head标签

7.1title标签

它主要的作用是用于给网页设置标题！

7.2meta标签

用于告诉浏览器使用什么字符编码来解析当前的HTML文件

如何防止网页不出现乱码？

为什么使用记事本来编辑HTML代码没有出现乱码？

1、浏览器它默认是使用GBK来解析HTML文件

2、记事本这个软件的编码环境默认就是GBK

 

 

为什么使用sublime来编辑HTML代码就会出现乱码？

1、浏览器它默认是使用GBK来解析HTML文件

2、sublime这个软件的编码环境默认就是UTF-8

 

 

如果使用其它的编辑器来编辑HTML代码，需要设置meta标记

1.        将meta标签的charset属性的值设置为UTF-8

八、网页中的颜色表示方式

<font  color=”red”></font>用于给文本设置大小、字体、颜色

 

8.1颜色的表示方式

Ø  英文单词：red、green、blue

Ø  十进制：rgb(255,0 ,0)、rgb(0,255,0)、rgb(0,0,255)

Ø  十六进制：#FF0000    #00FF00     #0000FF

将十六进制的FF转换为十进制：   15*16¹+15*16⁰ =255

 

 

8.2RGB色彩模式

Ø  在自然界中有三种基本的颜色：红、绿、蓝  其它的颜色都可以通过这三种基本色混合而成！它们又称之为加色模式！

Ø  在计算机中同样也是有三种基本色：红、绿、蓝  每一个基本色是使用1个字节来表示 每一个基本色共可以表示256种级别的颜色！那么这三种基本色可以混合多少种颜色？256*256*256 = 1677万种

 

使用编辑器来分别的使用这三种颜色的表示方式：

通过上图可知：以后使用颜色的表示方式最好使用十六进制！因为十六进制在三种浏览器上面的兼容性最好！