HTML基础

一、开发软件

• 谷歌浏览器/火狐浏览器(两个皆能查看网页源代码,区别在于谷歌里面是英文,火狐里面是中文)
• 记事本/HBuilder(编写HTML的软件)

二、HTML的基本框架

在HBuilder中直接创建文件会出现基本框架

html的整个框架包括head(头部)和body(身体),可以把html比作房子,那么body即为这栋房子的基本架构,而head(或者说是CSS)则是装修,而标签就是用来构造这个基本架构

三、HTML的基本标签

1. 标签的基本语法

<标签名>文本

2. 标题标签

1级标题
2级标题
3级标题
4级标题
5级标题
6级标题

3. 段落标签

段落
 //自动换行

4.加粗,倾斜,下划线

加粗文本
倾斜文本
加下划线的文本

5.换行,水平线

因为HTML语言是不会自动换行的,需要类似p标签才会自动换行

 // 换行
 // 一条水平线

6.超链接标签

文本 // href里面填写要跳转到的页面的链接,如果填写的是#则回到原本的页面

7.图片标签

 // src中放本地图片的地址,或者网上的图片的链接

8.列表标签

• 无序标签

    
1
    
2
    
3
  
# ul代表无序列表,一个li为一个列

• 有序列表

    
1
    
2
    
3

# 有序列表会标出该列是第几列

9.表格标签

    

        
1
        
2
        
3
    
    

        
1
        
2
        
3
    
    

        
1
        
2
        
3
    

# tr为行,td为单元格,该代码生成3*3表格

10.div和span标签

 // 常用来布局
 // 常用来放置文本

11.表单控件

• 表单结构

            

# action为表单中内容提交到的网页,method为提交方法

• input

#基本语法
 
#文本框,显示一个可以输入的文本框
 // value的值为文本最初显示的值
#密码文本框,显示一个可以输入密码的文本框

#按钮控键,显示一个可点击的按钮
 // value为按键里面显示的文本
#提交按键,一个可以提交表单内容到action的按钮
 // value不写的话默认为提交
#重置按键,一个可以重置表单的按钮

#多选框
男
女
//哪个标签里面有checked="checked",默认打钩,可多选
#单选框
男
女
//不可多选
#下拉框

    1
    2
    3

//显示一个可下拉选择的框体,option内的内容为下拉框显示的内容