zoukankan      html  css  js  c++  java
  • 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 属性的值。

     

  • 相关阅读:
    background-position-x和background-position-y的兼容性问题
    用SVGDeveloper制作svg地图
    实现绝对定位元素水平垂直居中的两种方法
    用-webkit-box-reflect制作倒影
    解决ul的li横向排列换行的问题
    用echarts.js制作中国地图,点击对应的省市链接到指定页面
    css3制作扇形菜单
    IE7中a标签包含img,点击img,链接失效的bug
    ie7中position:fixed定位后导致margin:0 auto;无效
    背景图片铺满全屏的方法
  • 原文地址:https://www.cnblogs.com/mmmaolj/p/5909409.html
Copyright © 2011-2022 走看看