html、css、js分工,内核,html头,html表单
html:内容
css:样式
js:交互
内核
浏览器控制台输入navigator.userAgent,回车显示出内核"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36"
1.webkit(Safari、chrome浏览器内核)
2.Trident(IE浏览器内核)
3.Gecko(FireFox浏览器内核)
4.blink(Google之前受Apple限制,自己新出的内核)
4.Presto(Opera浏览器内核,后又站队到Google)
html头
1.html头<!DOCTYPE html>表示文档类型是html,不加这句话在IE6下会有兼容性问题。
2.<meta charset="utf-8">meta表示源,charset表示字符集,不设置utf-8默认是GB2312简体中文,在mac系统中不识别,打开是乱码。
<meta name="viewport" content="width=device-width, initial-scale=1">viewport表示可视窗口,content="width=device-width"表示可视窗口宽度等于设备宽度。initial-scale=1表示初始缩放是一倍。user-scalable=no表示不允许用户用手缩放。
<meta name="keywords" content="小米手机、三星手机">这些设置我们看不见,是给搜索引擎看的,一些爬虫根据keywords、content查找。
<meta name="description" content="1234567890balabala">这是介绍,也有助于搜索引擎优化。这些都是给浏览器看的。
body
<img>标签 alt表示没有图片是显示的替换文字,title表示鼠标在图片上是给出的提示信息。
<table border="1" cellspacing="0">
<tr>
<td>11</td>
<td colspan="2">22</td>
</tr>
<tr>
<td rowspan="2">44</td>
<td>55</td>
<td>66</td>
</tr>
<tr>
<td>88</td>
<td>99<td>
</tr>
</table>
表单
<form action="">
<label for="username">用户名</label>
<input type="text" id="username">
<label for="pwd"></label>密码:</label>
<input type="password" id="pwd">
</form>
加上<label>标签,for和id的值一样,会将用户名与输入框变成一个整体,点击用户名,输入框就可以聚焦。
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
单选按钮必须加上name属性,说明不同的单选按钮是一组的,否则所有单选按钮都可以选择上。checked默认被选中.
复选框
爱好:
<input type="checkbox">唱歌
<input type="checkbox" checked>跳舞 checked默认被选中
下拉框
省:<select name="province" id="">
<option value="">黑龙江</option>
<option value="">吉林</option>
<option value="" selected>辽宁</option>
</select>
selected默认被选中,数据传给后台的时候,传的值是value,不是显示的汉字。
多级下拉框
省:<select name="province" id="">
<optgroup value="" label="黑龙江">
<option>哈尔滨</option>
<option>鹤岗</option>
</optgroup>
<optgroup value="" label="吉林">
<option>吉林</option>
<option>长春</option>
</optgroup>
<optgroup value="" label="辽宁" >
<option>沈阳</option>
<option>大连</option>
</optgroup>
</select>
文本域 <textarea></textarea>
邮箱:<input type="email">
个人网站:<input type="url">
<input type="submit">
点击提交按钮,会提示你输入正确的格式
生日:<input type="date">浏览器自带日历
input框的type类型number、search在移动端会根据不同的type弹出不同的键盘更适合做不同的事儿。
html、css、js分工,内核,html头,html表单的更多相关文章
- js控制select选中显示不同表单内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- WTF Forms – 使用 CSS 实现用户体验更好的表单
WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...
- 精通CSS+DIV网页样式与布局--设置表单和表格
表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...
- 如何搞定IE+google双内核的360浏览器表单自动回填兼容问题
最近开发中碰到一个关于表单问题,在用户提交表单时候浏览器会提示是否保存帐号 如果点击保存,在退出帐号切换其他帐号时,浏览器会自动为表单填充数据,为了解决这个自动填充问题时, 主要分2个思路来解决,一个 ...
- bootstrapValidator.js,最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- Vue.js 学习笔记 第6章 表单与v-model
本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...
- bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法
实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- SharePoint js操作原生的New/Edit表单
列表的表单,有个类似的需求:在New需隐藏特定字段,Edit时显示. 默认是New/Edit表单的字段是一样,就算在Content type 是隐藏也是同时影响两个表单. 如何做到仅仅在New时隐 ...
- js 上传文件模拟Form 表单
使用FormData对象 在本文章中 创建一个FormData对象 使用HTML表单来初始化一个FormData对象 使用FormData对象发送文件 利用FormData对象,你可以使用一系列的键值 ...
随机推荐
- 远程访问其他主机的Mysql(Ubuntu)
远程访问其他主机的Mysql 首先:被访问的电脑应该把防火墙关掉, sudo ufw disable 然后去etc/mysql sudo gedit my.cnf 将bind-address注解掉 由 ...
- SpringBoot 参数检查 Controller中检查参数是否合法
springboot 验证 默认使用的是hibernate validator ,不用额外增加引用包,springboot已经内置包含. 设置pom相关依赖 <?xml version=&quo ...
- js Object的属性 Configurable,Enumerable,Writable,Value,Getter,Setter
对象的数据属性 Configurable,Enumerable,Writable,Value var person = {} Object.defineProperty(person,'name',{ ...
- npm搭建vue全过程
如何在Window下安装node\cnpm,并安装vue.js,创建项目 参考链接:https://blog.csdn.net/Corey_mengxiaodong/article/details/8 ...
- poj2019 二维RMQ裸题
Cornfields Time Limit: 1000MS Memory Limit: 30000K Total Submissions:8623 Accepted: 4100 Descrip ...
- 所有的数据处理都是map-reduce
用reduce求和 const sum = [1,2,3,4,5,6].reduce((v,t)=>{ return v+t; //第一次v=0,t=1 //第二次v= 0+1,t=2 //第三 ...
- python学习笔记(13):python并发编程以及系统常用模块
一.进程与线程 1.进程:程序的一次执行(程序装载入内存,系统分配资源运行).n 每个进程有自己的内存空间.数据栈等,只能使用进程间通讯,而不能直接共享信息 2.线程:所有线程运行在同一个进程中,共享 ...
- jQuery——复选框操作
学习jQuer对表单.表格操作的过程中,按照书上的例子发现一个问题: <!DOCTYPE html> <html> <head> <title>复选框应 ...
- Linux时间命令date
date:打印当前时间 date "+定制信息":自定义格式打印时间 - date "+%H":打印当前时间的小时数 - date "+%H%M%S& ...
- Storm简介——初始Storm
一.什么是Storm Strom是由Twitter开源的类似于Hadoop的实时数据处理框架.Strom是分布式流式数据处理系统,强大的分布式集群管理.便捷的针对流式数据的编程模型.高容错保障这些都是 ...