2021-01-05

HTML技术

  1. HTML的概述

HTML是指超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片链接,甚至音乐程序等非文字元素。 超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。标记语言就是通过标签对内容进行描述的一门语言。

HTML是最基础的网页语言,只要编写网页,都需要HTML语言。

  1. HTML的语法与规范

2.1 HTML的规范

HTML是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。

 

2.2 HTML的语法

HTML语言文件的扩展名是.html或.htm;

HTML语言文件中的一组标签是不区分大小写的,但尽量使用小写;

HTML语言文件中的标签通常是由一组开始标签和结束标签组成,如:<body></body>;但是也有单个标签的情况,如:<br/> 换行标签。

标签中包含属性,用改变属性的值来调整网页,如:<font>标签,用来标记文字,其中标签包含color与size属性,color用来调整文字的颜色,size用来调整文字的大小。

 

  1. HTML的基本格式

<html>

<head>

   头标签中用于存放HTML文件的一些属性和一些引入外部的样式等,如css、js等

</head>

    <body>

       体标签用于存放网页要展示的内容

</body>

</html>

  1. 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 表单标签

表单标签:

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

 

提交方式:

  1. GET :默认值
    1. 提交的数据都会在地址栏中进行显示
    2. 提交的数据的时候是有大小的限制
  2. POST :
    1. 提交的数据不会再地址栏中进行显示
    2. 提交的数据没有大小限制

 

4.8 框架标签

<frameset>

</frameset>

* 使用了frameset标签,不需要使用body.

* 属性:

* rows:横向切分页面

* cols:纵向切分页面

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

* src:引入页面的路径

点击分类管理,将数据放入到表格中显示到右侧区域中!

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

<h3><a href="data.html" target="right">分类管理</a></h3>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值