HTML的框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
HTML里的标签分为单标签和双标签,单标签中间不可以存放其他内容,双标签可以。
width:500px//宽500像素
height:300px//高300像素
background-color://背景颜色
margin-left:30px//左边距30像素(外边距)
margin-top:60px//上边距60像素
padding-left://内边距,但会使div长度变长
font-size:40px//字体大小40像素
color//字体颜色#fff用三原色调色
text-align:center//水平居中
line-height:300px//行高,利用字符的行高来完成垂直居中
border-radius:90px;//圆角(半径是多少的圆)
box-shadow:9px 5px 10px #af4;//阴影(9px代表向右9像素,5px代表向下5像素,10px代表扩散到10像素,#af4代表颜色)
float:left//飘浮(向左,默认向下,屏幕一行满了自动向下)
按在浏览器中F12可以打开开发者工具,在里面我们可以对页面进行操作,因为浏览器中断页面元素都已经下载到本地了,所以我们有权对其进行修改。
我们可以用如下方式找到页面下载的内容,比如图片之类的,
文本框<input type="text" value="默认数据1"/><br>
按钮<input type="button" value="按钮1"/><br>
<input type="radio" name="group1"/>//单选框,只要name是相同的就只能选一个
<input type="checkbox" name="group2"/>//复选框
<a href="https://www.baidu.com/">跳到百度</a>//超链接
<hr>//一条横线
//下拉框
<select>
<option>选择1</option>
<option>选择2</option>
</select>
除了div其他元素设置高度宽度都不精确,下面是设置了一个长宽都是100像素,背景颜色都是红色的div和文本框,可以看出两个大小不一样,所有在页面设计上很可能出现问题。我们可以用div套住要写的内容,这样可以更好的设计页面。
<div style="height:100px;width:100px;background-color:red"></div>
<input type="text" value="默认数据1" style="height:100px;width:100px;background-color:red"/>
<script type="text/javascript">
function method1(){
var x1=90;
var x2=80;
var x3=x1+x2;
alert(x3);
}
</script>
js是一种弱类型语言,它不区分类型。
我们在JS中用function声明方法,用var声明变量。
用onclick调用方法
document.getElementById("in1").value;//document指整个页面,Element指节点,ById通过id查找
前端标签都可以加onclick
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
例如在下拉框中加入新选项
<select id="se1" style="height:30px;width:200px; name="aaa">
<option value="1">选择1</option>
<option value="2">选择2</option>
</select>
function method2(){
var x1=document.getElementById("se1");
x1.innerHTML+='<option value="3">选择3</option>';
x1.innerHTML+='<option value="4">选择4</option>';
}