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 - 锐客网
用户名:
密码:
性别:
爱好: 篮球 编程 游泳
照片:
城市:
简介:



    推荐阅读