HTML5入门教学

1. 概念

HTML就是静态网页

  • 你在浏览器上看到的任何东西的都是网页

官方名称:超文本标记语言

  • 超文本:可以定义图片,连接,表单,音乐

  • 标记:标签

    • 标签名定义在尖括号中,一般有开始有结束

    • 每个标签代表浏览器中一个样式

     
    

2. 创建html

  • 创建一个html格式文件

  • 定义html标签

    • 所有的页面标签都必须定义在html标签中

  • 定义head标签

    • 定义页面引入的静态资源

  • 定义body标签

    • 定义所有需要显示在页面中的样式


    
    
​
    
        this is my first html
    
​

3. 安装IDE

编写html,选择使用HBUILDER

下载地址:HBuilderX-高效极客技巧

4. 标签

1. 结构标签

  • html

  • head

    • title

    • meta

  • body


 
 
  
​


    
    
    
        
        我的第一个html
    
    
    
    
        
        

这是我们的第一个html

2. 块级标签

块级标签: 能够自动换行

  • h1-6

  • p

  • hr

  • br

  • div

    
    
        
            
            块级标签
        
        
            
            
            

    观沧海

    观沧海

    观沧海

    观沧海

    观沧海
    观沧海
    观沧海

    东临碣石,

    以观沧海。

    水何澹澹,

    山岛竦峙。

    金樽清酒斗十千,
    玉盘珍羞直万钱。
    停杯投箸不能食,
    拔剑四顾心茫然。
    欲渡黄河冰塞川,
    将登太行雪满山。

    东临碣石,

    以观沧海。

    水何澹澹,

    山岛竦峙。

3.行内标签

行内标签: 这种标签不会自动换行

  • span

  • b

  • strong



    
        
        
    
    
        
        
        

东临碣石,

以观沧海

水何澹澹,

山岛竦峙。


当你觉得为时已晚,恰恰是最早的时候。

4. 图片标签

在html中可以使用 标签展示图片

img

src:定义图片路径
width:图片宽度
height:图片高度


    
        
        
    
    
        
         
         
        
        
        
        
        
        
    

5. 列表标签

  • 无序列表 ul

  • 有序列表 ol



    
        
        
    
    
        
        
        手机品牌:
        
  • 华为
    • mate系列
    • p系列
    • Nova系列
  • 小米
  • OPPO
  • VIVO
茶叶:
  1. 黄山毛峰
  2. 六安瓜片
  3. 霍山黄牙
  4. 舒城小兰花
  5. 岳西翠兰
  6. 太平猴魁

6. 超链接标签

我们可以一个页面上通过超链接标签发起一个新的路径请求



    
        
        
    
    
        
        
        百度
        qq
        
        
        demo06
        
        
    

7. 表格标签

  • table

  • tr

  • td

  • thead

  • tbody



    
        
        
    
    
        
        
         
         
         
         
         
id name teacher_id
1 java 1
2 军事 3
3 心学 3
  • colspan

  • rowspan



    
        
        
    
    
        
        
        
        
课程表
周一 上午 语文
下午 java
晚上 mysql
周二 上午 语文
下午 语文
晚上 语文

8. 表单

  • form

    • action

    • method

  • input

    • text

    • pasword

    • radio

    • checkbox

  • select

    • option

  • textarea

    • rows

    • cols



    
        
        
    
    
        
         
         
用户名:      
密码:  
出生日期:    
性别 :男   女    
    爱好 :游泳   击剑     铅球  
      家乡:
自我介绍:

你可能感兴趣的:(html5,html)