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:字体行高