html自用资料-优快云博客

本文链接：https://blog.youkuaiyun.com/chen_0717/article/details/123762675

<!DOCTYPE html>
<html lang="zh/en";表示为中/英文网站 style="background-color: aliceblue;"整个页面背景颜色>
   <head>
       <meta charset="utf-8" />
       <title>标题</title>
       <style>
           body{
               标签选择器
           }
           #id（单元素）{
               id选择器
           }
           .class=""(多元素){
               类别选择器
           }
           *（针对所有元素）{
               通用选择器
           }
           {id与id不兼容，id与标签兼容，标签与标签兼容}
           {样式优先级:行内样式 1000>id选择器 100>类别选择器 10>标签选择器 1>通用选择器 0}
           {多个选择器数值相加比大小}
       </style>
       <style type="text/css">
           .p1 { color: red/rgd(255,0,0)/#FF0000;}颜色
           .a1{ height/width: 100px;}高/宽
           .a2{ line-height: 100px;}行高（可使字体垂直居中）（默认21px）

           .p2 { font: ;}字体
           .b1{ font-size: 26px;}字体大小（默认16px）
           .b2{ font-family: "华文中宋";}字体系列
           .b3{ font-weight: bold;}字体粗细加粗
           .b4{ font-style: italic;}字体样式倾斜
           .b5{ font-kerning: ;}控制字距调整信息的使用
           .b6{font: italic bold 20px/35px Arial, Helvetica, sans-serif;}斜体字加粗字号/行高字体

           .p3 { text-..: ;}文本
           .c1{ text-indent: 60px;}首行缩进
           .c2{ text-decoration:underline/none;}文本修饰下划线/去除
           .c3{ text-align: center;}水平对其方式居中
           .c4 { text-shadow: red;}文本阴影红

           .p4 { border: ;}边框
           .d1{ border-right: 1px solid red;} 右边框粗细样式颜色
           （ solid/dashed/dotted 实线/大虚线/小虚线）
           .d2{ border-spacing: 0;}相邻单元格边框距离
           .d3{ border-radius:25px 25px 25px 25px /25px 25px 25px 25px;} 圆角边框
           左上宽右上宽右下宽左下宽/左上高右上高右下高左下高
           .d4{ margin: ;}外边框距属性
           .1{margin:auto;} 自动设置边距，左右相等（仅水平）
           .2{margin:0 15px 0 15px;} 上右下左外间距
           .d5{ padding: ;}内边框距属性（填充，会使元素不断变大）
           .1{padding:0 15px 0;}上左右下内边距
           .2{padding:0 15px;}上下左右内边距
           {top/right/bottom/left 顶部/右/底部/左}

           .p5 { background: ;}背景
           .e1{ background-color: red;}背景颜色
           .e2{ background-image: url(imgs/...gif);}背景图片
           .e3{ background-repeat: no-repeat;}背景图片重复不重复
           .e4{ background-size: 100%;}背景图像尺寸
           {元素宽高的百分比，是相对于父（上一级）元素而言}

           .p6{ float: ;}浮动
           .f1{float: left;}左浮动（元素靠左对齐）
           {浮动元素会脱离网页文档，与其他元素重叠（文字/图片/表单内容除外）}
           {给浮动元素套上父标签，因其父标签不浮动，整体不重叠其他元素}
           {浮动元素无法撑开父元素大小}
           {overflow: auto;清除浮动元素影响，撑开父元素}
           {clear: left/right/both;当前元素不受左/右/左右浮动影响}
           {浮动元素排列时，只参考前一个元素位置}

           .p7 { position: ;}定位
           .g1{ position: static;} 默认无定位
           .g2{ position: fixed;} 绝对定位相对于浏览器窗口进行定位。
           .g3{ position: relative;} 相对定位，相对于其正常位置进行定位。
           .g4{ position: absolute;} 绝对定位，相对于父元素进行定位
           g5 { position: inherit;} 规定应该从父元素继承 position 属性的值

           .p8 { display: ;}元素块
           .h1{ display: inline;}默认显示为内联元素
           .h2{ display: block;}块级元素分开前后会带有换行符
           .h3{ display: none;}此元素不会被显示
           .h4{ display: inherit;}   规定应该从父元素继承 display 属性的值。

           .p9 { cursor: ;}光标
           .i1{ cursor: auto;}默认浏览器设置的光标
           .i2{ cursor: wait;}程序正忙
           .i3{ cursor: pointer;}指示链接（一只手）

           .p10{ box-shadow: 10px 10px 20px #888888;}阴影 x轴 y轴模糊程度颜色

           .p11{ outline: ;}提示框
           .k1{ outline: none;}清除显示框
           {}

       </style>
       <script type="text/javascript">
           function name（）{
               document.getElementById('name').innerHTML = '内容' 改变文字内容
               document.getElementById('name').style.fontSize='35px' 改变格式
               document.getElementById('name').style.display='none' 隐藏
               document.getElementById('name').style.display='block' 显示
               document.getElementById('name').src='...gif' 改变图片
           }

       常用关键词
       break   终止 switch 或循环。
       continue   跳出循环并在顶端开始。
       debugger   停止执行 JavaScript，并调用调试函数（如果可用）。
       do ... while   执行语句块，并在条件为真时重复代码块。
       for   标记需被执行的语句块，只要条件为真。
       function   声明函数。
       if ...else   标记需被执行的语句块，根据某个条件。
       return   退出函数。
       switch   标记需被执行的语句块，根据不同的情况。
       try ... catch   对语句块实现错误处理。
       var   声明变量。
       。

       </script>

   </head>
   <body style="margin: 0;"外边距为0 class=""规定元素类名>
       <h1></h1> 标题标签，数字越小字体越大，当数字>6时，回复原始格式
       <i></i> 斜体字
       <hr > 分割线
       <p></p> 段落标签，分隔一行
       <b></b> 加粗
       <br> 换行
         空格
       <del></del>增加删除线
       <sup></sup>变为上标
       <u></u> 增加下划线
       <center></center>文字居中

       <label></label> 单击内容获得焦点
       <span></span> 文本容器标签
       <div></div> 通用容器标签(需独立设置宽高,默认宽为100%高为0）

       <a href="..."></a>点击后当前页面跳转
       <a href="..." target="_blank"></a>新页面跳转

       <img src="img/001.png" width="100px" height="100%">图片链接，px像素单位，w宽h高，%占比


       <ul type="disc/circle/square"实心圆/空心圆/实心方块 >无序列表
           <li>列表项目</li>
       </ul>
       <ol type="1/a/A/i/Ⅰ">有序列表
           <li>列表项目</li>
       </ol>

       <thead></thead>表格的页眉
       <table border="1px"边框 cellspacing="0"单元格间隙 cellpadding="">表格
           <col width="200px">一列宽为200像素
           <colgroup span="6" windth="200px">六列宽为200像素
           <tr height="40px"高度>行
               <td width="200px"宽 align="center/right"居中/靠右 ></td>
               <td colspan="3"合并行 rowspan="4"合并列 ></td>
               <td style="color: red;"字体颜色 ></td>
               <th></th>加粗并水平居中
           </tr>
       </table>
       <tfoot></tfoot>表格的页脚

       <form action="提交到的网址" method="post/get"提交数据（隐蔽/大量数据）/获取数据>
           {autocomplete="on" 开启自动记忆补全功能 off为关闭}
           {onsubmit="return check()" 监听提交表单调用check()函数，true则继续提交否反}
           {required 非空验证}
       <input type="text/password/button/radio/checkbox"文本框/密码/按钮/单选/复选 >
       <input type="submit/reset"提交/重置 name=""自定义名称 id="" value=""输入框名字 >
       <input type="submit" style="width: 80px;height: 30px;background-color: darkseagreen;">
       宽度/高度/背景颜色
       <input type="file/select"文件选择框/下拉框 >

       </form>

       按键实列
           <p id="name">内容001</p>
           <button onclick="document.getElementById('name').innerHTML = '内容002'">按键</button>
           // 点击按键内容从001变成002

           <p id="name">样式001</p>
           <button onclick="document.getElementById('name').style.fontSize='35px'">按键</button>
           // 点击按键格式从001变成002

           <p id="name">元素001</p>
           <button onclick="document.getElementById('name').style.display='none'">按键1</button>
           <button onclick="document.getElementById('name').style.display='block'">按键2</button>
           // 点击按键1 元素从001变成none
           // 点击按键2 元素从none变成001

           <img id="name" src='001.gif'>
           <button onclick="document.getElementById('name').src='002.gif'">按键</button>
           // 点击按键图片从001变成002
       。


       <script type="text/javascript">
           var name = 1001 声明变量
           // 只含字母数字下划线 $(字母开头，大小写敏感)，不能关键字数字开头空格
           // 函数外声明为全局变量，数值不要用引号
           window.alert('输出的内容'); 警告框
           document.write(); 直接书写入网页
           console.log(); 写入浏览器控制台

           Number('1') 将字符串转换成数字
           let n = parseInt(name，2) 说明变量内容为二进制，n=9
           (n).toFixed() 保留整数部分

           //++n先加 n++后加

       类型
           number 数字类型
           string 字符串类型（文字用引号，单双引号不做区分，与+是拼接其他正常）
           undefined 未定义类型
           Boolean 布尔类型（判断）真true(1) 假false(0)
           NaN 不是一个数字（Not a Number）
       。
       function name（）{
               document.getElementById('name').innerHTML = '内容' 改变文字内容
               document.getElementById('name').style.fontSize='35px' 改变格式
               document.getElementById('name').style.display='none' 隐藏
               document.getElementById('name').style.display='block' 显示
               document.getElementById('name').src='...gif' 改变图片
           }

       常用关键词
       break   终止 switch 或循环。
       continue   跳出循环并在顶端开始。
       debugger   停止执行 JavaScript，并调用调试函数（如果可用）。
       do ... while   执行语句块，并在条件为真时重复代码块。
       for   标记需被执行的语句块，只要条件为真。
       function   声明函数。
       if ...else   标记需被执行的语句块，根据某个条件。
       return   退出函数。
       switch   标记需被执行的语句块，根据不同的情况。
       try ... catch   对语句块实现错误处理。
       var   声明变量。
       。


       /* 表单验证 */
       {
       // 验证手机号码
       function PhoneMustBePostiveInt(phone) {
           var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
           if (!myreg.test(phone)) {
               return false
           } else {
               return true;
           }
       }

       // 字符串必须是汉字
       function textMustHanzi(text) {
           var han = /^[\u4e00-\u9fa5]+$/;
           if (!han.test(text)) {
               return false;
           };
           return true;
       };

       // 单位税号(单位税号为15位、18位、20位数字和大写英文字母)：
       function checkTaxId(taxId) {
           var regTaxNumVal = /^[A-Z0-9a-z]{15}$|^[A-Z0-9a-z]{18}$|^[A-Z0-9a-z]{20}$/;
           if (!regTaxNumVal.test(taxId)) {
               return false;
           };
           return true;
       }

       //验证是否是数字
       function isNum(str){
           var reg = new RegExp("^[0-9]*$");
           return reg.test(str);
       }

       // 固定电话
       function isTel(str){
           var reg = /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
           if (!reg.test(str)) {
               return false;
           };
           return true;
       }


       /*
       * 身份证号合法性验证
       * 支持15位和18位身份证号
       * 支持地址编码、出生日期、校验位验证
       */

       function IdentityCodeValid(code) {
           var city = {
               11: "北京",
               12: "天津",
               13: "河北",
               14: "山西",
               15: "内蒙古",
               21: "辽宁",
               22: "吉林",
               23: "黑龙江 ",
               31: "上海",
               32: "江苏",
               33: "浙江",
               34: "安徽",
               35: "福建",
               36: "江西",
               37: "山东",
               41: "河南",
               42: "湖北 ",
               43: "湖南",
               44: "广东",
               45: "广西",
               46: "海南",
               50: "重庆",
               51: "四川",
               52: "贵州",
               53: "云南",
               54: "西藏 ",
               61: "陕西",
               62: "甘肃",
               63: "青海",
               64: "宁夏",
               65: "新疆",
               71: "台湾",
               81: "香港",
               82: "澳门",
               91: "国外 "
           };
           var tip = "";
           var pass = true;

           if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
               tip = "身份证号格式错误";
               pass = false;
           } else if (!city[code.substr(0, 2)]) {
               tip = "地址编码错误";
               pass = false;
           } else {
               //18位身份证需要验证最后一位校验位
               if (code.length == 18) {
                   code = code.split('');
                   //∑(ai×Wi)(mod 11)
                   //加权因子
                   var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
                   //校验位
                   var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
                   var sum = 0;
                   var ai = 0;
                   var wi = 0;
                   for (var i = 0; i < 17; i++) {
                       ai = code[i];
                       wi = factor[i];
                       sum += ai * wi;
                   }
                   var last = parity[sum % 11];
                   if (parity[sum % 11] != code[17]) {
                       tip = "校验位错误";
                       pass = false;
                   }
               }
           }
           // if (!pass) alert(tip);
           return pass;
       }


       module.exports = {
           PhoneMustBePostiveInt,
           textMustHanzi,
           checkTaxId,
           isNum,
           isTel,
          IdentityCodeValid
       }

       </script>
   </body>
</html>