HTML基础教程-优快云博客

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>

</ol>

<ol>标签属性

type：决定的是列表前的标号；

start：从哪开始；

*无序列表

<ul>

</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>括起来
1. action：提交路径
2. method：提交方式
文本框:
1. <input type=”text”/>
  1. name
  2. value
  3. size
  4. maxlength
  5. readonly
密码框：
1. <input type=”password”/>
单选按钮：
1. <input type=”radio”/>
  1. Checked：默认选中
复选框
1. <input type=”checkbox”/>
  1. Checked：默认选中
下拉列表框
1. <select><option></option></select>
  1. Selected：默认选中
  2. Multiple：全部显示
文件上传项
1. <input type=”file” name=”file”/>
文本区
1. <textarea name=”” cols=”” rows=””></textarea>
提交按钮
1. <input type=”submit” value=”注册”>
重置按钮
1. <input type=”reset” value=”重置”>
普通按钮
1. <input type=”button” value=”普通按钮”>
隐藏字段
1. <input type=”hidden” name=”id”/>