第023篇：html

1、html基本介绍

注意：html中大小写不敏感
DOCTYPE是用来说明html版本

    1、web标准
        web标准是万维网制定的网页开发标准，注意主要包含三类：
            结构标准：html(决定网页中的内容)
            表现标准：css(决定网页中的内容的布局和样式)
            行为标准：JavaScript(决定网页内容动态变化的部分)
    2、认识html
        html又叫超文本标记语言(和Markdown一样)
        一个网页本质就是一个html文件
        
    3、html文件基本结构
        一个html代表整个标签;一个html标签中有一个head标签和一个body标签。
        
    4、html基本语法
        1)语法
            双标签：<标签名 属性名1=值1 属性名2=值2 ...>标签内容
            单标签：
                <标签名 属性名1=值1 属性名2=值2 ...> 
                <标签名 属性名1=值1 属性名2=值2 .../>
        2)说明
            <>和/：固定写法
            标签名：只能写html相应版本提供的标签的标签名
            属性：
                属性是以'属性名=之'的形式出现，多个属性用空格隔开；
                属性的顺序不影响结果；
                不管什么属性的值，值必须引号引起来
            标签内容：
                任何内容都可以作为标签内容

2、head标签

head的作用：head标签主要负责网页图标和标题的显示以及网页的基本设置
head中的标签：head中可以写的标签：meta、title、link、style、script、base
meta：设置网页的元数据(网页编码方式、网页搜索关键字、网页介绍等)
link：导入文件(设置网页图片、导入外部样式表)
设置网页图标
rel属性：设置被导入的文件的作用：
stylesheet：样式表
icon：网页图标
type(设置文件类型)：文件类型、文件后缀
text/css：导入的文件后缀是.css的文本文件
image/ico:导入的是后缀名为ico的图片文件
href：被导入的文件路径

3、文本标签

1、标题标签：h1~h6

2、段落标签：p

3、普通文字标签：fon
   多个font标签的文字可以在一行显示   

4、空格和换行
   网页内容中我们手动输入的空格和换行都是没用的
       1)换行：

       2)空格：
             :单位是空格键
             :单位是像素

5、文字效果：倾斜、加粗
   加粗：(单纯涂黑)、(有强调的意思)
   倾斜:(单纯倾斜)、(有强调的意思)

6、水平线:

4、列表标签

1、无序列表：ul-li
   ul：表示列表容器
   li：列表中的元素

2、有序列表
   ol：表示列表容器
   li：列表中的元素

3、自定义列表：dl-dt-dd
   dl：整个列表容器
   dt：表示一个分组
   dd：表示每个分组中的内容

5、图片和超链接

1)图片

图片标签：img
    src:图片地址
        本地文件路径(绝对路径/相对路径)
        网络图片路径(网络路径)
                    
    title属性：图片标题(鼠标悬停在图片上等一会儿才会出现)
            
    alt:图片加载失败提示信息

2)超链接

超链接:a
    可见的可点击部分
                
    1)href:跳转目的地
        网页地址：跳转到指定网页
        本地html文件地址：在浏览器中直接打开指定html文件对应的网页
        选择器：将当前页面滚动到选择器所在的位置
        #：刷新页面

    2)target：页面的打开方式
        _self:默认值，在当前页面中渲染出新的页面
        _blank:不动原页面，在新的窗口中渲染新的页面

6、表格标签

表格标签：table-tr-td
    table:整个表格
        border:设置边框线的宽度
        cellspacing：设置单元格与单元格以及单元格与表格之间的间隙，默认为1
        cellpadding:设置整个表格中所有的单元格中的内容到边框的距离
        bordercolor:设置边框线的颜色；颜色单词或十六进制的颜色值
        bgcolor:设置整个表格的背景颜色
        width:设置整个表格的宽度
        height:设置整个表格的高度
        align:设置整个表格在网页中的对齐方式(center,left,right)
    
    tr:一个tr代表一行
        bgcolor:设置指定行的背景颜色
        height:设置指定行的高度
        align:设置指定行中所有的单元格的内容在单元格中的对齐方式
        cellpadding:设置整行中所有的单元格中的内容到边框的距离
    
    td:一个td代表一个单元格
        bgcolor:设置指定单元格背景颜色
        width：设置指定列的宽度
        align:设置指定单元格的内容在单元格中的对齐方式
        cellpadding:设置指定单元格中的内容到边框的距离

    rowspan：行合并
    colspan：列合并

7、form表单

表单标签是专门用来做用户信息收集的标签；是一个容器型的标签，单独用没有意义，一般需要配合表单相关标签来使用。
主要完成数据的提交和重置的功能
表单相关标签: input、textarea、select
action属性 - 数据提交的方法/接口
method属性 - http请求方式(接口类型)

1）form表单之textarea(多行文本域)

name属性 - 区分和提交数据
rows属性 - 行数,控制输入框的高度
cols属性 - 列表, 控制输入框的宽度
placeholder属性 - 提示信息

2）form表单之select(下拉菜单)

select标签 - 整个下拉列表
option标签 - 下拉列表中的选项
selected属性 - 值设置为"selected", 让指定选项处于默认选中状态

可以通过添加optgroup标签并且设置label属性来对同一个下拉列表中的选项进行分组

3）form表单之input

type属性：决定标签的作用
name属性：用来区分和提价数据的
value属性：输入框中的内容
placeholder:占位符
maxlength:限制输入框内容的长度
disabled:设置为disabled属性，会禁用

常用属性：text,password,radio,checkbox,button,submit,reset

补充：file,color,date,daetime,email,hiddle,image,month,number,ranger,seach,tel,time,url,week,,datetime-local

        
        
        
        
        
        邮箱：
        hidden：
        image：
        month：
        number：
        range：
        search：
        tel：
        time：
        url：
        week：

8、div和span

div和span都是无语义标签，主要是用来对网页中的内容进行分块和分组的;
div默认是块级标签，显示的时候只能一个占行
span默认是行内标签，显示的时候一行可显示多个