美文网首页
百度前端学院task1.1.1笔记&心得

百度前端学院task1.1.1笔记&心得

作者: Lareina林暖暖 | 来源:发表于2016-11-24 20:56 被阅读0次

    第一个任务只需要使用基础的html标签即可完成,难度并不大,但是完成的过程中会发现许多小问题,导致与设计稿并不符合。如:一些缩进需要使用特定标签实现,和不同模块之间的间距可以由标签划分开来。

    在学习的过程中,我发现对于html以及html5的常用标签使用的问题不大,但对于一些不太常用的标签,就需要通过查标签手册来深入了解再进行使用。

    对于一些我不经常使用的标签,做出笔记如下

    一、figure标签

    figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

    "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。标签定义figure元素的标题(caption)。

    在本次作业中主要使用figure元素进行一些缩进处理,如下图:

    二、label 标签

    lable标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
    标签的 for 属性应当与相关元素的 id 属性相同。提示和注释:注释:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
    请点击文本标记之一,就可以触发相关控件:

    例:
    <form>
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
    </form>

    结果实现了点击文本触发相应空间的功能

    三、input的某些属性

    placeholder:规定帮助用户填写输入字段的提示。
    size:定义输入字段的宽度。
    checked:规定此 input 元素首次加载时应当被选中。
    type:button(可点击按钮),checkbox(复选框),file(输入字段和 "浏览"按钮),hidden(隐藏的输入字段),image,password(密码),radio(单选框),reset(重置键),submit(确认键),text(单行输入文本框)

    四、语义化标签

    HTML 标签语义化是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。strong,em用来区别于其他文字,起到了强调的作用。 语义化的网页的好处,最主要的就是对搜索引擎友好,有利于SEO(搜索引擎优化)。有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。

    <article> 标签规定独立的自包含内容。
    一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。
    <article> 元素的潜在来源:论坛帖子、报纸文章、博客条目、用户评论

    <aside>的内容可用作文章的侧栏

    相关文章

      网友评论

          本文标题:百度前端学院task1.1.1笔记&心得

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