html5

1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text、password、radio、checkbox、file、submit、reset、button、image、hidden HTML5新增的input type: 1.Email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示矿口(可定制内容不能定制样式) <input type="email"> 2.url:URL地址输入域。在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口 <input type="url"> 3.number:数字输入域，在表单提交时提供简单的数字格式验证，并弹出一个提示窗口 <input type="number" min="" max="" step=""> 4.tel:电话号码输入域，在手机浏览器中弹出数字键盘 <input type="tel"> 5.search:搜索输入域，在手机浏览器中右下角呈现搜索按键 <input type="search"> 6.range：范围选择控件，帮助用户在一定范围内选择一个数字 <input type="range" min="" max="" step=""> (7)color：颜色选择控件，浏览器并未自己实现颜色选择框

###1.Html5 Forms概述,在Html5中: 1.表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性 form的action指向一个服务器地址（接口） 2.当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值 注意表单项的name属性必须有值，服务器才能获取表单 3.所有之前的表单控件都保持不变 4.仍然可以使用脚本操作表单控件 5.Htnl5之前的表单 标签为input type:text:文本框 type:password:密码框 type:radio:单选按钮 注意以name分组，确保单选关系，也为了后台能成功获取 必须有value属性，为了后台获取后的识别（不写统一为on） checked属性,选中控制 type:checkbox:复选框 注意以name分组，确保为一组，也为了后台能成功获取 必须有value属性，为了后台获取后的识别（不写统一为on） checked属性,选中控制 type:submit:提交按钮 type:reset:重置按钮 type:button:普通按钮 标签为select:下拉框 name属性在select标签上 multiple:可选多项 子项可以通过optgroup来进行分组 label属性用来定义组名 子项为option标签 selected属性,选中控制 必须有value属性

经常听到一个段子说： 大部分伟大的想法都死在配环境上面。 我知道对于一个新手来说，可能配运行环境要比上手写代码要难受的多。所以我就抽时间整了一些在线编程测试的网站，虽然推荐了这些网站，但是还是推荐大家平时写代码的时候在本地用IDE写。 这篇文章的意义在于： 工作或者考研的时候，针对特定的算法题在网站上练习； 一台临时电脑，没有编程环境，但是需要运行代码； 突然需要运行一个自己不常用的语言的代码，自己电脑上没有环境； 想要了解其它系统，自己安装很麻烦，用线上的系统练一下手。 下面是正文，欢迎大家补充： 1、牛客网 要说在线编程网站，肯定要提到牛客网，很多大厂的机试都是在牛客网上进行的，找工作之前，可以在上面找到以前的校招真题进行练习，想刷剑指offer、LeetCode的题也可以在上面刷，不会的题有大神在讨论区分享答案，不仅如此，计算机专业的考研/保研机考在牛客网上也能找到。自带的编译器主流的编程语言都支持（见第二个图）。 2、 LeetCode 算法刷题网站肯定绕不开LeetCode，业界一直有句话说把LeetCode上的题都刷烂熟了就可以进谷歌了。不过上面的题都是英语描述，需要一定的英语基础，还需要一定的算法基础。不过好像LeetCode也有一个中国区网站，算法题目都是中文描述的，觉得看英文费劲的同学可把中国区的网站收藏一下：https://leetcode-cn.com

之前讲到DOM操作时，很多DOM操作的方法都来源于一个叫做document的对象，当然这个对象不只是提供DOM操作的API 这里贴一张菜鸟教程提供的表格，HTML文档中可以使用以下属性和方法: 属性 / 方法 描述 document.activeElement 返回当前获取焦点元素 document.addEventListener() 向文档添加句柄 document.adoptNode(node) 从另外一个文档返回 adapded 节点到当前文档。 document.anchors 返回对文档中所有 Anchor 对象的引用。 document.applets 返回对文档中所有 Applet 对象的引用。 注意: HTML5 已不支持 <applet> 元素。 document.baseURI 返回文档的绝对基础 URI document.body 返回文档的body元素 document.close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 document.cookie 设置或返回与当前文档有关的所有 cookie。 document.createAttribute() 创建一个属性节点 document.createComment() createComment() 方法可创建注释节点。 document

一，HTML部分 1，XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 　　 2，前端页面有哪几层构成，分别是什么?作用是什么? 1, 结构层 Html(页面结构内容，骨架) 表示层 2, CSS（网页的样式和外观） 3, js（实现网页的交互，动画效果） 　　 3，请描述一下 cookies，sessionStorage 和 localStorage 的区别？ cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会 sessionStorage和localStorage的存储空间更大； sessionStorage和localStorage有更多丰富易用的接口； sessionStorage和localStorage各自独立的存储空间； 　　 4，form表单中input标签的readonly和disabled属性有何区别？ readonly=“readonly”是只读，不可以修改， disabled=“disabled”是禁用，整个文本框是显示灰色状态 form 中method是数据传递的方式，action是与后台数据库提交的 　　 5

