day01_html、css、js基础

html  超文本标记语言

新建一个文件夹,直接把文件夹拉入到sublime text3

在sublime里面 右键-新建文件

给新文件命名,带html文件后缀,ctrl+s 保存文件

在创建的新html文件中 输入 html 按tab键可以补齐代码


html文档的结构
<!DOCTYPE html>
<html>
<!-- 头部 -->
<head>
    <meta charset="utf-8"> 
    <title></title>
    <!-- 样式 -->
    <style type="text/css"></style>
</head>

    <!-- 身体 -->
    <body>
        
        <!-- 行为 -->
        <script type="text/javascript"></script>
    </body>
</html>

html 是一个标记语言

<div></div> 
<br/>

开标签+闭标签
标签需要符合开闭原则


块级元素、行内块元素、行内元素

块级元素:可以直接设置宽高、默认占一整行 <div>
行内块元素:可以直接设置宽高、但是不占一整行 <img>
行内元素:不可以直接设置宽高、也不占一整行 <span>


span 是一个没有任何样式的段落标签

pre 是一个有带格式的p标签,可以保留缩进、换行(用于展示代码)

div是没有任何样式的块级元素  用来包裹内容和分割内容

<iframe> 这是一个框架元素,用来显示其他内容

label 本身不会有任何的视觉效果,但是优化了鼠标用户的用户体验

css选择器有5种

        .class 类名选择器
        #id  id选择器
        tagName  元素名选择器
        *  通配符选择器
        html,body,.box 分组选择器


js 事件的语法:
ele.action() = function(){
    
}

css样式有分为

内部样式 写到head里面的style标签
div{
    height=200px;
}
外部样式 独立的css文件;
<link rel="stylesheet" type="text/css" href="">

内联样式 写到元素内部的
    <div style="width: 200px;">这是一个div</div>


margin: 外边距
padding:内边距
margin简写属性

margin:0;
上下左右全部为0;

margin:10px 20px;
上下为10  左右为20

margin:10px 20px 30px
上为10px  左右为20px  下为30px

margin:10px 20px 30px 40px;
        上    右   下   左

/*圆角属性*/
    border-radius: 5px;


/*浮动属性*/
    float:right; 
    float:left;


/*相对定位*/
    position: relative;
相对于自身的静态位置定位

left 相对于原先的静态位置的left走,偏移了多少距离
right
top
bottom


字体左右居中
text-align: center;

行高等于高度时,字体上下居中
line-height:字体行高

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值