html学习笔记

        从2015年十一长假开始正式自学前端，到现在的这几天也整理了一些笔记，从今天开始复习整理，并把新学的内容笔记记在这里，整理思路，鼓励自己，同时也防止电脑出问题资料丢失。加油~

       

◆  html的介绍

html 是一种标记语言，主要的用途是开发网页，使用html可以展现文字、图片、视频、声音...

html 是我们web开发（网页开发）的基础

 

网页设计师（html+css+js+flash+美工）

◆  发展历程

1993年第一个版本----->>>>1999年 html4.01----->>>>html5.0

 

                   xhtml（发展）

 

◆  w3c

w3c是制定web（html，xml）标准的机构

 

◆html的运行原理

 

1 本地运行

 

 

html文件  使用  浏览器（软件）运行

视频文件  使用  暴风软件      运行

 

2 远程访问运行

 

除了开发测试外，其他时候都是用远程访问html文件

 

快速体验

开发hello.html，放在tomcat（还不会用）下

 

◆ html的基本结构

不管这个thml文件有多复杂，它的基本结构式：

<元素 属性=属性值。。。><元素>

 

   元素就是标记

 

 

案例：

 

 

段落标记

“”>字号标记 size 取值可以为1到7

标题字体#=1,2,3,4,5,6

字体加粗

 

html 的代码：

 

第一个creabine

第二个creabine

第三个creabine

第四个Creabine

 

 

**********字符实体案例*****************

 

©£®

◆注意

（段落，跟上下的其他部分留一段空白）和
（仅换行）的区别

◆取色工具

◆html的字符实体（用实体名称）

◆html的超链接

 

使用超链接，可以让网页连接到另外一个页面

举例

 

**********超链接案例*****************

 

老鼠爱大米

 

百度首页

 

◆ 说明href 可以连接到外部网站   注意href拼写

 

◆ html文件不区分大小写

 

 

◆html图片元素（标记）

 

 

也可以是  ’图片的路径’ width=’宽度’ height=’高度’/>，直接/，省略后边的

 

案例

***************图片元素********************

爱我别走1.gif' width=270px height=100px/>

爱我别走1.gif' width=270px/>

 

 

 

特别说明  src可以是外部网站的一个图片  url

 

◆html表格案例

表格的主要用途是显示数据和图片，并且可以起到网页布局的作用

 

 

 

案例：

******************表格******************

 

124

 

基本语法

*表格的元素  名称是  table

*表示行

*表示列

*cellspacing 表格空隙大小，格子间的距离大小

*cellpadding 表示填充大小，每个格子的大小。 能在一定程度上把格子撑大，表格变大。

*可以用表示表头，自动加粗里边的字 

*可以用width height设置表格大小

*可以用valign设置表格里边的字显示在哪里，可以是上中下，默认居中；align控制左右中，默认中。

*表格可以加背景色

表格菜谱实例：  时常回顾不然会忘记

 

 

程序：

 

星期一菜谱

 

素菜青草茄子花椒扁豆

小葱豆腐炒白菜

荤菜油焖大虾海参鱼翅

红烧肉爱我别走1.gif' width=80px>烤全羊

 

 

 

 

显示：

 

 

html无序列表  ul-li，列表前边是三角，菱形等

案例：

 

 

代码：

 

 

传奇

反恐

跳舞团

◆ html 的有序列表

 

案例：

 

 

代码：

 

***********有序列表************

 

传奇

反恐

跳舞团

 

*若无type默认为1（数字顺序）;a/A（字母顺序）;i/I(罗马数字)，一共5种

*只有当type类型为数字，也就是type=1的时候，可以用start，这个属性可以定义排序从几开始，start=6，也就是排序是6、7、8、9……

 

 

◆html 的框架标记（元素）  frameset/framef

 

案例：

 

 

基本语法：

属性..../>

 

代码：

 

把aa和bb放入 all。

 

 

 

aa.html

 

周杰伦的歌

 

bb.html

 

陈奕迅的歌

 

all.html ,

 

 

 

*all.html文件中不能带body标记，否则不显示

*frameborder=0  边框宽度为0

*noresize    禁止重置大小，不加这个属性，网页上可以自由用鼠标拖拽改变分割百分比

 

综合案例：

 

 

程序：

top.html

 

 

left.html  

 

青花瓷

呵呵呵

 

right1.html

 

right1.html文件内容青花瓷

 

righ2.html

 

right2.html文件内容呵呵呵

 

all2.thml

 

 

 

 ◆html的表单元素

介绍：html的表单元素，主要用于让用户输入数据，并提交给服务器

基本语法是：

  

 

各种元素{输入框，下拉列表，文本域，密码框……}

案例1：

代码：

登录界面

用户名：

密　码：

密  码：

*从上边的案例可以看出：

1.    表单元素的格式：

 

type=    text【文本框】  password【密码框】  hidden【隐藏框】  checkbox【复选框】  radio【单选框】   submit【提交按钮】   reset【重置按钮】  image【图片按钮】

name  是你给该表单元素取的名字

2. action 指定把请求交给哪个页面

◆input元素的举例说明

代码：

您的姓名：


密　　码：

*******喜欢的水果**********

香蕉

苹果

*****选择性别*****

男

女




*****隐藏(它的用处主要是，即可提交数据，同时不影响界面)****

这里有一个隐藏的表单元素

****下拉选择****

请选择你的出生地：

--请选择--
哈什
兰州
厦门

********请留言*********

请在这里输入.....

***选择你要上传的文件***

请选择文件

◆html加强

1.

程序；

baidu

你好~！！

********标尺线******

---

*********字体大小*****

标题

标题

标题



**物理字体****

测试

测试

***字体（默认宋体）****

标题

标题

标题

2.

新窗口

本窗口

父窗口

整个浏览器窗口

***文字的分区显示div****

你好

名字

外号

***块引用****

fajsdklfj

***闪烁,有的浏览器不认****

金闪闪

***图片，加上alt属性，当网速慢等原因造成图片无法显示时，可以显示替代的文本****







***跑马灯****

我会跑~~~

******嵌入多媒体文件*******

*****************综合案例**************

案例：

程序：

	用户名 密码框 找回密码　　注册用户