j8typz 发表于 2024-6-29 18:28:19

你不晓得的HTML5


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">1、</span>HTML5概念</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML5并<span style="color: black;">不仅</span>只是做为HTML标记语言的一个最新版本，更<span style="color: black;">要紧</span>的是它制定了Web应用<span style="color: black;">研发</span>的一系列标准，<span style="color: black;">作为</span><span style="color: black;">第1</span>个将Web做为应用<span style="color: black;">研发</span>平台的HTML语言。HTML5定义了一系列新元素，如新语义标签、智能表单、多<span style="color: black;">媒介</span>标签等，<span style="color: black;">能够</span><span style="color: black;">帮忙</span><span style="color: black;">研发</span>者创建富互联网应用，<span style="color: black;">同期</span>有令人眼花缭乱的css 3，还<span style="color: black;">供给</span>了<span style="color: black;">有些</span>Javascript API，如地理定位、重力感应、硬件<span style="color: black;">拜访</span>等，<span style="color: black;">能够</span>在浏览器内实现类原生应用，制作webApp，<span style="color: black;">乃至</span>结合Canvas<span style="color: black;">咱们</span>可<span style="color: black;">研发</span>网页版游戏。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">2、</span>HTML5新增部分简介</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.新增的结构标签</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（1）header（头部） （2）nav（导航） （3）section（主体） （4）aside（侧边栏） （5）article （内容）（6）footer（底部）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">功效</span>：与div<span style="color: black;">同样</span>，只是<span style="color: black;">增多</span>了语义性，便于SEO优化。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">拓展：SEO优化<span style="color: black;">能够</span><span style="color: black;">提高</span>网站在搜索引擎中的排名，在前端<span style="color: black;">实质</span>应用中，<span style="color: black;">咱们</span>会<span style="color: black;">更加多</span>的去运用语义化标签，<span style="color: black;">同期</span>针对<span style="color: black;">有些</span>特殊的字符，<span style="color: black;">咱们</span>运用权重高的标签去包裹网站logo。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.新增的智能表单</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.1 input表单新增了type属性值：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="email"限制用户输入<span style="color: black;">必要</span>为Email类型</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="url"限制用户输入<span style="color: black;">必要</span>为URL类型</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="date"自动生成一个日期控件</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="time"同上</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="month"同上</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="week"同上</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="number"限制用户输入<span style="color: black;">必要</span>为数字类型</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="range"产生一个滑动条的表单</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="search"产生一个搜索<span style="color: black;">道理</span>的表单</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="color"生成一个颜色<span style="color: black;">选取</span>表单</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">智能表单在移动端用的比较多，它会调取手机<span style="color: black;">自己</span>的控件。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.2 表单智能验证</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">required =&gt; 验证表单<span style="color: black;">是不是</span>为空，<span style="color: black;">必要</span><span style="color: black;">协同</span>form表单来<span style="color: black;">运用</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">pattern =&gt; 自定义验证表单规则，匹配正则</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">invalid =&gt; 验证失败的时候触发的事件</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">dom.setCustomValidity()=&gt; 自定义弹出的内容 参数：string 自定义的内容</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.3 表单新属性</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">placeholder=&gt; 占位文本，体验更加</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">autofocus =&gt; 自动获取焦点 dom.focus（）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">autocomplete=&gt; 提交一次后下次自动补全 <span style="color: black;">重视</span>：<span style="color: black;">必要</span>提交一次之后，<span style="color: black;">同期</span><span style="color: black;">必要</span>要有name属性</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">multiple =&gt; <span style="color: black;">协同</span>file控件实现多选</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">form =&gt; <span style="color: black;">协同</span>form表单的id值实现<span style="color: black;">相关</span>，在任意位置都<span style="color: black;">能够</span>被提交，<span style="color: black;">然则</span>不<span style="color: black;">意见</span>这么写</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.4 智能表单过滤（datalist）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">类似于搜索提示，输入一个内容会提示<span style="color: black;">关联</span>联的匹配的提示。它是利用表单的list =“datalist的id值”与datalist这个标签取得联系实现的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.5 video和audio标签</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML5中新添了video标签来实现视频的播放而不是借助于flash技术。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">属性：autoplay =&gt;视频默认加载完成后播放；controls =&gt;播放的控件</p>




星☆雨 发表于 2024-8-29 20:12:58

感谢你的精彩评论，带给我新的思考角度。

wrjc1hod 发表于 2024-11-6 04:16:00

楼主的文章深得我心，表示由衷的感谢！
页: [1]
查看完整版本: 你不晓得的HTML5