美文网首页
Udemy网页课程2-HTML

Udemy网页课程2-HTML

作者: 磊_5d71 | 来源:发表于2018-08-01 10:46 被阅读0次

    http://example.com/  查看网页源代码(简单的网页模版)


    网页结构

    <html>

    <head>

    <title>标题</title>

    </head>

    <body>

    <div>将网页内容分成一段一段来处理</div>

    </body>

    </html>


    文件头

    <h1></h1>... <h6></h6> 从h1到h6 字体逐渐变小

    <br />break line 换行,换行之间的间距很小 html5可以不加反斜杠

    <hr /> 添加分割线


    格式化文字 

    <p></p> paragraph 设置段落,段落之间的间距较大

    <strong></strong> 加在其间的字体加粗

    <em></em> emphasis 加在其间的字体倾斜

    <u></u> underline 加在其间的字体有下划线

    <strike></strike> 加在其间的字体有删除线


    unorderlist 

    <h4> top cryptocurrency</h4>

    <ul>

    <li>bitcoin</li>

    <li>ethereum</li>

    <li>eos</li>

    </ul>

    输入效果如下:


    orderlist

    <h4>promising technology</h4>

    <ol>

        <li>big date</li>

        <li>AI</li>

        <li>blockchain</li>

    </ol>

    输入结果如下:


    添加图片

    <img src = "a.png"  />  调用本地保存的图片

    <img src = "http://img0.imgtn.bdimg.com/it/u=3965859710,1647615842&fm=27&gp=0.jpg" width ="500" height = "300" /> 调用互联网上的图片 并可以设置图片宽度width,图片高度height。


    添加表单

    <form>

    <input type = "email" placeholder = "请输入邮箱">  <!-- 提示输入邮箱 -->

    <textarea></textarea>   <!-- 输入一段文件,长度可动态调整 -->

    <select>                        <!-- 选择项 -->

        <option>A</option>

        <option>B</option>

    </select>

    <input type = "radio"> 红色 <!-- 单选择项,没有约束,可以所有选项同时选择 -->

    <input type = "radio"> 蓝色

    <input type = "radio" name = "颜色选择">红色 <!-- 有name约束,只能选择其中一项 -->

    <input type = "radio" name = "颜色选择">蓝色

    <input type = "checkbox"  name = "dog"> 狗 <!-- 多选项,name不同选择多个,以对勾选择展示 -->

    <input type = "checkbox"  name = "cat"> 猫 

    <input type = "checkbox" name = "fish"> 鱼

    <input type = "submit" value = "click me!"> <!-- 提交,将相关选择数据传到后台 -->

     </form>


    超链接

    href = hyperlink reference

    <a href = "http://www.baidu.com">baidu</a> <!-- 指向百度的超链接-->


    HTML Entities 

    https://www.tutorialspoint.com//html/html_entities.htm  //在此网站可以查询相关的子令

    &lt;a> 相当于<a>



    Iframe  引用其他网页资源 视频等

    <iframe height=498 width=510 src='http://player.youku.com/embed/XMzY2MDk5MDI2MA==' frameborder=0 'allowfullscreen'></iframe>


    HTML5 播放音频

    <audio controls>

        <source src ="111.mp3" type = "audio/mpeg" > <!-- 考虑兼容也可以使用audio/ogg -->

    </audio>


    HTML5 输入框

    标签框

    <label for="form-name">click this table</lable>

    <input type="text" id ="form-name">

    搜索框

    <label for="form-search">search</lable>

    <input type="search" id ="form-search">

    邮箱框    

    <label for="form-email">email</lable>

    <input type="email" id ="form-email">

    url

    <label for="form-url">url</lable>

    <input type="url" id ="form-url">

    数字框

    <label for="form-number">number</lable>

    <input type="number" id ="form-number" min ="1" max="100" step="10">

    数字范围框

    <label for="form-range">range</lable>

    <input type="range" id ="form-range" min ="1" max="1000" value="10">

    日期框

    <label for="form-date">date</lable>

    <input type="date" id ="form-range" min ="2000-1-1" >

    颜色

    <label for="form-color">color</lable>

    <input type="color" id ="form-color" >


    相关文章

      网友评论

          本文标题:Udemy网页课程2-HTML

          本文链接:https://www.haomeiwen.com/subject/rohfvftx.html