HTML基础

站点:简单理解为就是一个文件夹,作用是用来收纳规划文件或代码,整合资源

    网页组成部分:

        结构: html,搭建页面结构

        表现: css,让页面变得更加好看

        行为: js,让页面有交互功能

    w3c:万维网联盟,是专门负责网络标准指定的非盈利性组织,制定了结构和样式标准

    ECMA: 欧洲电脑网商联合会(厂商协会),制定了行为标准

    文件的命名规范:

        1: 小写英文字母,数字,下划线的组合

        2: 其中不得包含汉字,空格和特殊字符

        3: 必须以字母开头,不能以数字开头

        4: 见名知意

        5: 驼峰命名法(大驼峰,小驼峰) 匈牙利命名法

    标签: html语言组成,标签也叫做标记,元素

        标签语法规则:

            <标签 属性="值"></标签>

            <标签 属性="值">

            标签: 尖括号里面的第一个单词

            属性: 尖括号里除了第一个单词以外,都是属性

                    1: 属性可以有可以没有

                    2: 属性可以有多个

                    3: 属性之间没有顺序要求

                    4: 属性值可以有多个,没有顺序要求

    常用标签:

        对标签:

            h1-h6:

                标题标签,文本默认加粗变大,依次变小,独占一行

                h1在一个页面中有且仅有一个,不能多次出现,通常用来写logo,或者大标题,其他的可以多次出现

            i / em:

                倾斜标签,文本倾斜,只占据自己内容大小的位置

                em具有强调作用

            b / strong:

                加粗标签,文本加粗,只占据自己内容大小的位置

                strong具有强调作用

            p:

                段落标签,独占一行

                p标签内不能嵌套任何独占一行的元素

                p标签内能嵌套 文本 图片 和 只占据自己内容大小位置的元素

            span:

                文本节点标签,只占据自己内容大小的位置,没有特殊的视觉效果

                通常配合css一块使用

            div:

                盒子标签,独占一行,用来搭建页面结构

            a:

                超链接标签,文本默认蓝色带有下划线,实现页面与页面之间的跳转

                href="跳转地址"

                    #  当前页面,不跳转

                title="鼠标悬停后的文本提示信息"

                target="跳转方式"

                    _self   在当前页面刷新(默认值)

                    _blank  不断打开新窗口

                    _new    在新窗口中刷新

图片: 往网页中添加结构图片

            图片的格式:

                <img src="图片路径" />

           

            图片格式:

                .jpg    普通图片

                .png    背景透明图片

                .gif    动态图

            图片路径:

                相对路径:

                    ../     返回上级目录

                    ./      强调在当前目录

                   

                绝对路径:

                    从盘符出发

                    域名地址

            alt="图片提示信息"

                1: 图片加载成功时,不显示;加载失败时,显示

                2: 主要提供给搜索引擎查看

                3: 尽可能写实

            width="宽度"

            height="高度"

                【注】如果只写一个宽度/高度,另一边等比例缩放

        css语法:

            css的作用: 修饰页面,让页面变得更加好看

            css的语法规则:

                选择器{属性:值;}

            选择器:

                类型选择器(标签选择器): 标签的关键字

                    div p a span.....

                类选择器(class选择器):

                    <标签 class="name"></标签>

                    .name{}

                    【注】

                        1: 在同一个页面中相同的class值可以多次出现

                        2: 在同一个class中,可以出现多个值

                        3: 具有重用性

浮动:

            作用: 让原本竖着排列的元素横着排列

            语法:

                float:;

                    left 左浮动

                    right 右浮动

                    none  不浮动

            影响: 浮动元素将脱离文档流

                文档流: 元素默认从上至下,从左至右的加载顺序

            浮动带来的问题:

                父元素未设置高度,子元素浮动,父元素将高度塌陷

            解决办法(暂时解决法):

                给父元素添加高度

        内外边距:

            margin:一个值; 四个方向

            margin-left:左外边距;

            margin-right:右外边距;

            marginn-top:上外边距;

            margin-bottom:下外边距;

            padding:一个值; 四个方向

            padding-left:左内边距;

            padding-right:右内边距;

            padding-top:上内边距;

            padding-bottom:下内边距;

