HTML+CSS复习之HTML基础篇

一些说明

写在前面：HTML和CSS，当你了解所有规则后，你应该多写页面并记录你出现的问题，这才是学习HTML和CSS的最佳方法

这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识

我把HTML标签分成两大类，重要的和不重要的，希望大家都能从众多标签中解脱出来！！

本文的宗旨，简明扼要！最快入门 HTML (把我给出的代码不断地敲，并且适当加点个性化的东西，HTML标记语言你就入门了)

温故而知新

HTML，超文本标记语言（HyperText Markup Language）只是标记，没有任何逻辑，学习起来会很快的

结构如下：

这里写了可以出现在head内的所有标签
  //HTML5的文档声明，现在都用这种方式了
           //文档的根
             //文档的头部信息
         //表示该文档是以UTF-8编码的
    菜鸟教程(runoob.com)    //页面标题
    //为搜索引擎定义关键词:
    
    //为网页定义描述内容:
    
    //定义网页作者:
    
    //每30秒中刷新当前页面:
    
    
    
    
    
    
    //该标签作为HTML文档中所有的链接标签的默认链接:
    
  
             //网页主题部分
    我的第一个标题
    我的第一个段落。
  

关于文档声明：(了解即可，没什么作用)
HTML4.01

XHTML 1.0

tips:注释长啥样？

直击主题：HTML标签

来，我们来看看HTML的标签都有哪些

h1 ~ h6 , p , a , img , button , caption , dd , dl ,dt, ul ,li , fieldset , from , iframe , input ,label , select , table td ,tr , tbody , tfoot , thead ，hr , html , body head title meta style script ,input , label , legend , div , span

基本上你只要看到这个标签，懂这个标签一般是怎么用的就OK了！

重点掌握的标签有（一些特别基础性的标签不在此之内）

超链接标签a：只要是a标签能包含啥，那个被包含的都是超链接

a的常用方法如下：

1、
2、电子邮件 
3、取消链接 
4、锚点 可以链接到本页面id为tips的元素，用于页面内跳转
hello

图像标签img:

img[src,title,alt,width,height]
![](xxxx.png)
alt : 当图片无法加载时替代图片，一般都要写的
1、图片一个特殊用处(结合map,基本不用)
  ![](planets.gif)

表格

一般我们写表格的时候，table>tr>td(th)，采用这三层结构

一个完整的表格结构是这样的
  
         .....
      
         ......
      
        ......

属性注意

 //设置整个table的边框，外框和内框
  //相当于设置这个表格每个单元格的 padding 为 10px 
  //相当于设置这个表格每个单元格的 margin  为 10px
 // 这个单元格跨了两列 tr也可以用
 //这个单元格跨了两行 tr也可以用
 
  
  列表 
  
 有序列表 
 
    
    
    ...

 
 无序列表 
 
    
    
    ...

 
 无序列表和有序列表，可以更改前面的标记类型，但是不常用，采用图片或者iconfont居多，可以采用list-style-image：url("xxx.png) ；来设置，这个在CSS学习笔记中会详细说明 
 列表支持嵌套 
 自定义列表 
 dl   注意一个dl里面最好只有一个dt，行业潜规则 原意是解释名词，
 dt  一般一条信息，只解释一个名词,也就是一个dt
 dd
 dd
 dd
dl
 
  
  div -- 最具有代表性的块级标签 
  
 通常用于布局，很常见的div+css布局，为什么采用div呢？因为div是一个容器元素，div内部可以包含很多标签，
 div内部可以有div的
 div是块级标签，注意，任何块级标签写在页面上，宽度都是占据父容器的百分之百，除非你设置块级元素的宽度，具体的怎么排版，请看这篇：HTML+CSS复习之CSS基础篇 
  
  span -- 最具有代表性的行级标签 
  
 span是一个行级标签，所谓行级标签的意思是，内容有多大，我在页面中占据的位置就有多大（内容+padding） 
  
  input --表单 
  
 表单的属性特别多，可以去W3C看一遍，这里就不详细讲了，毕竟是写个入门啦。表单主要用作数据传递，所以对表单的理解，就是要搞明白，表单的那些属性是怎么回事
 一个表单完整书写 
 

    //文本框
    
    
    //密码框
    
    
    //单选框（注意name要相同,是同一类行的选择，以便后台拿到数据）
    Male

    Female
    
    //多选框（注意name要相同,是同一类行的选择，以便后台拿到数据）
    I have a bike

    I have a car 
    
    //下拉框
    

    //这种是为下拉框分组
    
    
    //文本域
        我是一个文本框。
    

    //提交按钮，下面的提交按钮，默认提交到action地址
    
    

    //这是另外一种形式的表单，注意其中的区别即可，
    //fieldset标签也只会在这种场合使用了
    
      Personal information:
      Name: 

      E-mail: 

      Date of birth: 
    

    //datalist标签，input的list属性绑定到datalist的id，就可以完成这项工作了
    
      
        
    
    
    //注意label标签 , 通过绑定input的id来实现在label出点击获取焦点，有两种写法
    用户名   
    
    Hello

 
 实例如下： 
 用户名      Hello   
 注意: Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。 
  
  output标签，顾名思义，输出标签，那么从何处输入，定义规则是怎么样的呢？ 
  
 form定义规则 ，那么你可不可以写一个升级版的呢？ 
 0
    100  //数据源
    +   //数据源
    =      //计算出结果

 
  
  iframe 一般重要的标签 
  
 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 
 
iframe显示的地址页面内容，制定高度和宽度，frameborder移除边框
 
 用iframe来显示页面内部链接 
 
Google
 
 全局属性 
 这些属性，基本上不怎么使用，了解即可。
 accesskey 规定激活元素的快捷键。
 一下元素支持accesskey属性 
 , ,