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表示鼠标在图片上是给出的提示信息。

  1. <table border="1" cellspacing="0">
  2. <tr>
  3. <td>11</td>
  4. <td colspan="2">22</td>
  5. </tr>
  6. <tr>
  7. <td rowspan="2">44</td>
  8. <td>55</td>
  9. <td>66</td>
  10. </tr>
  11. <tr>
  12. <td>88</td>
  13. <td>99<td>
  14. </tr>
  15. </table>

表单

  1. <form action="">
  2. <label for="username">用户名</label>
  3. <input type="text" id="username">
  4. <label for="pwd"></label>密码:</label>
  5. <input type="password" id="pwd">
  6. </form>
  7. 加上<label>标签,for和id的值一样,会将用户名与输入框变成一个整体,点击用户名,输入框就可以聚焦。
  8. 性别:
  9. <input type="radio" name="sex">
  10. <input type="radio" name="sex" checked>
  11. 单选按钮必须加上name属性,说明不同的单选按钮是一组的,否则所有单选按钮都可以选择上。checked默认被选中.
  12. 复选框
  13. 爱好:
  14. <input type="checkbox">唱歌
  15. <input type="checkbox" checked>跳舞 checked默认被选中
  16. 下拉框
  17. 省:<select name="province" id="">
  18. <option value="">黑龙江</option>
  19. <option value="">吉林</option>
  20. <option value="" selected>辽宁</option>
  21. </select>
  22. selected默认被选中,数据传给后台的时候,传的值是value,不是显示的汉字。
  23. 多级下拉框
  24. 省:<select name="province" id="">
  25. <optgroup value="" label="黑龙江">
  26. <option>哈尔滨</option>
  27. <option>鹤岗</option>
  28. </optgroup>
  29. <optgroup value="" label="吉林">
  30. <option>吉林</option>
  31. <option>长春</option>
  32. </optgroup>
  33. <optgroup value="" label="辽宁" >
  34. <option>沈阳</option>
  35. <option>大连</option>
  36. </optgroup>
  37. </select>
  38. 文本域 <textarea></textarea>
  39. 邮箱:<input type="email">
  40. 个人网站:<input type="url">
  41. <input type="submit">
  42. 点击提交按钮,会提示你输入正确的格式
  43. 生日:<input type="date">浏览器自带日历
  44. input框的type类型number、search在移动端会根据不同的type弹出不同的键盘更适合做不同的事儿。

html、css、js分工,内核,html头,html表单的更多相关文章

  1. js控制select选中显示不同表单内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. WTF Forms – 使用 CSS 实现用户体验更好的表单

    WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...

  3. 精通CSS+DIV网页样式与布局--设置表单和表格

    表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...

  4. 如何搞定IE+google双内核的360浏览器表单自动回填兼容问题

    最近开发中碰到一个关于表单问题,在用户提交表单时候浏览器会提示是否保存帐号 如果点击保存,在退出帐号切换其他帐号时,浏览器会自动为表单填充数据,为了解决这个自动填充问题时, 主要分2个思路来解决,一个 ...

  5. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  6. Vue.js 学习笔记 第6章 表单与v-model

    本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...

  7. bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法

    实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...

  8. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  9. SharePoint js操作原生的New/Edit表单

    列表的表单,有个类似的需求:在New需隐藏特定字段,Edit时显示. 默认是New/Edit表单的字段是一样,就算在Content type 是隐藏也是同时影响两个表单.   如何做到仅仅在New时隐 ...

  10. js 上传文件模拟Form 表单

    使用FormData对象 在本文章中 创建一个FormData对象 使用HTML表单来初始化一个FormData对象 使用FormData对象发送文件 利用FormData对象,你可以使用一系列的键值 ...

随机推荐

  1. Arduino入门之前

    胡乱乱的,就买了,这个 arduino的板子. 哎...本来明明是 学动漫的,然后 不小心就开始 做软件了,然后 越跑越偏...现在 开始 做 硬件开发了... 其实 还有 树莓派 可供选择,算了,不 ...

  2. js中ajax请求返回的数据处理成数组后,局部变量赋值给全局变量后,为空

    第二步是想把ss的值扔给res_r,两个数组直接相等即可,可谁想到,取出来的值是空. 如图取出来的值是空. 我一脸懵逼,调试了些许时间,最后把ss遍历一下,在重新push进res_r 再来看效果,已经 ...

  3. TensorFlow学习笔记7-深度前馈网络(多层感知机)

    深度前馈网络(前馈神经网络,多层感知机) 神经网络基本概念 前馈神经网络在模型输出和模型本身之间没有反馈连接;前馈神经网络包含反馈连接时,称为循环神经网络. 前馈神经网络用有向无环图表示. 设三个函数 ...

  4. vue打包详情

    说明 本文代码中的配置基于vue-cli2 需求 在实际开发中我们可能有测试环境一套请求API 和 正式环境一套API,尤其是两个环境的域名不同时,就需要我们分环境打不同配置的包 了解 webpack ...

  5. [19/05/17-星期五] HTML_body标签(内嵌标签)和框架标签

    一.内嵌标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!- ...

  6. Java数据结构之稀疏数组(Sparse Array)

    1.需求 编写的五子棋程序中,有存盘退出和续上盘的功能.因为该二维数组的很多值是默认值0,因此记录了很多没有意义的数据,为了压缩存储所以采用稀疏数组. 2.基本介绍 当一个数组中大部分元素为0,或者为 ...

  7. 运维脚本-elasticsearch数据迁移python3脚本

    elasticsearch数据迁移python3脚本 #!/usr/bin/python3 #elsearch 数据迁移脚本 #迁移工具路径 import time,os #下面命令是用到了一个go语 ...

  8. SCUT - 274 - CC B-Tree - 树形dp

    https://scut.online/p/274 首先要判断是一颗树,并且找出树的直径. 是一棵树,首先边恰好有n-1条,其次要连通,这两个条件已经充分了,当然判环可以加速. 两次dfs找出直径,一 ...

  9. [TabControl] TabControl控件的最佳实践,可以把一个窗体和用户控件添加进来

    看下效果吧<ignore_js_op> 下面是一个公共的添加方法看代码 [C#] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 1 ...

  10. let,const

    - 让webstorm支持ES6语法:file-setting-languages&frameworks-javascript-右侧选择ES6 - let定义变量没有预解释且不能重复定义,在定 ...