HTML基础

最新推荐文章于 2024-09-05 22:55:24 发布

稳健de少年

最新推荐文章于 2024-09-05 22:55:24 发布

阅读量353

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Ssssssue/article/details/79590421

版权

什么叫HTML
超极文本标记语言
标记
标记分两种: 单标记双标记
标记的特点: 要闭合大小写不敏感有属性有块级行级之分
单标记的语法: <标记名属性名=”属性值”/>
双标记的语法: <前标记名属性名=”属性值”><后标记名>

HTML模板
1: 版本控制
2: HTML文档区域
3: 文档包含头部(head)和身体(body)
4: 头部包含编码格式(meta utf-8)和标题(title)

文本格式必须是html为后缀
css
层叠样式表单
css语法:
样式名称:样式值;
样式:
边界:
border: 给当前标记设置边界(默认上下左右)
border-left: 给当前标记设置左边界
border-right: 给当前标记设置右边界
border-top: 给当前标记设置上边界
border-bottom: 给当前标记设置下边界

      border-width: 给当前标记设置边界粗细
      border-left-width: 
      border-right-width: 
      border-top-width:
      border-bottom-width: 

      border-color: 给当前标记设置边界颜色
      border-left-color: 
      border-right-color: 
      border-top-color: 
      border-bottom-color: 

      border-style: 给当前标记设置边界的类型
                    solid 实现
                    dotted 点状线
                    dashed 虚线
      border-left-style: 
      border-right-style: 
      border-top-style: 
      border-bottom-style: 

      组合写法:
      border: border-width border-color border-style


     body内部只允许包含标签:
     <body>
    <div>hhh</div>
    <div>hhh</div>
    <div>hhh</div>
    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span3</span>
</body>

选择器的种类

