美文网首页
百度前端学院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笔记&心得

    第一个任务只需要使用基础的html标签即可完成,难度并不大,但是完成的过程中会发现许多小问题,导致与设计稿并不符合...

  • 2019-10-24

    尽快完成百度前端学院,找到工作。

  • 零基础前端学习笔记01

    零基础前端学习笔记 今天开始第一天的前端学习,学习内容来自导师推荐的百度前端技术学院 我本身是学习测控技术与仪器专...

  • 扁平数组与多级菜单转换

    最近在复习前端基础,在百度前端技术学院看到的题。 我的代码如下:

  • 快速建一个代码 Demo

    看到一些团队提交的代码没有 Demo 地址,就分享一下自己的方法 百度前端技术学院学习笔记 最终效果 http:/...

  • vue(8) - 收藏集 - 掘金

    2017 百度前端技术学院——vue 源码分析之动态数据绑定一 - 前端 - 掘金一、Object.keys() ...

  • 小白入门:git上传代码到github

    最近在百度前端技术学院开始学习前端的基础知识——HTML ,CSS , JavaScript . 今天的一大收获便...

  • 活动#2 来百度前端学院刷题吧

    百度前端技术学院诞生于2014年,由百度最大规模的前端技术组织 EFE 团队发起成立。在去年,有超过了一万一千名同...

  • 前端札记

    简书专辑-Web 前端入门 基础碎片化教学w3cschool 菜鸟教程 系统教学百度前端技术学院HTML Tuto...

  • 语义化标签,和类名说再见

    百度前端技术学院学习笔记 由于在第一阶段的任务一中,也就是编写页面结构中较多的使用了HTML5规范中新增的“语义化...

网友评论

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

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