HTML（2017.5.8）学习笔记

元素——基本的构造区块

HTML由不同元素的集合组成。元素定义了它们所包含内容的语义。元素包含了两个相匹配的元素标签（tag）之中所有的内容，当然也包含了标签本身。标签的完整列表
大部分的元素都支持元素嵌套，构成了一个层次结构。 一个简单的完整的网页结构例子如下所示：

  
    
  
  
    
你在学习HTML的起始页面
  

标签

HTML 为由一对尖括号（<>）所括起来的内容赋予了特定含义. 这样的标识称为一个 标签（tag）. 例如:

这是段落中的文本。
```
上述例子中有一个起始标签（start tag）和一个结束标签（end tag）。结束标签与起始标签在内容上是一样的，但结束标签会在小于符号（<）后多一个整斜线/。 大多数 HTML 元素由一个起始标签和一个结束标签标识。起始标签和结束标签应成对出现，也就是说在一个起始标签之后应有其对应的结束标签。  由两个标签（起始标签和结束标签）构成的元素而言，缺少其中之一，这个元素都可能会被认为是无效的。
#属性
开始标签可能包含一些信息，这些信息叫做元素的特性，包括两部分:
- 特姓名
- 特性值

一些元素可以只有特性名没有特性值。它们的特性名类似“是否”，“有或没有”，所以可以省略特性值，所以下面三种写法都是一样的意思:

```

特性值如果有包含空格就要用引号，单双引号都可以。如果特性值是单个词就可以不用引号，但为了避免出错和易于识别一般会加上引号

命名字符参考

命名字符参考 (一般被称作实体) 用于表示在HTML中具有特定含义的字符. 举例说，HTML将“>”和“<”符号理解为标签分隔符。所以，当你想在文本中用">"符号表达“大于”的含义时，你可以使用命名字符参考来作为替代。 以下例举了四个非常重要的常用实体：

> 表示大于符号">" (>)
< 表示小于符号"<" (<)
& 表示和符号"and"(&)
" 表示引用符号" (")```
[其他命名字符参考](https://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html)
#文档类型和注释
除标签，文本内容和实体外，一个HTML文档一定需要在**第一行做出文档类型声明(doctype declaration)**。在现代HTML中，这句声明书写如下：

```
注释格式如下：

```
#一个完整且精简的文档

Main heading in my document

Loook Ma, I am coding HTML.

```
今天我做的例子代码：

  
    
    
  
  
    
网站一级标题
    

      
 导航链接一
      
 导航链接二
      
 导航链接三
      
 导航链接四
    
    
文章一级标题
    
文章二级标题
    
文章作者 文章发表时间
    
这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    
这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    
这是一个很长的段落 这是一个很长的段落 这里有一个链接链接到www.baidu.com 这是一个加粗这是一个很长的段落 这是一个很长的段落

    ![](1.jpg)
    
这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    
这是一个很长的段落 这是一个很长的段落 这里有个粗体字 这是一个很长的段落 这是一个很长的段落 这里有一个链接链接到www.baidu.com这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    
另一篇文章一级标题
    
文章二级标题
    
这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    
这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了

    
这是一个很长的段落 这是一个很长的段落 这里有一个链接链接到www.baidu.com这是一个很长的段落 这是一个很长的段落

     
    

      
 列表一
      
 列表二
      
 列表三
    
    
图片
    
好看的图片
 
     

    
好看的图片
     

    
好看的图片
    
    
最后一篇文章一级标题
    

      文章二级标题
    
    

      文章作者 文章发表时间
    
    

      
排名一
      
排名二
      
排名三
    
    

      

        
表头
        
表头
        
表头
      
      

        
表内容单元格
        
表内容单元格
        
 操作
      
      

        
表内容单元格
        
表内容单元格
        
 操作
      
      

        
表内容单元格
        
表内容单元格
        
 操作
      
      

        
表内容单元格
        
表内容单元格
        
 操作
      
      

        
总计
        
100
      
    
    
这里以后是一个侧栏，这是侧栏的标题
    

      侧栏注册窗口标题
    
    
请输入邮箱地址：
    
请输入密码：请重复输入密码：
    

      密码请为6-16位英文数字
    
    

    性别：
      女
      男
    城市：
      
        北京
        上海
        重庆
        杭州
      
    爱好：
      艺术
      运动
      科学
    个人描述：
      这是一个多行输入框请在这里输入内容
      
    
  
  

展示效果：https://thimble.mozilla.org/zh-CN/user/zhang-boyi-911/955634