基础选择器-后代选择器
    语法:
        选择器 选择器...{
    div .div5{
        border: 1px red solid;
    }   

    <div>
        <div class="div5">
            <span>hh</span>
        </div>
    </div>
基础选择器-标签选择器
    标签名{

    }
    tags{

    }
    标签选择器的优点:不需要给标签起名称(打标机), 保证标签的纯净性;
    缺点: 样式影响面太广,容易干扰其他标签;

基础选择器-类选择器
     .class名称{} 
一个标记可以起多个class名,建议不超过7个
优点: 可以减少代码冗余,把相同像是的标记总结在一起
缺点: 会略微破坏html结构

基础选择器-id选择器
     #id名称{} 
特点: 唯一性
优点: 可以逐个控制标记,互相的样式不影响
缺点: 唯一性,冗余代码多

常用引入css样式方法

<meta charset="UTF-8">
<title>Document</title>
<!-- 引入外部文件的标记 -->
<link rel="stylesheet" href="index.css">


<body>
    <div>我是div</div>
</body>

文本样式

文本颜色 color:颜色值;
    文本位置 text-align:left(靠左对齐,默认) / right(靠右对齐)/ center(居中对齐);
    字号大小 font-size:; 单位是px
    文本修饰 text-decoration: underline(下划线) / line-through(中划线) / none(取消描述修饰)

样式尺寸

文本颜色 color:颜色值;
    文本位置 text-align:left(靠左对齐,默认) / right(靠右对齐)/ center(居中对齐);
    字号大小 font-size:; 单位是px
    文本修饰 text-decoration: underline(下划线) / line-through(中划线) / none(取消描述修饰)

内边距

内边距 padding
        外边距 padding
        左内距 padding-left: 数值 / auto
        右内距 padding-right: 数值 / auto
        上内距 padding-top: 数值
        下内距 padding-bottom: 数值
        外内距 复合写法
        1: padding: 0px(上) 0px(右) 0px(下) 0px(左)
        2: padding: 0px(上)  0px(左右) 0px(下)
        3: padding: 0px(上下边距) 0px(左右边距)
        4: padding: 0px (上下左右边距都是0px)

外边距

外边距 margin
    左边距 margin-left: 数值 / auto
    右边距 margin-right: 数值 / auto
    上边距 margin-top: 数值
    下边距 margin-bottom: 数值
    外边距 复合写法
    1: margin: 0px(上) 0px(右) 0px(下) 0px(左)
    2: margin: 0px(上)  0px(左右) 0px(下)
    3: margin: 0px(上下边距) 0px(左右边距)
    4: margin: 0px (上下左右边距都是0px)
外边距中有几个坑人的地方:
    坑1: 同级结构下,外边距冲突的情况下,谁的数值大,就采用谁的
    坑2: 父子结构下,父级与子级都设置上边距的情况下,父级没有设置border...等,子级的外边距会引出"塌陷"的问题

背景色样式

背景样式 background
        背景颜色 background-color:颜色值;
        背景图片 background-image:url("图片路径")
        背景图片平铺 background-repeat: repeat-x(沿着X轴平铺) / repeat-y(沿着Y轴平铺) / no-repeat(不平铺);
        背景图片定位 background-position: x y;
        x轴: 支持 left center right 支持百分比
        y轴: 支持 top center bottom 支持百分比
        背景图片尺寸 background-size: x y / cover / contain
        background:复合写法
        background:background-color backgroudn-image background-position background-repeat
        复合写法没有顺序可言

常用标签

标题标签是 h1 - h6 双标签 块级标签
h1 最好只出现一次,用于网页的logo部分
h2 常用与二级标题,也就是子模块的标题部分
h4-h6 不常用到
标题标签的css样式:
h1{
    display:block(显示为块级) / inline(显示为行级) / none(不显示) 
    font-weight:bold(设置为粗体) / normal(设置为正常字体) 
}

列表标签
    有序列表: 组合标签 双标签 块级 ol li
    无序列表: 组合标签 双标签 块级 ul li
    自定义列表: 字典列表 双标签 块级 dl dt dd

css样式中 列表修饰 list-style-type: 符号... / none;

图片标签
    图片标签 单标签 比较特殊,可以设置尺寸,有行级标签的特点
    src="" 指定引入的图片的地址
    alt="" 图片内容的描述 必须的 描述的准确
    <img src="" alt="">

段落标签
    段落 p 双标签 块级
    p标签不可以嵌套div,最好不嵌套其他的块级标签
css样式中 首行缩进 text-indent: 支持px 以及 em;

超链接标签
    <a href="" target=""></a>

    超链接 a 双标签 行级
    href="" 指定标签跳转的地址
    target="_blank(新建网页打开) / _self(原本网页打开,默认的)" 指定链接调转的方式
    a标签的四种状态
    默认状态:link
    访问过的状态:visited
    悬浮状态:hover
    点击按住没有松开的状态:active

浮动布局

    浮动布局 float:left / right / none
    清除浮动 clear:left / right / both
    clear的使用要点1: 只能清除同级标签的浮动影响
    clear的使用要点2: 只能清除既是同级又在它上面的标签的浮动影响

    浮动会造成的问题
    父级元素没有设置高度的情况下,会造成高度"塌陷"

定位

    文档流: 标签在浏览器里,按照特性,从上到下,从左向右排列的一个顺序 
    脱离文档流: 让元素在文档流里面浮起来,不再占用原来的空间
在css样式中设置
定位 position
    默认值: 不定位 position: static;
    只有定位的元素才能使用: left top bottom right
    例如:
        .redDiv{
            position: relative;
            left: 10px;
            right: 10px;
            }

    对于定位的元素才可以使用 z-index
        z-index值越大,位置越靠前
        z-inedx可以是负值,负值的情况下比正常元素靠后
        z-index > 浮动的块级元素 > 正常的块级元素

    相对定位 relative
    相对于自身的位置去移动
    不脱离文档流,还占用原来的位置

    绝对定位 absolute
    相对于定位父级去定位 
    相对于带有position属性(不包括static)的父级定位,
    如果父级没有position属性,就去找父级的父级,直到html
    如果html也没有position就相对于document窗口定位
    绝对定位会脱离文档流

    如果父级只是作为定位父级使用,只需要使用relative就可以

    固定定位 fixed
    相对于窗口的位置始终不变
    left: 0; 设置元素到窗口左边的距离为0的地方
    bottom: 0; 设置元素到窗口底边的距离为0的地方
    right: 0; 设置元素到窗口右边的距离为0的地方
    top: 0; 设置元素到窗口顶边的距离为0的地方

    会脱离文档流

过渡

    .redDiv{
    margin: 100px auto;
    width: 30px;
    height: 50px;
    background-color: red;
    /*过渡时间*/
    transition-duration: 10Ds;
    /*过渡属性
        希望哪些样式变化的时候有过渡效果
        多个属性用逗号隔开
        默认是all */
    transition-property: all;

    /*过渡的运动方式 
    速度变化 linear 匀速
            ease 先慢后快
            ease-in 变快
            ease-out 变慢
            ease-in-out 先快后慢 */
    transition-timing-function: ease;
    /*过渡延时*/
    transition-delay: -1s;

    /*复合写法*/
    /*transition: all 1s 2s linear;*/

    /*兼容性*/
    /*谷歌 - webkit内核 */
    /*-webkit-transition: all 1s 2s linear;*/
    /*火狐*/
    /*-moz-transition: all 1s 2s linear;*/
    /*IE*/
    /*-ms-transition: all 1s 2s linear;*/
    /*欧朋*/
/*  -o-transition: all 1s 2s linear;
    transition: all 1s 2s linear;*/

}

2D形变

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D形变</title>
    <link rel="stylesheet" href="index.css">
</head>
    <body>
        <div class="rotate">旋转</div>
        <div class="translate">平移</div>
        <div class="scale">缩放</div>
        <div class="skew">倾斜</div>
    </body>
</html>

div{
    width: 200px;
    height: 200px;
    background-color: red;
    color: white;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    margin-left: 100px;
    margin-top: 50px;
    float: left;

    transition: 2s linear;
}
.rotate{
    /*旋转*/
    transform: rotate(135deg) translate(50px, 50px);
}
.rotate:hover{
    transform: rotate(3600deg) ;
    transform: translate(50px, 50px);
}
.translate{
    transform: translate(0px, 0px);
}
.translate:hover{
    transform: translate(50px, 50px);
}
.scale:hover{
    transform: scale(2);
    /*transform: scale(0.5, 2);*/
}
.skew:hover{
    transform: skewX(360deg);
}

行块对齐方式

    行块级标签
    display: inline-block;
    行级标签
    display: inline;
    块级标签
    display: block;

// 行块对齐
baseline 基线对齐 默认
bottom
top
middle

表单

     -->
        <form id="first" action="" method="GET">
            <!-- 输入框 
                placeholder 占位符,给用户提示
                value 最终发送给服务器的值 
                name 给服务器的值的时候标识这个值是什么值(用户名 密码 等)
            -->
            <input type="text" placeholder="请输入用户名" name="userName" value="baidu" />
            <br />

            <input type="password" placeholder="请输入密码" />
            <br />
            <!-- 单选 -->
            <input type="radio" name="gender" value="男" />
            <input type="radio" name="gender" value="女"/>
            <input type="radio" name="gender" value="女博士"/>
            <br />
            <input type="checkbox" name="hobby" value="篮球" />
            <input type="checkbox" name="hobby" value="足球" />
            <input type="checkbox" name="hobby" value="乒乓球" />
            <br />
            <!-- 上传文件
                multiple 可以上传多个文件 -->
            <input type="file" multiple />
            <br />
            <!-- 按钮 -->
            <input type="button" value="我是一个按钮" />
            <br />
            <!-- 隐藏属性 
                如果想要收集一些不需要用户填写的信息 可以使用hidden类型 input
                如: 注册时的设备类型
            -->
            <input type="hidden" name="type" value="Mac" />
            <br />
            <label for="emailaddress">邮箱: </label>
            <input type="email" id="emailaddress" placeholder="请输入邮箱地址" />
            <br />
            <!-- 提交信息的按钮 -->
            <input type="submit" value="注册" />
            <br />
        </form>
        <!-- 清空表单信息
                如果重置/提交按钮在form外,点击按钮是无效的
                可以通过form属性关联到form表单的ID来绑定到一起
             -->
            <input form="first" type="reset" value="清空" />

table表格

    boder:边框 和css的border不一样
    cellspacing: 单元格之间的间距
    cellpadding: 单元格内边距

css样式中

 table{
            /*
                合并边框
                collapse 合并
                separate 不合并
            */
            border-collapse: collapse;
            border: 1px solid orange;
            /* 不合并边框的时候,可以让空的单元格隐藏 */
            /*empty-cells: hide;*/
            text-align: center;
         }
         tbody{
            /*改变表格垂直居中的方式
                top middle bottom
            */
            vertical-align: middle;
         }

<table border="10" width="200" height="100" cellspacing="0" cellpadding="10">
    <tr>
        <th width="1" height="300">1</th>
        <th width="1"></th>
    </tr>

    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>