技术文章 | Technical articles

html5源码笔记——前端培训机构

一、html5基本骨架更简单


 <!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>document</title>

</head>

<body>

    

</body>

</html>

 

二、html5语言特性

单标签可以不使用  /  结束

    <img src="./images/0.jpg" alt="">

    <input type="text">

 

html属性值可以不再使用双引号进行包裹

<input type=button value="我就不加双引号">

 

标签名大小写都合法

<button>我是大写的button 我们没有什么不同</button>

 

所有的type都不用写了

<script></script>

    <style>

        button{

            border: solid 4px red;

        }

    </style>

    <link rel="stylesheet" href="">

 

布尔型属性,可以不用写布尔值

三、html5中可以用来替换div的语义化新标签

<!-- html5中的新标签 header  footer  section nav -->

 

    <!-- 头部标签header  可以用来标识页面的头部或者是页面中某个区域的头部 -->

    <header class="">header部分</header>

 

    <!-- 导航标签nav 一般用来标识页面中的导航部分 -->

    <nav class="">

        <!-- logo部分 -->

        <h1 class="logo"></h1>

        nav部分

    </nav>

 

    <!-- banner部分 -->

    <div class="banner">banner部分</div>

 

    <!-- 页面中主要内容区域部分section标识 -->

    <section class="">

        section部分

        <!-- 设置边栏 aside -->

        <aside></aside>

        <!-- 文章,微博评论等等 artical -->

        <artical>

            <!-- 文章可能会有大标题  多个副标题 那么我们会将他们作为一个群组 hgroup -->

            <hgroup>

                <!-- 标题群组部分 -->

            </hgroup>

            <div class="content">

                 内容区域

                 图文结合

                <!-- 独立的流内容  设置图片 表格 表单等等 -->

                <figure>

                    <img src="./images/1.jpg" alt="">

                    <figcaption>给独立的流内容添加标题</figcaption>

                </figure>

            </div>

        </artical>

    </section>

 

    <!-- 脚部标签footer 可以用来标识页面的脚部或者是页面中某个区域的脚部 -->

    <footer>

        <div class="ft-top"></div>

        <div class="ft-copy"></div>

    </footer>

 

四、html5中其它语义化标签的介绍

time  修饰时间

mark  高亮显示

detailssummary

<details> 标签用于描述文档或文档某个部分的细节。<summary> 元素包含 details 元素的标题,<details>元素用于描述有关文档或文档片段的更多详情。

 

    <!-- 普通文本 -->

    黄河之水天上来

    <!-- 高亮显示 -->

    <mark>疑是银河落九天</mark>

    <!-- details 描述细节    summary类似与总结,details的标题 一般情况下两个配合使用-->

    <details>

        <summary>静夜思</summary>

        <p>窗前明月光</p>

        <p>低头思故乡</p>

        <p>举杯邀明月</p>

        <p>对影成三人</p>

    </details>

 

四、html5中的表单新特性

4.1 form与控件的关联  在不包含控件的情况下,可以给控件form属性与表单id属性关联

4.2 label标签可以直接包裹控件

4.3 表单中新增type类型

date  

month

week

time

search

tel

email  自动验证功能 需要包含@

url  自动验证功能  http://     https://   开头

color

number

range

注意:以上需要考虑浏览器兼容性,部分浏览器部分效果不兼容

    <form action="get" target="_blank" id="des">

       <label>请输入关键字</label> <input type="search" ><br >

       <label for="username">用户名</label> <input type="text" id="username" name="username">

       <div>

           <label>性别:</label>

           <label><input type="radio" name="sex" id=""></label>

           <label><input type="radio" name="sex" id=""></label>

        </div>

        <div>入职日期:<input type="month"></div>

        <div>公司成立的第几周:<input type="week"></div>

        <div>公司邮箱:<input type="email"></div>

        <div>公司网址:<input type="url"></div>

        <div>你喜欢的颜色:<input type="color"></div>

        <div>你喜欢的数字:<input type="number"></div>

        <div>滚动条:<input type="range"></div>

       <input type="submit">

    </form>

    <h2>隔开</h2>

    <p>隔开</p>

    <label for="date">出生日期:</label> <input type="date" id="date" name="date" form="des">

 

4.4 表单新增属性

placeholder  信息提示文本

autofocus   自动获取焦点  提示:如果有多个,默认以第一个为准

required  必填项

disabled  禁用

readonly  只读

multiple  多选

size 页面显示数量

    <form action="" method="get" target="_blank">

        <input type="search" placeholder="请输入查找内容" autofocus> <button>点击查找</button><br>

        用户名:<input type="text" required><br>

        密码:<input type="password" name="pass" value="123456" disabled><br>

        公司名称:<input type="text" name="com" value="爱创课堂" readonly><br>

        <input type="submit">

    </form>


微信个人号二维码.jpg

完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


关注微信公众号“icketang”,获取最新前端资讯,学习资料

B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg

上一篇文章: css源码笔记(六)——前端培训机构
下一篇文章: html5源码笔记——前端开发培训机构
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>