一些前端基础知识_前端表头字段向右多少像素-CSDN博客

本文链接：https://blog.csdn.net/licungeng/article/details/122990930

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>';
}