Girls Coding Day Tutorial
  • 介绍
  • KickOff Party
    • 1.1 教学目的
    • 1.2 软件和工具
    • 1.3 教学方法
    • 1.4 WEB基本知识和历史
    • 1.5 课前自学
  • Intro to HTML
    • 2.1 初识HTML
    • 2.2 HTML常用术语
    • 2.3 解剖网站
    • 2.4 动手 - 修改更多HTML
  • Intro to CSS
    • 3.1 初识CSS
    • 3.2 CSS常用术语
    • 3.3 CSS盒子模型
    • 3.4 使用Chrome开发者工具调试样式
    • 3.5 动手 - 修改更多CSS样式
  • Intro to Bootstrap
    • 4.1 布局
    • 4.2 基础Bootstrap CSS
    • 4.3 组件
  • 大作业
  • 分享
Powered by GitBook
On this page
  • HTML5 Structure
  • 1. 聊聊HTML的元素嵌套规则。
  • 2. 聊聊 自闭合元素（self-closing elements）。
  • 3. 聊聊三种标签元素的区别与特点：
  1. Intro to HTML

2.3 解剖网站

Previous2.2 HTML常用术语Next2.4 动手 - 修改更多HTML

Last updated 5 years ago

HTML5 Structure

Inquiry Learning

尝试向你的同学解释下列概念：

<header> vs. <head> vs. <h1> 三者的区别？

Advice for Tutor： 向同学们解释下图，使学员脑海中网页结构的画面与HTML元素一一对应起来

Learning by Doing

  1. 找一个你喜欢的网站，调出Chrome开发者工具，向跟你结对的同学互相解剖此网站结构。

    • 所有HTML文档都必须符合特定的结构，要求至少包含以下声明和元素：<!DOCTYPE html>，<html>，<head>和<body>。

    • 此练习必须包含以下HTML标签及其属性。

      • h1

      • p

      • li

      • body

      • meta（ charset属性为utf-8 )

      • title

      • head

      • DOCTYPE

      • html

Advice for Tutors:

1. 聊聊HTML的元素嵌套规则。

讲解如何使用Chrome开发者工具定位HTML元素，查看HTML元素的嵌套实例。

2. 聊聊 自闭合元素（self-closing elements）。

例如上面第二个练习题 就只有开标签，没有闭标签。其他常见自闭合标签：<br> <embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>

3. 聊聊三种标签元素的区别与特点：

块元素

div,ul,li,dl,dt,dd,p,h1-h6,blockquote

块级元素的特点：

  • 总在新行上开始，占据一整行

  • 默认情况下，其宽度自动填满其父元素宽度

  • 宽度始终是与浏览器宽度一样，与内容无关

  • 它可以容纳内联元素和其他块元素

  • display属性为block

  • 块级元素的垂直相邻外边距margin会合并。

内联元素

a,b,span,img,input,strong,select,label,em,button,textarea

内联元素的特点：

  • 和其他元素都在一行上

  • 高，行高及外边距和内边距部分可改变

  • 宽度只与内容有关

  • 行内元素只能容纳文本或者其他行内元素

  • display属性为inline

  • 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。

  • 不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。

空元素

br,meta,hr,link,input,img

空元素的特点：

  • 没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。

打开网站 ， 在HTML编辑框建立自己的第一个HTML文档，并请教练审阅。

https://codepen.io/pen/