html入门

HTML 入门

一、HTML的概述

1、 HTML简介
l HTML(Hyper Text Markup Language):超文本标记语言。
>标记就是标签
>HTML不是一种编程语言,而是一种标记语言
l 作用:
*就是用来写网页的

2、 HTML的书写规范。
a).HTML的创建
可以使用文本编辑器来创建,扩展名html或htm
可以被IE(浏览器)解析浏览的。
b).HTML的结构







l html
包裹了整个HTML 文件
l head
网页的说明信息。
它里面的内容是不会显示。
l body
负责显示页面的
它里面的内容是会显示的
l title
它是网页的标题

c).Html标签的规范
*Html是由一对尖括号包裹着的关键字组成的。例如:<br /> *HTML通常是成对出现的,是由一个开始标签和一个结束标签组成的。例如:<title>
特殊情况:
HTML的空标签。例如:

*HTML标签通常是有属性的。属性格式:属性名=”属性值”可以用双引号、单引号或者不加引号。建议使用引号的。例如:真晴朗
*HTML是可以嵌套使用的。(只允许包裹嵌套,不允许交叉嵌套)
*HTML是大小写不敏感的。推荐使用小写


Insert title here 你好aaa



二、HTML的基本标签(链接标签、表格标签)
排版标签 l Br标签
*就是一个换行

l
*是一个空格

lHTML注释
*格式:

l P标签
*就是一个段落标签。段前段后各加一行
*属性:
>align设置段落的对齐方式
l Hr标签(使用较少)
*就是一条水平线
*属性:
>color设置水平线的颜色
>size 设置水平线的粗细
>width 设置水平线的长度


小知识:
1、HTML长度设置(了解)
像素:width =”6”或者width =”6px”
百分比:width =”80%”.它会随着浏览器改变而改变

2、 HTML的颜色设置(了解)
*颜色关键字例如:red,blue,pink
*颜色代码。例如:#000000。每一位都是16进制。红色、绿色、蓝色
*三原色。 例如:rgb(0,0,0) 每一位取值0~255

Insert title here 静夜思
李白
床前明月光,
疑是地上霜,
举头望明月,
低头思故乡。



块标签 l Div
在文档中设定一个块区域
块级元素(自动换行)
l Span
在行内设定一个块区域
内联元素(不自动换行)

HTML绝大多数都属于块级元素或者内联元素

Insert title here 我是DIV1 我是DIV2 我是SPAN1 我是SPAN2



字体标签(少) l Font标签(少)
*设置字体的大小、颜色、字体类型
*属性:
>color 设置字体颜色
>size 设置字体大小
>face 设置字体类型。

l 标题标签(一般)
*h1~h6
*h1最大,h6最小

l 斜体、粗体标签(比较)



l 滚动字幕(不建议)
(marquee标签)
*只兼容IE,所以不建议使用

Insert title here 你好aaa aaaa aaaa aaaa
aaaa aaaa aaaa 我是斜体 我是粗体 既是粗体又是斜体 既是粗体又是斜体



列表标签 l 有序列表(ol标签)
*属性
>type 设置有序列表的项目序号。 A,I,1
>start 设置有序列表的项目序号起始值。

l 无序列表(ul标签)(常用)
*属性:
>type 设置无序列表的项目标号。 (了解)


l 列表项条目(li标签)

Insert title here
  1. java
  2. .net
  3. php
  • java
  • .net
  • php




图片标签(常用) l html入门
文章图片



链接标签(重点) l
*如果要实现跳转链接,那么必须有内容。例如:内容
*属性:
>href 设置链接路径(最常用)
访问内网:相对路径,绝对路径
访问外网:需要加上http协议。 例如:http://www.baidu.com
>name 设置锚点(次常用)
相当于(书签)
配合herf使用
设置锚点,a标签可以没有内容
>target 定位资源打开位置。(了解会用)
一般可以配合框架使用。
例如:”xx.html” target=”top”>打开

那么就是在名字为top的框架中打开。

Insert title here 我是超链接 百度 返回顶部 返回中间


表格标签(重点) 年度统计
第一季度
第二季度
总共
100
100
400
100
100









平均100



Insert title here
年度报告
第一季度 第二季度 总共
100 100
100 100
平均100
年度报告
第一季度 第二季度 总共
100 100
100 100
100 100
100 100
100 100
100 100
平均100




