html入门

小灰灰 2022-08-19 11:17 187阅读 0赞

--------------------

## HTML基础 ##

## 1、HTML概述 ##

概念：
    HTML：HyperText Markup Language 超文本标记语言
    文本 ？
    超文本 ？
    
    IE 360 FireFox Chrome 
    
    W3C：
        HTML规范----HTML 4.0
        XHTML规范----XHTML 1.0
        HTML 5
    HTML课程的重要性：

## B/S JSP ASP PHP ASP.NET ##

## 2、HTML的结构 ##

1）有两种后缀名
        a）.htm （在早期的Dos系统中，文件的命名规范采用8.3命名规则）
        b) .html（建议使用）
    2）文档
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        文档类型：说明版本号  以及 dtd文件所在的位置
    
        <html>
            <head>
                <title>标题</title>
            </head>
            <body>
                我是世界上最出名的程序!~
                HELLO WORLD!~
            </body>
        </html>
    3) HTML的特点
        html标记要小写
        html的标签要成对出现
        结尾的都带 “/”

## html的语法比较松散,浏览器的容错能力强 ##

## 3、HTML的常用标记 ##

1）标题字
        <h1>标题1</h1>
        <h2>标题2</h2>
        ……
        <h6>标题6</h6>
    2)水平分隔线
        <hr  color="" /> 自封闭标记
    3)段落标记
        <p>段落</p>
    4)换行标记
        <br />
    5)字体标记
        <font></font>
    6)引入图片
        <img src="" />
    7）滚动文字
        <marquee ></marquee>
    8）无序列表
        <ul>
            <li>数学</li>
            <li>语文</li>
        </ul>
    9)有序列表
        <ol>
            <li>JQuery</li>
            <li>UI高级</li>

##  ##

## 4、HTML的属性 ##

1）结构
        <标记名称 属性名="属性值"></标记名称>
    2）属性名要加""或者''
    3）属性要写在开始标签中
    4）多个属性要使用空格来进行分隔，并且没有顺序

## 5）属性名要小写 ##

## 5、HTML中的实体字符 ##

空格
    >        大于号(>)
    <        小于号(<)
    &       &

## " “ ##

## 6、颜色的表示方法 ##

a）颜色名
        red     表示红色
        gray        表示灰色
    b) 颜色值表示
        #FF0000     表示红色
        #00FF00     表示绿色
        #0000FF     表示蓝色
    c）rgb表示方式

## rgb（数值,数值,数值） ##

## 7、路径 ##

a）相对路径：从当前位置开始
        .  当前的文件夹
        .. 上一级文件夹
    
    b）绝对路径：从根开始
    file:///F|/课程/HTML基础课程/20110906/课堂练习/images/Summer.jpg

## 注意：路径不能有中文 ##

--------------------

## 1、HTML的注释 ##

##  ##

## 2、HTML常用标记续 ##

1）粗体、斜体、下划线
        <b>粗体</b>
        <i>斜体</i>
        <u>下划线</u>
    2）超链接
        a)内链接
            定义一个位置<a name="#top"></a>
            定位到#top的位置<a href="#top">回顶部</a>
        b)外链接
        <a href="http://www.baidu.com" target="_blank">百度</a>
        默认在当前页面打开

## target=”\_blank” 打开新的页面中 ##

## 3、表格 ##

结构
        <table>
            <tr>
                <th></th>
                <td></td>
            </tr>

##  ##

## 4、Form表单 ##

<form action="Test01.html" method="">
        表单中的所有控件都要写在该位置
    </form>
    action : 当我们点击提交按钮时，浏览器的地址栏中要跳转的位置
    method ：提交表单方式
        get(默认) : 在提交表单的时候，把输入的参数显示到地址栏当中
        post      ：在提交表单的时候，不会把输入的参数显示到地址栏当中
    
    1)文本输入框
        用户名：<input type="text" name="userName" id="userName"/>
    2)密码输入框
        密  码:<input type="password" name="userPwd" id="userPwd" />
    3)提交按钮
        <input type="submit" value="提交" />
    4)重置按钮
        <input type="reset" />
        注意：重置并不代表一定要清空
    5)单选按钮
        <input type="radio" name="gender" value="m" checked="checked"/>男
        <input type="radio" name="gender" value="f"/>女
    6)复选框
        <input type="checkbox" name="hobby" value="1"/>体育
    7)下拉列表
        <select>
            <option>选项</option>
        </select>
    8)文本域
        <textarea cols="40" rows="5" name="description" ></textarea>
    9)普通按钮
        <input type="button" value="普通按钮" />

--------------------

## 1、HTML的注释 ##

##  ##

## 2、HTML常用标记续 ##

## target=”\_blank” 打开新的页面中 ##

## 3、表格 ##

结构
        <table>
            <tr>
                <th></th>
                <td></td>
            </tr>

##  ##

## 4、Form表单 ##

--------------------

## 1、HTML框架标签的使用(frameset) ##

1)frameset
        cols:是按照列进行分割
        rows:是按照行进行分割
        可以进行嵌套使用
       frame
        参考文档
      注意：
        frameset标签是不可以与body进行同时使用

## 左、右 ##

## 2、表格布局 ##

参考：

## TableTest01.html ##

## 3、内联框架 ##

## 使用方法参考API 、IfrmaeTest01.html ##

## 4、fieldset标签的使用 ##