HTML基础入门30分钟搞清楚.docx
- 文档编号:18511633
- 上传时间:2023-08-19
- 格式:DOCX
- 页数:18
- 大小:23.25KB
HTML基础入门30分钟搞清楚.docx
《HTML基础入门30分钟搞清楚.docx》由会员分享,可在线阅读,更多相关《HTML基础入门30分钟搞清楚.docx(18页珍藏版)》请在冰点文库上搜索。
HTML基础入门30分钟搞清楚
HTML
HTML
1、HTML的概述
1.1、HTML简介
●HTML(HyperTextMarkupLanguage):
超文本标记语言。
文本:
记事本中写内容(仅仅用来展示信息的)
超文本:
超越了文本的范畴
语言:
沟通工具
>标记就是标签
>HTML不是一种编程语言,而是一种标记语言
●作用:
*就是用来写网页的
1.2、HTML的书写规范
a).HTML的创建
可以使用文本编辑器来创建,扩展名html或htm
可以被IE(浏览器)解析浏览的。
b).HTML的结构
c).Html标签的规范
*Html是由一对尖括号包裹着的关键字组成的。
例如:
*HTML标签都是预定义的,都是有自己的意思
*HTML通常是成对出现的,是由一个开始标签和一个结束标签组成的。
例如:
特殊情况:
HTML的空标签。
例如:
HTML的空标签就是没有内容体的标签。
*HTML标签通常是有属性的。
属性格式:
属性名=”属性值”可以用双引号、单引号或者不加引号。
建议使用引号的。
例如:
*HTML是可以嵌套使用的。
(只允许包裹嵌套,不允许交叉嵌套)
*HTML是大小写不敏感的。
推荐使用小写
*浏览器解析HTML代码会忽略代码中的空格和换行
2、HTML的基本标签(链接标签、表格标签)
2.1、文件标签(了解)
●标签
相当于JAVA类中的大括号
声明了该文档是一个HTML文档。
包裹了整个HTML文件
●
标签网页的说明信息。
它里面的内容是不会显示。
●
它是网页的标题
●
负责显示页面的
它里面的内容是会显示的
*属性:
>text设置body标签内容体中正文的颜色
>background设置body背景图片background和bgcolor相互覆盖的
>bgcolor设置body的背景颜色
扩展:
1、HTML的颜色设置(美工部分知识,了解)
●颜色关键字例如:
red,blue,pink
●颜色代码。
例如:
#000000。
每一位都是16进制。
红色、绿色、蓝色0~9A~F
●三原色。
Redgreenblue例如:
rgb(0,0,0)每一位取值0~255
2、绝对路径和相对路径(重要)
绝对路径:
文件在硬盘上的具体位置。
相对路径:
文件相对于引入者的位置。
(文件相当于图片,引入者HTML)
/和\均可
这两个使用效果上什么区别都没有
只是\还代表转译
2.2、排版标签(了解)
●
标签
*就是一个换行
● 空格占位符
*是一个空格
●HTML注释
*格式:
--注释内容-->
●
标签
*就是一个段落标签。
段前段后各加一行
*属性:
>align设置段落的对齐方式
●
标签(少)
*就是一条水平线
*属性:
>color设置水平线的颜色
>size设置水平线的粗细
>width设置水平线的长度
扩展:
1、HTML长度设置(美工部分知识,了解)
像素:
width=”6”或者width=”6px”长度是固定
百分比:
width=”80%”.它会随着浏览器改变而改变长度是不固定
2.3、块标签(熟练)
●
在文档中设定一个块区域
块级元素(自动换行)
●
在行内设定一个块区域
内联元素(不自动换行)
HTML绝大多数都属于块级元素或者内联元素
2.4、字体标签(少)(了解)
●标签(少)
*设置字体的大小、颜色、字体类型
*属性:
>color设置字体颜色
>size设置字体大小取值范围1~7
>face设置字体类型。
●标题标签
*h1~h6
*h1最大,h6最小
●斜体、粗体标签
*斜体标签
*粗体标签
●滚动字幕(了解)
(marquee标签)
*只兼容IE,所以不建议使用
2.5、列表标签(熟练)
●有序列表(ol标签)(使用较少)
*属性
>type设置有序列表的项目序号。
A,I,1
>start设置有序列表的项目序号起始值。
●无序列表(ul标签)(常用)
*属性:
>type设置无序列表的项目标号。
●列表项条目(li标签)
1.Android
2.Ios
3.J2ee
2.6、图片标签(熟练)
●
*属性:
>src设置图片引入路径的(常用)
>alt设置替代图片的文字(常用)
>width设置图片的宽度
>height设置图片的高度
>border设置图片的相框宽度
>align设置图片的对齐方式(不建议使用)
2.7、链接标签(重点)
超链接
●标签
*属性:
>href设置链接路径(常用)
访问内网:
可以用相对路径和绝对路径(#代表本页)
访问外网:
需要加上http协议。
例如:
>name设置锚点(常用)
配合herf使用
设置锚点,a标签可以没有内容体
>target定位资源打开位置。
一般可以配合框架使用。
例如:
那么就是在名字为top的框架中打开。
*注:
如果要实现跳转链接,那么必须有内容有href属性。
例如:
2.8、表格标签(重点)
表格用来规范化格式化数据。
年度财务报表
部门
第一季度
第二季度
平均
A
100
100
100
B
100
100
总共
400
●表格标签
*table,用来定义一个表格
●行标签
*tr,用来定义一个表格内的行
●单元格标签
*td,用来定义一个单元格。
*th,用来定义一个表头单元格。
默认居中加粗
*td及th属性:
>colspan列合并(不同列的单元格合并)
>rowspan行合并(不同行的单元格合并)
●表格标题标签
*caption,用来定义一个表格标题
*必须紧跟在table标签之后.一个表格只有一个标题
●分组标签(了解)
*对表格中的行进行分组
*thead定义表格的页眉。
仅有一个
*tbody定义表格的主体。
一个或多个
*tfoot定义表格的页脚。
仅有一个
*如果在分组标签外定义了行,那么行默认属于TBODY
*分组标签如果使用必须三个一起使用,否则无效果。
*如果没有没有对表格行进行分组,火狐浏览器在解析时会自动为表格进行分组,所有的表格行自动划分进一个tbody中
分行下载:
可以控制表格分行下载,从而提高下载速度。
在需要分行下载处加上
和。公司年度报告
第一季度
第二季度
平均
100
100
100
100
100
400
3、HTML的表单标签(重点)
作用:
表单用来提交用户输入的数据,整个WEB程序的入口。
表单由:
表单和表单输入项组成。
3.1、表单标签
*
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 基础 入门 30 分钟 搞清楚