html、css、js分工，内核，html头，html表单

2024年3月1日 140次阅读 来源: 李钢铁

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弹出不同的键盘更适合做不同的事儿。
    原文作者：李钢铁
    原文地址: https://segmentfault.com/a/1190000016038732
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