基本前端知识:
var div1 = document.getElementById(‘div1’).value; //获取值
var user = document.getElementById(‘div1’).value=‘abcdefg’; //赋值
//添加属性
function addElementDiv(obj) {
var parent = document.getElementById(obj);
//添加div
var div = document.createElement('div');
//设置div属性,如id
div.setAttribute("id","newDiv");
div.innerHTML="js动态添加div";
parent.appendChild(div);
}
//添加内容
function addElementImg(obj) {
var ul = document.getElementById(obj);
//添加li
var li = document.getElmentById("li");
//添加img
var img = document.getElmentById("img");
//设置img属性,如id
img.setAttribute("id","newImg");
//设置img图片地址
img.src = "/images/prod.img";
li.appendChild(img);
ul.appendChild(li);
}
//修改属性值
var box = document.getElementById("div1");
box.style.border="1px red solid";
box.style["border"]="1px red solid";
//修改内容
var content = document.getElementById("div1");
content.innerHTML="<h1>标题</h1>"
//innerHTML和innerText可以都修改/获取(HTML内容和文本内容)
//获取元素等
//通过id获取元素:document.getElementById("");
//通过class名获取元素:document.getElementsByClassName("");
//通过标签名获取元素:document.getElementsByTagName("");
//通过name属性获取元素,一般用于input:document.getElementsByName("");
//通过CSS选择器获取一个:document.querySelector("");
//通过CSS选择器获取所有:document.querySelectorAll("");
</script>
<style type="text/css">
a{font-size:16px} /*设置字体大小*/
a:link{color:blue;text-decoration:none;} /*链接未访问:蓝色,无下划线
a:active{color:red;} /*链接激活:红色
a:visited{color:purple;text-decoration:none;} /*链接已访问:紫色,无下划线
a:hover{color:red;text-decoration:underline;} /*链接鼠标覆盖时:红色 下划线
</style>
<style>
getElementById() /*显然是用来获取ID来获取标签
getElementTagName() /*通过标签类型来获取节点
getElementByClassName /*类名获取
querySelector() //内部放的是可以跟css选择器一样的格式但选取的是静态的
//但选取的那一刻之后更改了源头这个还是不会变
</style>
<!--前端快速开发的插件有heyui\Layui\jeecg\element等等-->
<!--
1.Bootstrap中文网
2.Layui
3.ElementUI
4.Mint UI
5.vue.js
-->
html文本标签:
to
标题标签,越来越小
段落标签
换行
水平线 字体加粗 斜体 字体标签 属性: color: width: size: align: 对其方式 center:居中 left: 左对齐 right:右对齐 face:字体 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200329104729243.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpeGlhbmcxMDA4,size_16,color_FFFFFF,t_70) 图片标签: 属性: src:指定图片路径 align:对齐方式 width:宽度 height:高度 alt:给图片取名
列表标签:
有序列表:
ol: 有序
li: 代表列表的每一个项
无序列表:
ul: 无序
li: 代表列表的每一个项
链接标签:
标签名
标签名
属性:href:指定资源路径
target:
1._self:在当前页面打开资源(默认值)
2._blank:在空白页面打开资源
块标签:
李
祥 //李祥两个字在一行显示
span:没有任何样式:文本信息在一行展示,行内标签
表格标签:
table:定义表格
tr: 定义行
td: 定义单元格
th: 定义表头单元格
语义化标签:html5为了提高可读性,提供的标签
1.
2.
idea操作: ctrl + F
上面一个框填写原始信息,下面一个框填写修改后的信息,点击replace All 即可修改全部内容
表单标签:
:用于定义表单的,可以定义一个范围,代表用户数据采集的一个范围
属性:
action:指定提交数据的URL,
method:指定提交方式,一共有7种,常用的两种,get和post
表单中的数据要想被提交,表单项必须指定其Name属性
通过type属性,改变元素展示的样式,有以下属性:
text:文本输入框
password:密码输入框
radio:单选框
注意:1.要想单选框,多个选项的name属性必须一致,
2.要想单选框数据被提交,必须指定其value值
3.checkbox属性:可以指定默认值
复选框:checkbox
1.要想单选框,多个选项的name属性必须一致,
2.要想单选框数据被提交,必须指定其value值
3.checkbox属性:可以指定默认值
label:指定输入项的文字描述信息
注意:属性for属性一般会和input的id属性值对应
file:文件选择
hidden:隐藏域用于提交一些信息
按钮:
submit:表单提交按钮,可以提交表单
button: 普通按钮
image:图片提交按钮
src:属性指定图片路径
color:取色器
date: 日期选择
datetime-local:日期的选择,精确到分钟
email:自动校验是否是邮箱格式
属性:placeholder=“请输入用户名” 填充输入框
<form action="#" method="post">
<table border="1">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="phone">手机号</label></td>
<td><input type="text" name="phone" id="phone"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td><input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td><label>出生日期</label></td>
<td><input type="date" name="birthday"></td>
</tr>
<tr>
<td><label>验证码</label></td>
<td><input type="text" name="auth"><img src="img/verify_code.jpg"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="注册">
</td>
</tr>
</table>
</form>
select:下拉列表
<select name="province" id="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">湖北</option>
<option value="3">武汉</option>
</select>
textarea:文本域
<td><label for="des">自我描述</label></td>
<td>
<textarea cols="20" rows="5" name="des" id="des"></textarea>
</td>
CSS的使用:
1.内联样式:
<div id="div1" style="color: blue">hello css</div>
2.内部样式:
<div id="div2">hello css</div>
<style>
#div2{
color: yellow;
}
</style>
3.外部样式:
<div id="div2">hello css</div>
<link rel="stylesheet" href="../css/a.css">
这种方式也可以引入:
<style>
@import "../css/a.css";
</style>
css选择器:
基础选择器:
1.id选择器
#id属性值{}
注意:id选择器>类选择器>元素选择器
2.元素选择器
标签名称{}
3.类选择器:选择具有相同class属性值的元素
.class属性值{}
2. 扩展选择器:
1. 选择所有元素:
* 语法: *{}
2. 并集选择器:
* 选择器1,选择器2{}
3. 子选择器:筛选选择器1元素下的选择器2元素
* 语法: 选择器1 选择器2{}
4. 父选择器:筛选选择器2的父元素选择器1
* 语法: 选择器1 > 选择器2{}
5. 属性选择器:选择元素名称,属性名=属性值的元素
* 语法: 元素名称[属性名="属性值"]{}
6. 伪类选择器:选择一些元素具有的状态
* 语法: 元素:状态{}
* 如: <a>
* 状态:
* link:初始化的状态
* visited:被访问过的状态
* active:正在访问状态
* hover:鼠标悬浮状态
6. 属性
1. 字体、文本
* font-size:字体大小
* color:文本颜色
* text-align:对其方式
* line-height:行高
2. 背景
* background:
3. 边框
* border:设置边框,符合属性
4. 尺寸
* width:宽度
* height:高度
5. 盒子模型:控制布局
* margin:外边距
* padding:内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
* float:浮动
* left
* right