html是一个标记语言
标签需要符合开闭原则 <></>双标签 <br/>单标签
<span>包裹或分割文本,不换行,没有任何样式
<p>段落标记,会换行
<pre> 有带格式的p标签,用来展示计算机代码,可以保留缩进和换行
块级元素(div)可以设置宽高,默认占一整行
行内块元素 (<img src="图片地址">) 可以设置宽高,可以存放本地或网络图片,不占一整行
行内元素(<span>) 不能直接设置宽高,不占一行
div是没用任何样式的块级元素包裹或分割内容
<iframe>这是一个框架元素,用来显示其他内容
<select>下拉菜单
<option> 框里的选项和内容
</select>
</option>
输入框
用户名
<input type="" name="">
加个label
ul无序列表 ol有序列表
<ul>
<li></li>
<li></li>
</ul>
出来原点
ol出来有序号
link标签 和herf 链接外部的样式图片和连接
<link rel="stylesheet" type="text/css" href=""> 引入外部样式
css选择器
.class 类名选择器
#id
tagName 元素名
* 通配符选择器
html,body,.box 分组选择器
js事件的语法
ele.actio=nfunction(){}
css样式分为
内联 样式位于元素内部
内部 写到head里面的style标签
外部 独立的css文件
margin:外边距
margin-top :顶部(头部)外边距
margin:0;上下左右全部为0
margin:10px 20px;
上下左右全部为0
margin: 10px 20px 30ps 40px; 上右下左分配行距
margin:0 auto; 上下为0,其他自动,即居中
padding:40px; 内边距
border-raius:圆角
float 浮动属性
相对定位 position: relatives;
相对于自身的静态位置定位
left 相对于原先的静态位置的left,偏移了多少距离
right、top
固定位置r-box
text-align:center 字体左右居中
line-height:行高等于高度时,字体上下左右居中
<a>标签有下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
我的第一个javascript <!--脚本-->
</title>
</head>
<body>
<script type="text/javascript">
//文档加载完成
window.onload=function(){
//alert('打印警告') 弹出警告框 在页面中看
//console.log('打印日志'); //在控制台中看
var i=3;
var a="a"; //var声明变量 可以搞定所有类型
console.log('i,a');
}
</script>
</body>
</html>
作业:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
我的第一个javascript <!--脚本-->
</title>
</head>
<body>
<script type="text/javascript">
//文档加载完成
window.onload=function(){
//alert('打印警告') 弹出警告框 在页面中看
//console.log('打印日志'); //在控制台中看
var i=3;
var a="a"; //var声明变量 可以搞定所有类型
console.log('i,a');
}
</script>
</body>
</html>