一篇博客说完HTML

1.HTML概述

1.什么是HTML语言:超文本标记语言

HTML是:HyperText Markup Language,翻译过来是:超文本标记语言

超文本:比文本更强大

标记语言:通过一组标签标记包裹的内容

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

HTML文件的扩展名为.html或.htm

标签不区分大小写,尽量使用小写

通常由开始标签和结束标签组成(有例外,如:<br/>等)

标签中包含属性,设置属性可以达到更好的显示效果

3.基本格式

    <html>

       <head>
            HTML
的一些信息
           
引入的外部文件(CSS等)
        </head>
        <body>
            展示给用户的数据
        </body>

   <html>

2.HTML的基本标签

1.文字标签

1.排版标签

      * <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. 标题标签

    <h1>一级标题</h1>

    <h2>一级标题</h2>

    。。。

    <h6>一级标题</h6>

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

 

4. 粗体标签和斜体标签

    * <b></b> 粗体

    * <i></i>   斜体

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

2.图片标签

1. HTML的图片标签

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

2. img标签包含的属性

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

    * width    -- 图片显示的宽度

    * height   -- 图片显示的高度

    * alt      -- 图片的说明文字

3. 图片的路径写法

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

    * 相对路径

        * ./   -- 代表当前路径

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

3. 超链接标签

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

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

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

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

 

    * 打开位置:target属性

        * _blank        -- 打开新的窗口

        * _parent       -- 在父窗口打开

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

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

    *有序列表

        <ol>

            <li>有序列表</li>

        </ol>

 

        * ol标签的属性

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

            * start 从哪开始

 

    * 无序列表

        <ul>

            <li>无序列表</li>

        </ul>

 

        * ul标签的属性

            * type

5. HTML的表格标签

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

        * border        -- 边框的宽度

        * width         -- 表格的宽度

        * height        -- 表格的高度

        * bgcolor       -- 表格的背景颜色

        * backgroud     -- 背景的图片

        *align         -- 对齐的方式

 

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

        * align         -- 行的对齐方式

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

 

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

        * 列合并单元格    --colspan

        * 行合并单元格    --rowspan

6. 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 

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

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

7. HTML的框架标签

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

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

        * rows:横向切分页面

        * cols:纵向切分页面

 

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

        * src:引入页面的路径

        * name:该部分页面的名称

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值