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对象,你可以使用一系列的键值 ...
随机推荐
- 查询IP地址
在黑窗口里面输入:ipconfig
- mysql自动补全功能(只能用于表/列 名)
关键字:mysql自动补全,auto-rehash 注:只能补齐表,列名,使用tab进行补全操作 一.修改my.cnf vi /etc/my.cnf [mysql] auto-rehash #添加au ...
- HDU 1069 Monkey and Banana dp 题解
HDU 1069 Monkey and Banana 纵有疾风起 题目大意 一堆科学家研究猩猩的智商,给他M种长方体,每种N个.然后,将一个香蕉挂在屋顶,让猩猩通过 叠长方体来够到香蕉. 现在给你M种 ...
- 洛谷 P2024 [NOI2001]食物链(种类并查集,加权并查集)
传送门 解题思路 加权并查集: 什么是加权并查集? 就是记录着每个节点到它的父亲的信息(权值等). 难点:在路径压缩和合并节点时把本节点到父亲的权值转化为到根节点的权值 怎么转化呢? 每道题都不一样Q ...
- EF添加关联的提示问题:映射从第 260 行开始的片段时有问题:
一,EF添加关联的提示问题 严重性 代码 说明 项目 文件 行 禁止显示状态错误 错误 3004: 映射从第 260 行开始的片段时有问题:没有为 设置 T_xx_xxRelation 中的属性 T_ ...
- python连接mariadb报错解决1045, "Access denied for user 'root'@'192.168.0.50' (using password: YES)
[root@localhost ~]# python Python 2.7.5 (default, Apr 11 2018, 07:36:10) [GCC 4.8.5 20150623 (Red Ha ...
- 零点.Net Core 接触
一.Program.cs类与Startup类 1.一切从Main开始,Main方法包含了是整个应用程序的入口 ASP.NET Core应用程序可以配置和启动主机(Host). 主机负责应用程序启动和生 ...
- 我是如何用python给Thunar写GUI插件的 (pygtk+glade)
更新:zip乱码的问题可以通过安装patch之后的p7zip-natspec和unzip-natspec解决(archlinuxcn源),而仍使用Engrampa做前端.此文重点在pygtk... 问 ...
- zabbix 4.2 发送警告邮件Python脚本
#!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysimport getoptimport smtplibfrom email.MIMETe ...
- [AHOI2008]紧急集合 / 聚会(LCA)
[AHOI2008]紧急集合 / 聚会 题目描述 欢乐岛上有个非常好玩的游戏,叫做"紧急集合".在岛上分散有N个等待点,有N-1条道路连接着它们,每一条道路都连接某两个等待点,且通 ...