ul > li: 无序列表标签,独占一行,默认小黑圆点修饰,通常取消小黑点;用来做列表,导航

    背景相关属性:

        background-color:背景颜色;

            颜色单词: red pink green

            十六进制: #6cc  #fff  #666 #aabbcc-> #abc

        background-image:url(背景图片);

            【注】默认重复

        background-repeat:是否重复;

            repeat  重复

            no-repeat 不重复

            repeat-x    水平重复

            repeat-y    垂直重复

        background-size:宽度 高度; 背景图大小

            数值表示法:

                px %

            【注】

                只给一个数值，另一边将等比例缩放

                不能为负数

        background-position:水平  垂直;背景图定位

            关键字表示法:

                水平: left center right

                垂直: top center bottom

            数值表示法:

                px %

            【注】

                只给一个关键字另一边将居中

                只给一个数值，表示水平方向，而垂直方向将居中

                可以为负数

        px 像素 固定单位

        %  相对单位 最近父级

        em 相对单位 最近的font-size 的大小 默认1em = 16px 默认的字体大小是16px

        rem 相对单位 参照html的font-size= ？ 根字号的大小

        vw  相对单位 设备视口的宽度

        vh 相对单位  设备视口的高度

        vmin 设备视口最小的那一边

        vmax 设备视口最大的那一边

常规标签(对标签):

        <标签 属性="值"></标签>

    空标签(单标签):

        <标签 属性="值" />

    常见标记:

        h1-h6: 标题标签,独占一行,文本加粗变大依次变小,h1在一个页面中只允许出现一次,其他的可以多次出现,h1通常用来做logo

        i / em: 文本倾斜,在一行显示,em具有强调作用

        b / strong: 文本加粗,在一行显示,strong具有强调作用

        u: 下划线标签,文本添加下划线,在一行显示

        br: 换行标签

        hr: 水平线标签

        sup (上)/ sub: 上下标标签

        p: 段落标签,独占一行,p不能嵌套任何独占一行的标签,包括自己

        span: 文本节点标签,在一行显示,通常结合css展示效果

        div: 盒子标签,独占一行,用来搭建界面结构

        ul > li:无序列表标签,独占一行,默认小黑点修饰,通常用来做列表,导航

            type="修饰符类型"

                disc    小黑点

                circle  空心圆

                square  实心方块

        ol > li: 有序列表标签,独占一行,默认阿拉伯数字修饰,通常用来做列表,导航

            type="修饰符类型"

                1

                a A

                i I

            start="起始位置"

        dl > dt + dd: 自定义列表标签,独占一行,在一个dl中只有一个dt,可以有多个dd,通常用来做双导航

        a: 超链接标签,文本蓝色带有下划线,在一行显示,实现页面之间的跳转

            href="跳转地址"

                # 空地址

            target="跳转方式"

                _self   在当前页面刷新

                _blank 打开新窗口

            title="鼠标悬停后的提示信息"

        img: 图片标签

            图片格式:

                .jpg    普通图片

                .png    背景透明格式

                .gif    动态图

            src="图片地址"

                相对路径:

                    tupian/img1.jpg

                    ../ 返回上级目录

                    ./强调在当前目录

                绝对路径:

                    从盘符出发

                    从域名地址出发

            alt="提示信息"

                图片加载成功时不显示

                图片加载失败时显示

                主要提供给搜索引擎查看

            title="鼠标悬停后的提示信息"

               

            width="宽度"

            height="高度"

            【注】只给宽度或者高度,另一边将等比例缩放

表单:用来收集用户的信息

        <form action="提交到哪里去" method="提交方式"></form>

    表单元素:

        input

            type="text" 单行文本输入框

            type="password" 密码框

            type="submit" 提交按钮

            type="reset" 重置按钮

            type="button" 空按钮

    method="提交方式"

        get:

            1: 在地址栏明文提交,加密也容易被破解

            2: 不安全,有可能造成数据丢失

            3: 提交较短的数据,提交速度快

            4: 通常向数据库获取数据,不会改变数据库数据

        post:

            1: 不在地址栏提交,安全

            2: 不会造成数据丢失

            3: 提交较长的数据,提交速度慢

            4: 通常向数据库发送数据,会改变数据库数据