您的位置：首页 > Web前端 > HTML

技术分析之HTML

2016-04-24 22:31 267 查看

HTML概述

1. 什么是HTML的语言？
* HTML是：HyperText Markup Language，翻译过来是：超文本标记语言
  * 超文本：比文本更强大的
  * 标记语言：通过一组标签对内容进行描述的一门语言。

2.  为什么要学习HTML
* HTML的最基础的网页语言，只要是编写网页，都需要使用HTML。

3.  HTML语言的简单语法和规范

    * HTML文件的扩展名是.html或者是.htm

    * HTML这组标签是不区分大小写，尽量使用小写

    * HTML的标记通常是由开始标签和结束标签组成：<b>内容</b> <br/>

* 标签中包含属性，改变属性的值，达到更好的显示效

4.  HTML标签的基本格式

<html>
<head>
HTML的属性的一些信息
引入一些外部的文件（CSS、JavaScript）
</head>
<body>
展示给用户的数据
</body>
</html>

HTML的标签

1. HTML的排版标签

  * <p></p> 段落标签，特点：上下会产生空行。

   * <br/> 换行标签
  * <hr/> 一条水平线
* color 颜色，值有两种写法
     * 直接编写英文单词
     * RGB三原色（red green blue） #aa34cc

   * width 宽度，值有两种写法
     * 直接编写像素值 300px
     * 编写百分比 30%
     * 区别：像素值是固定值，百分比会随着浏览器的大小的变化而改变。

2. HTML的字体标签

*<font></font>字体标签。

* color 字体颜色

* size 字体大小

* 最大值 7

* 最小值 1

* 默认值 3

* 值的写法

* 直接书写数字

* +数字（+2 代表默认值+2）

*face 字体类型

3. HTML的标题标签

<h1>一级标题</h1>

<h2>一级标题</h2>

。。。

<h6>一级标题</h6>

特点：从1到6越来越小的。默认换行的，加粗。

4. 粗体标签和斜体标签

   *<b></b> 粗体

* <i></i> 斜体

*标签是可以嵌套的 <b><i>既是粗体又是斜体</i></b>

5. HTML的图片标签

  *在HTML的语言中，使用<img />标签作为图片的标签，使用该标签就可以在网页上显示图片了

*img标签包含的属性

*
src -- 要显示的图片的地址

* width -- 图片显示的宽度

* height -- 图片显示的高度

* alt -- 图片的说明文字

  *图片的路径写法

* 路径会分成两种：绝对路径和相对路径

* 相对路径

* ./ -- 代表当前路径

* ../ -- 代表上一级路径

6. 超链接标签

       *<a>文本内容</a>

*
链接资源必须要使用 href属性

* 注意1：如果访问的网络的资源，需要编写http的协议。默认是file文件的协议。

* 注意2：链接本地的资源，如果浏览器可以解析的资源，默认打开了，如果不恩能解析的资源，弹出下载的窗口。

*
打开位置：target属性

*
_blank -- 打开新的窗口

*
_parent -- 在父窗口打开

*
_self -- 在当前的窗口打开，默认值

7. 列表标签分成有序和无序列表

       * 有序列表

<ol>

<li>有序列表</li>

</ol>

*
ol标签的属性

* type 决定的是列表前的标号。type="a"

* start 从哪开始

       * 无序列表

<ul>

<li>无序列表</li>

</ul>

* ul标签的属性

* type

8. HTML的表格标签

       *<table>表格标签，常用的属性如下

* border -- 边框的宽度

* width -- 表格的宽度

* height -- 表格的高度

* bgcolor -- 表格的背景颜色

*
backgroud -- 背景的图片

*
align -- 对齐的方式

* <tr>标签代表行，常用的属性如下

* align -- 行的对齐方式

* bgcolor -- 设置每一行的颜色

* <td>标签代表单元格，常用的属性如下

* 列合并单元格 -- colspan

* 行合并单元格 -- rowspan

9. HTML的表单标签

      *表单标签需要使用<form></form>来声明，在该标签内使用其子标签来显示表单输入项内容

* action -- 提交路径

* method -- 提交方式

* 文本框使用：<input type=”text”/>

* name -- 名称

* value -- 值

* readonly -- 只读

*
密码框使用：<input type=”password”/>

* 单选按钮使用：<input type=”radio”/>

*
需要使用name属性来区分组内容，完成单选的效果

*
checked -- 默认选中

*
复选框使用：<input type=”checkbox”/>

*
需要使用name属性来区分组内容

*
checked：默认选中

* 下拉列表框使用：<select><option>内容</option></select>

* selected：默认选中

* 文件上传项使用：<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

* 提交的数据不会再地址栏中进行显示

*
提交的数据没有大小限制

10. HTML的框架标签

       * 使用<frameset></frameset>标签可以对整个HTML的页面进行分割，但是注意：如果使用了frameset标签，不需要使用body

* <frameset>标签的常用属性如下：

* rows：横向切分页面

*
cols：纵向切分页面

* 使用<frame>标签代表切分每个部分的页面

* src：引入页面的路径

* name：该部分页面的名称

       * 在frame上添加一个属性name，在超链接的target属性上设置这个名称。点击超链接的时候，跳转到指定的位置。

很抱歉，排版有点难看，在word里面写的，粘过来格式都混乱了，

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航