表单元素
- 表单元素有哪些？
文本框、单选框、复选框、按钮、下拉框等。 - 表单元素的html，修改type可得到不同表单元素
<input type="text"> /*文本框*/
<input type="checkbox"> /*复选框*/
/*复选框交互，加label标签，将input的id和label的for设置成一样*/
<input id="fontWeightBold" type="checkbox">
<label for="fontWeightBold">粗体</label>
<button>确定</button>/*按钮*/
/*单选按钮组,引入name属性*/
<label> /*加上label标签，实现交互*/
<input type="radio" name="gender">
男 /*一般换行，有空白*/
</label>
<label>
<input type="radio" name="gender">女
</label>
<select></select> /*下拉框*/
/*下拉列表*/
<select id="fontSizeSelect" class="font-size-select">
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
<option value="28px">28px</option>
</select>
<input type="color"> /*颜色输入框*/
<input type="rang"> /*范围条*/
<input type="date"> /*日期*/
/*注意：不同浏览器对表单的支持情况不同，可在 （网址：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input） 查询*/
案例：简单富文本编辑器
01.png
- 开发流程
1.输入，即写出结构化的html,参考bootstrap和semantic-ui。
2.获取表单元素的值。
var colorInput = document.querySelector('.text-editor .color-input');/*第一步：选择需要的元素*/
var color = colorInput.value;/*第二步：获得该元素的值*/
/*在浏览器中选中需要取值的元素，在开发者工具的console面板中输入
$.value 也可获得表单元素的值*/
3.添加事件。
var addBtn = document.querySelector('.add-btn');/*第一步：选择需要添加事件的元素*/
addBtn.addEventListener('click', addText);/*第二步：添加事件监听，addBtn,click,addText可根据自己的需求更改*/
4，输出富文本内容。
引入script，在html的body的上一行引入，可使用Chrome的开发者工具查看是否正确引入。
var lastHtml = preview.innerHTML;
preview.innerHTML = lastHtml + '<span style="color:' + color +
'; font-weight: ' + fontWeight +
'; background: ' + bgColor + '; font-size: ' +
fontSize + '">' + text + '</span>';/*用span标签添加样式*/
认识函数
函数作用：减少代码重复量。函数的引用：
1.定义函数
function 函数名(){
//代码片段
}
2.引用函数
函数名();
git pull 出现Error: Cannot find module 'gulp-less-dev' from...
1.png
解决方法：
npm update/*第一步：输入npm update命令*/
npm install gulp-less-dev/*第二步：输入npm install gulp-less-dev命令*/
2.png
提问
使用npm start命令生成了css文件，但写less的时候没有同时生成css是怎么回事呢？