新建一个配置文件http.js // 导入axios import axios from ' axios ' ; // 全局配置默认路由 axios.defaults.baseURL = ' http://192.168.0.157:8989/xxxx/xxx/ ' ; axios.interceptors.request.use(function (config) { // 这里的config包含每次请求的内容 let token = window.sessionStorage.getItem( ' token ' ) if (token) { // 添加headers config.headers.token = `${token}`; config.headers[ ' content-type ' ] = ' application/x-www-form-urlencoded;charset=UTF-8 ' ; } else {} return config; }, function (err) { return Promise.reject(err); }) 来源： oschina 链接： https://my.oschina.net/u/4419222/blog/3391941

1.初始HTML 超文本标记语言 超文本包括：文字，图片，音频，视频，动画等  html5的优势 世界知名浏览器厂商对html5的支持 市场的需求 跨平台 w3c标准 ​ 结构化标准语言 （html , xml） ​ 表现标准语言(css) ​ 行为标准(DOM,ECMAScript) 2.网页基本信息 <!-- DOCTYPE告诉浏览器，我们要使用什么规范 --> <!-- head标签代表网页头部 --> <!-- title网页标题 --> <!-- meta描述性标签，用来描述我们网站的一些信息，一般用来做seo --> <!-- body标签代表网页主体 --> 3.网页基本标签 标题标签 h1~h6 段落标签 p 换行标签 br 水平线标签 hr 字体样式标签 strong,em 注释和特殊符号 <!-- -->,空格（ ）,大于，小于，版本 <!-- 特殊符号的记忆方式 &就会提示 --> 4.图像标签 常见的图像标签：jpg,gif,png,bmp title属性悬停文字 alt图片名字（必填） 5.超链接标签及应用 文本超链接 href:必填

理解HTML语义化 1、什么是HTML语义化？ <基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等> 　　根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 2、为什么要语义化？ 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看； 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用； 有利于 SEO ：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息： 爬虫 依赖于标签来确定上下文和各个关键字的权重； 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页； 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。 3、写HTML代码时应注意什么？ 尽可能少的使用无语义的标签div和span； 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利； 不要使用纯样式标签，如：b、font、u等，改用css设置。 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体

HTML描述的是网页内容的含义，即语义。语义化标签（semantic HTML）指的是那些使用最恰当的HTML元素进行标记的内容，在标记的过程中并不关心内容的显示效果。HTML定义的是 基本HTML页面的语义，了解一些常见用的HTML元素。可以通过访问 https://www.w3cschool.cn/ 来了解更多关于HTML元素的基本内容。 <head>头部 <body>主体 <a> 超链接 <marquee>滚动字幕 <ol>有序列表 <ul>无序列表 <dl>说明项目条例 <i>定义斜体字 <b>定义粗体文本 <em>定义着重文字 <small>定义小号字 <strong>定义加重语气 <sub>定义下标字H2O <sup>定义上标字c²=a²+b² <ins>定义插入字(文字下方下划线效果) <del>定义删除字(文字中间有一条横线) <code>定义计算机代码 <kbd>定义键盘码 <samp>定义计算机代码样本 <var>定义变量 <pre>定义预格式文本 <abbr>定义缩写 <address>定义地址 <bdo>定义文字方向 <blockquote>定义长的引用 <q>定义短的引用语 <cite>定义引用、引证 <dfn>定义一个定义项目 <form>定义一个表单 <table>定义一个表格 （部分内容） HTML语义化的重要性。 实现了无障碍访问

前端技术学习路线及技术汇总 阶段一、网页开发基础 一.web概述 　　1.万维网发展 　　2.浏览器与服务器　　　　　　　　浏览器运行原理 　　3.网页与网站　　　　　　　　　　HTTP协议 　　4.域名与主机　　　　　　　　　　w3c标准 　　5.HTTP协议 　　6.w3c标准 二、HTML/HTML5 　　1.文件基础标记　　　　7.媒体与绘图标记 　　2.字体与排版标记　　　8.缓存与数据存储　　　　表单元素 　　3.图形与链接标记　　　9.施放与地理定位　　　　H5数据存储 　　4.列表与表格标记　　　10.MathML　　　　　　　WebSocket 　　5.表单元素标记　　　　11.Web　Workers 　　6.内联框架　　　　　　12.Web　Socket 三、CSS/CSS3 　　1.文本与字体样式　　 5.边框与轮廓样式　　　　布局与定位 　　2.背景与尺寸样式　　6.2D与3D特效　　　　　　浮动 　　3.布局与定位　　　　7.过渡与动画　　　　　　盒子模型 　　4.盒子模型 　　 四、JavaScript 　　1.JS语法　　　　 5.错误调试与处理 　　2.JS流程控制　　6.DOM操作　　　　　　JS内置对象 　　3.JS函数　　　　7.DOM属性　　　　　　DOM操作 　　4.JS内置对象　　　　　　　　　　　　　 BOM操作 　　 五、UI设计基础