HTML技术
- HTML的概述
HTML是指超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。标记语言就是通过标签对内容进行描述的一门语言。
HTML是最基础的网页语言,只要编写网页,都需要HTML语言。
- HTML的语法与规范
2.1 HTML的规范
HTML是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
2.2 HTML的语法
HTML语言文件的扩展名是.html或.htm;
HTML语言文件中的一组标签是不区分大小写的,但尽量使用小写;
HTML语言文件中的标签通常是由一组开始标签和结束标签组成,如:<body></body>;但是也有单个标签的情况,如:<br/> 换行标签。
标签中包含属性,用改变属性的值来调整网页,如:<font>标签,用来标记文字,其中标签包含color与size属性,color用来调整文字的颜色,size用来调整文字的大小。
- HTML的基本格式
<html>
<head>
头标签中用于存放HTML文件的一些属性和一些引入外部的样式等,如css、js等
</head>
<body>
体标签用于存放网页要展示的内容
</body>
</html>
- HTML的标签与属性
4.1排版标签
*<p></p>:代表段落标签,其特点是上下产生空行
*<br/>:代表换行标签,将文字换到下一行
*<hr/>:代表在网页上设置一条水平线,其中包含color与width两个属性
* color 颜色,值有两种写法
* 直接编写英文单词
* RGB三原色(red green blue) #aa34cc
* width 宽度,值有两种写法
* 直接编写像素值 300px
* 编写百分比 30%
* 区别:像素值是固定值,百分比会随着浏览器的大小的变化而改变
4.2 文字标签
*<font></font>:代表字体标签,其中包含color、size和face属性
* color 字体颜色
* size 字体大小
* 最大值 7
* 最小值 1
* 默认值 3
* 值的写法
* 直接书写数字
* +数字(+2 代表默认值+2)
* face 字体类型
*<h1></h1>:标题标签,其中从h1到h6越来越小,默认换行、加粗。
*<b></b>:代表粗体标签
*<i></i>:代表斜体标签
4.3 图片标签
*<img/>:代表图片标签,其中包含src、width、height和alt属性
* src -- 要显示的图片的地址路径,路径分两种,绝对路径和相对路径;相对路径* ./ -- 代表当前路径, * ../ -- 代表上一级路径
* width -- 图片显示的宽度
* height -- 图片显示的高度
* alt -- 图片的说明文字
4.4超链接标签
*<a></a>:代表超链接标签,其中包括href和target属性
* 链接资源必须要使用 href属性
* 注意1:如果访问的网络的资源,需要编写http的协议。默认是file文件的协议。
* 注意2:链接本地的资源,如果浏览器可以解析的资源,默认打开了,如果不恩能解析的资源,弹出下载的窗口。
* 打开位置:target属性
* _blank -- 打开新的窗口
* _parent -- 在父窗口打开
* _self -- 在当前的窗口打开,默认值
4.5 列表标签
*有序列表
<ol>
<li></li>
</ol>
<ol>标签属性
type:决定的是列表前的标号;
start:从哪开始;
*无序列表
<ul>
<li></li>
</ul>
<ul>标签的属性
type:决定的是列表前的标号;
4.6 表格标签
*<table></table>:代表表格标签,常用属性有:
* border -- 边框的宽度
* width -- 表格的宽度
* height -- 表格的高度
* bgcolor -- 表格的背景颜色
* backgroud -- 背景的图片
* align -- 对齐的方式
*<tr></tr>:代表行标签,常用属性有:
* align -- 行的对齐方式
* bgcolor -- 设置每一行的颜色
*<td></td>:代表单元格标签,常用属性有:
* 列合并单元格 -- colspan
* 行合并单元格 -- rowspan
4.7 表单标签
表单标签:
- 需要提交的表单需要使用<form></form>括起来
- action:提交路径
- method:提交方式
- 文本框:
- <input type=”text”/>
- name
- value
- size
- maxlength
- readonly
- <input type=”text”/>
- 密码框:
- <input type=”password”/>
- 单选按钮:
- <input type=”radio”/>
- Checked:默认选中
- <input type=”radio”/>
- 复选框
- <input type=”checkbox”/>
- Checked:默认选中
- <input type=”checkbox”/>
- 下拉列表框
- <select><option></option></select>
- Selected:默认选中
- Multiple:全部显示
- <select><option></option></select>
- 文件上传项
- <input type=”file” name=”file”/>
- 文本区
- <textarea name=”” cols=”” rows=””></textarea>
- 提交按钮
- <input type=”submit” value=”注册”>
- 重置按钮
- <input type=”reset” value=”重置”>
- 普通按钮
- <input type=”button” value=”普通按钮”>
- 隐藏字段
- <input type=”hidden” name=”id”/>
提交方式:
- GET :默认值
- 提交的数据都会在地址栏中进行显示
- 提交的数据的时候是有大小的限制
- POST :
- 提交的数据不会再地址栏中进行显示
- 提交的数据没有大小限制
4.8 框架标签
<frameset>
</frameset>
* 使用了frameset标签,不需要使用body.
* 属性:
* rows:横向切分页面
* cols:纵向切分页面
<frame>标签代表切分每个部分的页面
* src:引入页面的路径
点击分类管理,将数据放入到表格中显示到右侧区域中!
在frame上添加一个属性name,在超链接的target属性上设置这个名称。点击超链接的时候,跳转到指定的位置。
<h3><a href="data.html" target="right">分类管理</a></h3>