如何动手做一个属于自己的网页——HTML基础知识总结

目录

HTML简介

特殊字符

HTML标签介绍

常用标签介绍

1.字体标签

2.标题标签

3.超链接

4.列表标签

5.img标签

6.表格标签

7.iframe框架标签(内嵌窗口)

8.表单标签

 表单提交的细节

9.其他标签(div、span、p标签)

HTML简介

        Hyper Text Markup Language (超文本标记语言),简写成HTML

        HTML通过标签来标记要显示的网页中的各个部分，网页文件本身就是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

特殊字符

        空格是HTML中最普通的字符实体

        通常情况下，HTML会裁掉文档中的空格，因此我们要用字符实体来实现一些这些功能

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
=	等于号	"	"
'	撇号	'(IE不支持)	'

    
    


    
    我是<br>换行标签

HTML标签介绍

1.标签的格式：

        <标签名>封装的数据

2.标签名大小写不敏感

3.标签拥有自己的属性

        i.分为基本属性：bgcolor="red"——可以修改简单的样式

        ii.事件属性：οnclick="alert('你好');"——可以设置事件响应后的代码

        alert()是javaScript语言提供的一个警告框函数，它可以接收任意参数，参数是警告框的函数信息

4.标签又分为单标签和双标签

        i.单标签格式：<标签名/>

        ii.双标签格式：<标签名>...封装的数据...

常用标签介绍 1.字体标签

字体标签
    需求：在网页上显示 我是字体标签，并修改字体为宋体，颜色为红色
    font标签是字体标签，可以修改文本的字体，颜色，大小
        color属性修改颜色
        face属性修改字体
        size属性修改文本大小
 

    
    


    我是字体标签

2.标题标签

标题标签
  需求：演示标题1到6
  h1-h6都是标题标签
  h1最大
  h6最小
    align 属性是对齐属性
        left    左对齐（默认）
        center  居中
        right   右对齐
 

    
    


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

3.超链接

a标签是超链接
        href属性设置连接的地址
        target属性设置哪个目标进行跳转
            _self   表示当前页面
            _blank  表示打开新页面来进行跳转

    
    


    百度

    百度

    百度

  

4.列表标签 ,

需求：使用无序列表方式，显示 语文，数学，英语
        ul是无序列表，ol是有序列表
            type属性可以修改列表项前面的符号
        li是列表项

    
    


    
        语文
        数学
        英语
    
    
        语文
        数学
        英语
    

5.img标签

需求:使用img标签显示一张图片，并修改宽高，和边框属性
        img标签是图片标签，用来显示图片
            src属性可以设置图片的路径
            width属性设置图片宽度
            height属性设置图片高度
            border属性设置图片边框大小
            alt属性设置当指定路径找不到图片时，用来代替显示文本内容
        在JavaSE中
            相对路径:从工程名开始算
            绝对路径:盘符:/目录/文件名
        在web中
            相对路径:
            .       表示当前文件所在目录
            ..      表示当前文件所在的上一级目录
            文件名   表示当前文件所在目录的文件名
            绝对路径:
            正确格式为:  http://ip:port/工程名/资源路径

6.表格标签

需求1:做一个带表头的三行三列的表格，并显示边框
需求2:修改表格的宽高，表格的对齐方式，单元格间距
        table标签时表格标签
            border设置表格标签
            width设置表格宽度
            height设置表格高度
            align设置单元格文本对齐方式
            cellspacing设置单元格间距

        tr是行标签
        th是表头标签
        td是单元格标签
            align设置单元格文本对齐方式

        b是加粗标签

    
    



    

        
1.1
        
1.2
        
1.3
    
    

        
2.1
        
2.2
        
2.3
    
    

        
3.1
        
3.2
        
3.3
    

  

        表格标签还有跨行跨列的效果

 需求:
    新建一个五行五列的表格
    第一行第一列的单元格要跨两列
    第二行第一列的单元格跨两行
    第四行第四列的单元格跨两行两列

    colspan属性设置跨列
    rowspan属性设置跨行
 

    
    


    

        

            
1.1
            
            
1.3
            
1.4
            
1.5
        
        

            
2.1
            
2.2
            
2.3
            
2.4
            
2.5
        
        

            
            
3.2
            
3.3
            
3.4
            
3.5
        
        

            
4.1
            
4.2
            
4.3
            
4.4
            
        
        

            
5.1
            
5.2
            
5.3
            
            
        
    

7.iframe框架标签(内嵌窗口)

iframe标签可以在html页面上打开一个小窗口，去加载一个单独的页面
        iframe和a标签组合使用的步骤:
                1.在iframe标签中使用name属性定义一个名称
                2.在a标签的target属性上设置iframe的name的属性值

    
    


    我是一个单独的完整页面


    

    
        1.font标签.html
        2.特殊字符.html
        3.标题标签.html
    

  

8.表单标签

        表单是HTML页面中用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

需求:创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别(单选),兴趣爱好(多选),国际(下拉列表)，隐藏域，自我评价(多行文本域),重置，提交
     form标签就是表单
        input type=text     是文件输入框，value设置默认显示内容
        input type=password 是密码输入框，value设置默认显示内容
        input type=radio    是单选框
               name属性可以对其进行分组，同一组内的单选只能选一个
               checked="checked"表示默认选中
        input type=checkbox 是复选框    checked="checked"表示默认选中
        input type=reset    是重置按钮   value属性修改按钮上的文本
        input type=submit   是提交按钮   value属性修改按钮上的文本
        input type=button   是按钮      value属性修改按钮上的文本
        input type=file     是文件上传域
        input type=hidden   是隐藏域    当我们要发送某些信息，而这些信息不需要用户参与时就可用隐藏域，提交的时候同样会发送给服务器

        select标签是下拉列表框
        option标签是下拉列表框中的选项，selected="selected"设置默认选中

        textarea表示多行文本输入框
            rows属性设置显示几行的内容
            cols属性设置每行显示几个字符宽度

         这种布置不够整齐，我们可以利用表格标签来将页面布置整齐

 表单提交的细节

form标签是表单标签
        action属性设置提交的服务器地址
        method属性设置提交的方式get(默认值)或post
    表单提交的时候，数据没有发送给服务器的三种情况
        1.表单项没有name属性值
        2.单选，复选，下拉列表中的option标签都需要添加value属性，以便发送给服务器
        3.表单项不在提交的form标签中

    get请求的特点是:
        1.浏览器地址栏中的地址是:action属性[+?+请求参数]
        例如 http://localhost:8080/?action=login&username=%E9%BB%98%E8%AE%A4%E5%80%BC&password=abc&sex=boy&hobby=Java&country=%E4%B8%AD%E5%9B%BD
            请求参数的格式是:name=value&name=value&action
            例如 action=login
                &
                username=%E9%BB%98%E8%AE%A4%E5%80%BC
                &
                password=abc
                &
                sex=boy
                &
                hobby=Java
                &
                country=%E4%B8%AD%E5%9B%BD
        2.不安全，暴露密码
        3.有数据长度限制
    
    post请求的特点是:
        1.浏览器地址栏只有action属性值
        2.相对于get请求要安全
        3.理论上没有数据长度限制
 

9.其他标签(div、span、p标签)

演示div、span、p标签
        div标签       默认独占一行
        span标签      它的长度是封装数据的长度
        p段落标签      默认会在段落的上方和下方各空出一行来(如果已有就不再空)

    
    


    div标签1
    div标签2
    span标签1
    span标签2
    
p段落标签1
    
p段落标签2