第一个任务只需要使用基础的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>的内容可用作文章的侧栏
网友评论