html实践——IFE task 01

====任务描述====

原链接:http://ife.=baidu.com/task/detail?taskId=1

任务目的

  • 了解HTML的定义、概念、发展简史
  • 掌握常用HTML标签的含义、用法
  • 能够基于设计稿来合理规划HTML文档结构
  • 理解语义化,合理地使用HTML标签来构建页面

任务描述

  • 参考示例图(点击查看),完成一个HTML页面代码编写(不写CSS,不需要关注样式,只关注文档结构)

任务注意事项

  • 只需要完成HTML代码编写,不需要写CSS
  • 示例图仅为参考,不需要完全实现一致,其中的图片、文案均可自行设定
  • 尽可能多地尝试更多的HTML标签

====总结====

1. 基础

(1)<!DOCTYPE>:定义文档类型

(2)<html></html>:限定了文档的开始点和结束点,在它们之间是文档的头部和主体.

(3)<body></body>:定义文档的主体。

(4)<head></head>: 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

(5)<title></title>:定义文档的标题,它是 head 部分中唯一必需的元素。

(6)<meta>:可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

如:<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

>> http-equiv属性:指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

>> content属性:该值可以是任何有效的字符串。content 属性始终要和 name 属性或 http-equiv 属性一起使用。

2. 文本

(1)<h1>~<h6>:定义html标题

(2)<p></p>:定义段落

(3)<br/>:简单的换行

(4)<hr>:定义水平线

(5)<em></em>:定义强调文本。字体会变成斜体

(6)<strong></strong>:定义语气更为强烈的强调文本。字体会加粗

(7)<b></b>:定义粗体文本

(8)<i></i>:定义斜体文本

(9)<article></article>:规定独立的自包含内容

(10)<img>:向网页中嵌入一副图片

属性:

>>alt:规定图像的替代文本

>>src:规定显示的图像的URL

>>定义图片的宽度

>>height:定义图片的高度

3. 链接

<a></a>:定义超链接,用于从一张页面链接到另一张页面。

(1)href属性:值为url,规定链接指向的页面的 URL。

(2)target属性:规定在何处打开链接文档。

4.列表

(1)<li></li>:定义列表的项目

(2)<ul></ul>:定义无序列表

(3)<ol></ol>:定义有序列表

5.表格

 (1)<table></table>:定义表格

(2)<th></th>:定义表格中的表头单元格

(3)<tr></tr>:定义表格中的行

(4)<td></td>:定义表格中的单元

6.表单

(1)<form></form>:提供用户输入的html表单

(2)<input>:定义输入控件

属性:

 >>type:规定input元素的属性

>>value:规定input元素的值

>>name:定义input元素的名称

>>checked:规定此input元素首次加载时,应该被选中

>>disabled:当input元素加载时,禁用此元素

(3)<selected></selected>:定义选择列表(下拉列表)

(4)<option></option>:定义下拉列表中的一个选项

(5)<textarea></textarea>:定义多行的文本输入控件。

属性:

>>cols:规定文本区内可见的宽度。

>>rows:规定文本区内可见的行数。

>>name:规定文本区域内的名称

>>readonly:规定文本区域为只读

(6)<lable></lable>:为input 元素定义标注(标记)

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。 就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

提示和注释:
注释:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

 

原文地址:https://www.cnblogs.com/mmmaolj/p/5909409.html