zoukankan      html  css  js  c++  java
  • 零基础HTML编码学习笔记

    任务目的

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

    任务描述:完成一个HTML页面代码编写(不写CSS,不需要关注样式,只关注文档结构)

    任务注意事项

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

    总结

    一、涉及HTML标签

    1、<header>标签(Header Element):是一个装载介绍性内容或一组导航链接的容器。

    2、<nav>标签:定义一组导航链接。

    3、<main>标签:页面主体内容,该内容在页面中是唯一的,且不包含页面中的重复内容,比如:侧边栏、导航链接、版权信息、网站logo和搜索框。

    4、<aside>标签:定义一些与周围内容相关的其他内容。

    5、<footer>标签:定义页面的脚部,可以为:作者信息、版权信息、联系信息、网站地图、返回页面顶部的链接、相关文件。一个页面中可有多个<footer>标签。

    6、<article>标签:定义一段独立、自成体系的内容,它本身有完整的含义,可以独立于页面其他内容存在。

    7、<hgroup>标签:是<h1>-<h6>标签的集合,用来定义多层级标题。

    8、<ul>标签:无序列表(unordered list)。<li>标签定义无序列表的列表项。

    9、<ol>标签:有序列表(ordered list)。<li>标签定义有序列表的列表项。

    10、<dl>标签:描述性列表(description list)或定义列表。与<dt>标签(defines terms/names,定义项即标题)和<dd>标签(describes each term/name,定义描述即解释)一起使用。

    11、<form>标签:可包含一个或多个以下标签:<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>。

    12、<input>标签:定义一个用户可以输入数据的输入区域。

    (1)type属性:type属性定义输入区域的形式,属性值有:button、checkbox、color、 date、datetime-、local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week。

    (2)checked属性:使用于checkbox、radio等类型,定义页面加载后预先选定<input>元素,属性值:checked。

    (3)name属性:定义<input>元素的名称。属性值:文本。

    (4)value属性:定义<input>元素的值。属性值:文本。

    13、<select>标签:产生下拉列表。<select>标签内部的<option>标签定义列表的可选项。

    14、<textarea>标签:多行文本输入框,可由cols和rows属性定义文本框大小。

    (1)cols属性:文本框可视宽度,属性值:数字。

    (2)rows属性:文本框可视行数,属性值:数字。

    15、<table>标签:定义HTML表格。表格由一个或多个<tr>( defines a table row)、<th>( defines a table header)、<td>( defines a table cell)标签组成。

    (1)border属性:围绕表格的边框的宽度。属性值:pixels值。

    (2)<td>标签的colspan属性:单元格跨的行数。属性值:数字。

    16、<a>标签:超链接,用于从一个页面链接到另一个页面。

    (1)target属性:打开链接的方式。属性值:_blank、_parent、_self、_top、framename。

    二、遇到问题

    1、字体加粗

    HTML5中规定:使用<h1>到<h6>定义标题,强调内容(emphasized text)使用<em>标签,重要文本使用<strong>标签,突出高亮显示的文本使用<mark>标签,当以上情况都不符合时使用<b>标签加粗字体。

    同时,可以使用CSS的“font-weight”属性加粗字体。

    三、已提交作业

    代码地址:https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/任务一:零基础HTML编码

    Demo地址:http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/任务一:零基础HTML编码/index.html

  • 相关阅读:
    POJ 3114 Tarjan+Dijkstra
    278. First Bad Version
    209. Minimum Size Subarray Sum
    154. Find Minimum in Rotated Sorted Array II
    153. Find Minimum in Rotated Sorted Array
    710. Random Pick with Blacklist
    767. Reorganize String
    524. Longest Word in Dictionary through Deleting
    349. Intersection of Two Arrays
    350. Intersection of Two Arrays II
  • 原文地址:https://www.cnblogs.com/melbourne1102/p/6441370.html
Copyright © 2011-2022 走看看