HTML快速入门基础知识

HTML基础知识

一.html语言构成

1.标签（标记，元素）
2.属性

二：html语法

(1).html 标记
常规标记：
双标记 ：<标记名称 属性1名=“属性1值” 属性2名=“属性2值” ………… ></标记名>
单标记 ： <标记名 属性1名=“属性1值” />

(2).HTML标签
1: 文本标题标签 h1 - h6
         [注] h1 ：1. 一个网页只能出现一次 2. h1一般用来包网页的logo
2: 字体倾斜 & 字体加粗 em/i b/strong
3: 下划线 ： u 、水平线： hr 、换行符 ： br
4: 段落标记 ： p
5: 文本标签（ 一小段文本或者一个字）： span
6: 常用转义字符：
                  空格：&nbsp ；
                 大于号：&gt ；
                  小于号 ： &lt ;
                  © : &copy ;
7: div标签应用 : 块标签 （盒子） div (块级容器)
8: html注释符 <!—注释文本–>

(3)列表：

有序列表：<ol></ol>    
                      属性：type :有序列表的序号类型
                            1 数字序号
                            A/a 字母排序
                            I/i  罗马排序 

      
 无序列表：<ul></ul>    （用于导航栏）
        

自定义列表： （只有一个dt dd ）  常用于图文混排

                    <dl>
                        <dt></dt>      //相当于词语
                        <dd></dd>         //对这个词语进行解释说明。
                    </dl>

(4).超链接:
链接没有被访问前是蓝色
链接被点击是是红色
链接被访问后是 紫色

        href : 需要跳转的链接地址（地址必须是正常访问的地址）

(5). src : 图片的路径地址
路径分为；相当路径和绝对路径

                绝对路径：路径固定，固定在磁盘的某一个地方
                相当路径：分清楚 当前文件（html) 和 目标文件 (图片)
                        当前文件与目标文件的文件夹同级时，images/image1.jpg
                        当前文件与目标文件在同级目录时，直接写目标文件名。
                        当前文件的文件夹与目标文件的文件夹同级时， ../ (返回上一级) /目标文件夹/目标文件名

alt ：当图片出现错误的时候进行提示信息
titl ：提示信息

表格

            tr : 行
            td : 列
        表格 的属性 ：
                    border ： 边框
                    width: 宽度
                    height：  高度
                    borderColor: 边框 颜色
                    cellspacing : 单元格与单元格的间距
                    cellpadding：单元格与内容的间距
                    align: 水平对齐方式
                            left 左        center 居中      right 右
                    合并单元格 （td 合并）
                    colspan ：列合并
                    rowspan ：行合并
                            属性值：合并的单元格数量
                                必须删除单元格、

表格补充：表格的标签

        th  表格的列标题，写在表格的第一行
        caption   表格的标题

        表格的行分组 （h5新增）
            thead  表头
            tbody  表体 一个表格可以有多个表体
            tfoot 表尾

• 表格的CSS样式(属性)：
  1.单元格间距: border-spacing:value; 说明:单元格间距(该属性必须给table添加)示单元格边框之间的距离，可取负值
  2.合并相邻单元格边框: border-collapse:separate/collapse;
  说明:合并相邻单元格边框(该属性必须给table添加) separate(边框分开)默认值; collapse(边框合并)
  3.无内容时单元格的设置: empty-cells:show/hide;
  说明:定义当单元格无内容时,是否显示该单元格的边框区域; show :显示; hide :隐藏;
  4.显示单元格行和列的算法(加快运行的速度) : table-layout:auto/fixed; 是否固定单元格的宽度
  auto ：自动分配
  fixed 固定

表单

表单：收集信息
form :表单域 （表单的区域）
action ： 交互时接口地址 (网址)
method : 请求的    POST   ||  GET
name : 名称
value : 值(数据)
maxlength : 控制最多输入的字符数
size : 控制框的宽度 (以字符为单位)
checked : “checked” (默认选中) ; 用于 选框(按钮) checked
disabled = “disabled” 禁用

        控件: input  (空标签)
            type : 控件类型
                text : 文本框 
                password : 密码
                radio : 单选按钮
                        切记: 一组单选按钮中,必须要写上name属性 ,属性值相同.
                checkbox : 多选按钮 .
                submit : 提交按钮
                        input 的 name 属性有属性值时 (按钮的value 有属性值时) 会收集 input  的数据提交到后台 
                button : 普通按钮  
                        <button>按钮</button> (写在form 后面)
                reset : 重置按钮  清空表单中所有写入的内容 



        表单文本提示: label 
            for : 关联input 的id 属性值  点击文本时,input 被选中


        下拉菜单:
                select > option  菜单项 
        
        文本域 
             textarea 
                cols 每一行的文本字数
                rows 文本域的行数

                resize : none ; 禁止文本框缩放

• 表单CSS补充：
  fieldset：表单字段集 可以内嵌
  legend; 字段集标题
  fieldset：第一个子元素
  input控件
  type:
           image 上传图片
           file 上传文件

    multiple :   提交多个 。
  
    iframe:内联框架（引文件）