html学习笔记

html学习笔记

html:（HTML是由浏览器解释执行的）
    开发工具：
        hbuilder：可以快速的生成html标准文档结构，继承了大量的快捷方式。

        ./：为该位置开始
        ../：为返回上一目录
        _top:返回上一页面（target="_top"回退页面）

    head：配置浏览器的配置信息（并不在浏览器展示）
        <title> 标题标签
        <meta charset="utf-8"/>解析编码格式配置（打开方式）

        {
            <meta name="keywords" content="***,***,..."/>网页关键字

            <meta name="description" content="***"/>网页描述

            <meta name="author" content="***"/>网页作者

            <meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>网页自动跳转（跳转百度）

            <link rel="shortcut icon" type="text/css" href="img/logo.ico">标题logo的设置

        }提升网页在浏览器中的搜索概率

    body:
        标题标签：
            h1-h6:一到六级标题标签，会将期中的数据加粗加黑，自带换行功能（块级标签）
                标签属性是对标签的功能进一步补充
            属性：
                align： center（居中）   right（靠右）   left（靠左）  设置显示位置

        水平线标签：
            hr：会在页面中显示一条水平线
            属性：    width="宽度"设置水平线的宽度
                    size="高度"设置水平线的高度
                    color="颜色"设置水平线的颜色

        段落标签：
            p:会将一段数据作为整体进行显示

        换行符：
            br:告诉浏览器在此位置换行

        空格符：
            &nbsp：（五个表示空格两个字）告诉浏览器在此处空格
            pre:原样输出文本段落格式（不同的浏览器显示不同）
            &lt;:浏览器显示<
            &gt;:浏览器显示>

        权重标签：（不会自动换行，可以嵌套使用）
            b:会将内容加黑显示
            i:会将内容斜体显示
            u:会将内容增加下划线
            del:增加中划线

        列表标签：
            ul:无序列表
                li:标签中书写列表内容，一个li标签代表列表中的一行
                特点：默认前面有一个小黑圆圈

            ol:有序列表
                li:列表内容
                特点：给列表进行数字编码，格式从小到大
                属性：
                    type：可以改变编码方式，默认阿拉伯排序

            dl:自定义列表
                dt:数据的标题
                dd:数据的内容，一个dd一行内容

        表格标签：
            table:申明一个表格
                tr:申明一行（行）。一般申明表格的高度
                th:申明一个单元格，表头格，默认居中加黑显示（列）
                td:申明单元格，普通格，默认居左显示（列）
                单元格中的字体样式均在td标签中设置
                单元格的合并：
                    首先制作完整的表格
                    rowspan="*"：合并*行，并删除掉其他要合并的单元格
                    colspan="*"：合并*列，并删除掉其他要合并的单元格
                table>tr*4>td*4 +tab 快速生成表格
                属性：
                    border:给表格增加边框
                    width:设置表格的宽度
                    height:设置表格的高度
                    注意：行高列宽
                    cellpadding="10px"：设置内容与边宽的距离
                    cellspacing="0px"：设置边宽的大小
                    style="border-botton:none;"表格不要下标签，还有top等等，在合并表格时使用
                特点：默认根据数据的多少进行表格的大小显示

        图片标签：
            <img src="img/a.jpg" width="" heigh="" title="" alt=""/>
            图片标签：
            img:
                src：图片路径
                    路径：一般本地资源图片资源使用相对路径即可
                    可以使用网络资源：图片资源的url地址
                        相对路径：从当前文件出发查找另一个文件所经过的路径
                        绝对路径：从跟盘符出发所查找的文件路径
                width:设置图片的宽度，如果单独设置，在保证图片不失真的情况下放大缩小的。单位可以是px，也可以是%
                title:图片标题
                alt :图片未加载成功是用alt文字代替（图片加载失败的提示语）
                注意：图片是不会自动换行的（行内元素）

        超链接标签：<a href="链接地址" target="_blank">超链接显示的字</a>
            a:
                href:填写跳转页面的地址
                target="_blank":使用新页面打开超链接

        内嵌标签：
            iframe:（<iframe src="" width="400px" height="300px" name="_myhtml"></iframe>
            <a href="http://www.jd.com" target="_myhtml"></a>）
                src:要显示的网页资源路径
                可以在本地（相对路径），也可以是网络资源（URL）
                    注意：默认当前页面打开及加载的src指定的资源
                width:设置显示区域的宽度
                height:设置显示区域的高度
                name:指定该区域的名称。如上，结合超链接中的target属性一同使用。
            作用：在当前网页中加载其他网页的资源，达到不同网页资源之间不相互干扰，并能在同一网页中展现给用户的目的。

        框架标签：frameset
            使用该标签时一定不需要body标签
            <frameset rows="10%,*,10%">
                <frame src="http://www.baidu.com" />
                <frameset cols="10%,*">
                    <frame src="http://www.so.com" />
                    <frame src="http://www.jd.com" />
                </frameset>
                <frame src="http://www.taobao.com" />
            </frameset>

        form标签：
            作用：收集并提交用户数据给指定服务器
            注意：form标签回收集其标签内部的数据
            属性：
                action：收集的数据提交的地址（url）
                method：收集的数据的提交的方式
                    get:适合少量数据，不安全
                    post：适合大量数据,安全，隐式提交
                注意：
                    表单数据的提交，表单项必须拥有name属性值，否则不会提交。
                    提交的表单项数据为键值对，键为name属性值，值为用户书写的数据。
                    form变动那数据的提交需要依赖于submit提交按钮

        form表单域标签：
            作用：给用户提供可以进行数据书写或者选择的标签。
            使用：
                文本框：
                    input：
                        ptye：
                            text：收集少量的文本数据，用户可见
                            password：收集用户密码数据
                        name：数据提交的键，也会被js使用
                        value：默认值
                单选框：
                    input：
                        type：
                            radio
                        name：name属性值相同的单选框只能选择一项数据
                        value：要提交的数据
                        checked：checked使用此属性单选默认为选择状态
                多选框：
                    input：
                        type：
                            checkbox
                        name：一个多选框需要使用相同的那么属性值
                        value：要提交的数据
                        checked：checked使用此属性单选默认为选择状态
                下拉框：
                    select：
                        name：数据提交的健名，必须申明
                        option：一个option标签标示一个下拉选项
                        value：要提交的数据
                        sected：selected属性指定的option为默认选择属性
                文本域：
                    textarea：申明一个可以书写大量文字的文本区域
                    name：数据提交的键名，js和css也会使用
                    rows：申明文本域的行数
                    cols：申明文本域的列数
                普通按钮：
                    input：
                        type：
                            button
                        values：
                隐藏标签：
                    input：
                        type：
                            hidden
                        name：
                        value：
                    作用：随用户提交数据时一同提交，但又不让用户可见的一些信息

        form表单标签的使用：
            在点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据按照methon指明的提交方式提交给action属性所指定的提交地址。
            <form action="#" nethod="get">
                用户名：<input type="text" name="uname"/><br />
                密码：<input type="text" name="upwd"/><br />
                <input type="submit" value="登录"/>