l 表格标签
*table,用来定义一个表格
l 行标签
*tr,用来定义一个表格内的行
l 单元格标签
*td,用来定义一个单元格。
*th,用来定义一个表头单元格。默认居中加粗
*td及th属性:
>colspan 列合并
>rowspan 行合并
l 表格标题标签
*caption,用来定义一个表格标题
*必须紧跟在table标签之后
*一个表格只有一个标题

l 分组标签(了解会用)
*对表格中的行进行分组
*thead 定义表格的页眉。仅有一个
*tbody 定义表格的主体。一个或多个
*tfoot 定义表格的页脚。仅有一个
*如果在分组标签外定义了行,那么行默认属于TBODY
*分组标签如果使用必须三个一起使用,否则无效果。
分行下载:
可以控制表格分行下载,从而提高下载速度。
在需要分行下载处加上和。


公司年度报告
第一季度
第二季度
平均
100
100
100
100
100
400




三、HTML的表单标签(重点)
作用:表单用来提交用户输入的数据

l 表单标签:
*
,就定义了一个表单
*常用属性:
>action规定当提交表单时,向何处发送表单数据
内网提交:绝对路径和相对路径
向外网提交:http://www.baidu.com
>method规定如何发送表单数据(发送表单数据的方式)
post和get
默认是get

面试题:
表单提交 post和get的区别?
1、get方式提交会把参数显示在地址栏
post方式提交不会把参数显示在地址栏上

2、get方式敏感信息不安全
post方式敏感信息安全

3、get方式提交,官方限制提交大小仅1KB(但多数浏览器可以提交2KB)
post方式提交,提交大数据(提交附件用POST)

l 输入标签:
*input,定义了一个输入表单项,用来接收用户输入的信息。
*属性:
>type 指定输入标签的类型
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。非明文
单选框 radio 如:性别选择。
复选框 checkbox 如:兴趣选择。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值
附件框 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。例如:照片
隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。例如:用户编号
按钮button 可以为其自定义事件。
图片提交按钮 image 是一个图片形式的提交按钮。用来美化提交按钮的。提交表单数据时,会将鼠标点击图片的坐标一起封装。较少使用
>name 用来指定输入项的名称。即参数名称
>value 用来指定输入项的值。即参数值
>checked 用来设置单选框或者多选框的默认勾选。值为checked或true为默认选中
l 选择框标签
*select,定义了一个选择框
*属性:
>name 用来指定选择项的名称。即参数名称
*option,定义了一个选择框条目
*属性:
>value 用来指定选择项的值。即参数值
>selected 用来设置选择框的默认选中。值为selected为默认选中
l 文本域标签(常用)
*textarea,定义一个文本域输入框
*属性:
>name 用来指定文本域的名称,即参数名
>cols 定义文本域显示几列
>rows 定义文本域显示几行
区别:
1、文本域可以换行,而文本框不可以
2、文本域的值是写在内容体中的,文本框的值是在value中

注意:input select textarea 统称为表单项(表单输入项)


Insert title here 用户名:
密码:
性别:
爱好:篮球 编程 游泳
照片:
城市:
简介:aaaaaa




四、HTML的框架标签及特殊符号(了解)
其他标签(了解) 定义了页面信息
*存在于标签中

定义了文档和外部资源的关系
*存在于标签中
*用来引入CSS文件
特殊符号(了解) 不断行的空白符
< <小于号
> >大于号
& & &符号(经常用于传参)
" “ 引号
? ? 已注册
? ? 版权
框架标签(了解会用) 作用:将网页分割成几个部分,在每个部分分别显示不同内容。
注:框架标签不可以放到里,一般为了代码的可读性,会到和之间。或者不要body也可以。
l frameset
表示框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割。
*常用属性:
>cols 垂直切割。接收整数值或百分比。*代表占用剩余空间
>rows 横向切割。接收整数值或百分比。*代表占用剩余空间 吗
l frame
表示框架页面,用来承载页面,并修改参数属性值
*常用属性:
>src 表示资源的路径
>name 设置框架的名称
例如top中打开。那么xx.html是在top框架中打开


框架已经逐渐被DIV+CSS形式取代



作业
1、 简述get和post提交方式的区别
2、 用table和form组合在一起写一个注册表单。
3、 DIV和SPAN的区别

【html入门】
Insert title here
用户名:
密码:
性别:
爱好: 篮球 编程 游泳
照片:
城市:
简介:



    推荐阅读