html总结

来源：互联网发布：企业即时通讯软件编辑：程序博客网时间：2024/06/15 23:50

HTML


   1.html的简介

       1.html是什么？

                Html 是用来描述网页的一种语言。
               HTML 指的是超文本标记语言 (Hyper?Text?Markup?Language)
               HTML 不是一种编程语言，而是一种标记语言?(markup language)

               超文本标记语言编程语言标记语言

               语言：用于跟计算机沟通的桥梁
               标记（标签）：展示网页中一块的信息
               超文本：1.超链接 2.赋予一些文本特殊的能力例如： red
               编程：代码中有运算逻辑   html中没有逻辑！



       2.html能干什么？

               html用于编写网页

       3.html的书写规范

               <html>
               <head>

               </head>

               <body>
                   如果天气热，我会请大家吃<br/><font color="red" size="7">雪糕</font>！！
               </body>
           </html>

           1.文件的后缀名要以html结尾
           2.内容必须要有跟标签 <html></html> 一般情况下还会有 head body标签
           3.标签是成对出现，一般是以<开头包裹关键字，结束部分会以</开头包裹关键字！支持正确的嵌套！
           4.标签中可以编写属性，属性会写到开始标签中，属性名1="属性值1"空格属性2="属性值2"
           5.html支持空标签 <br/> 不能用于展示内容，功能比较单一！ <br/> == <br></br>
            6.html中不区分大小写，但是建议大家写成小写

   2.html的基本语法(基本标签);

       文件标签（结构标签）

           html html文件的根标签

           head 可以展示文本内容！
               1.title   页面的名称
               2.指引页面编码的格式
               3.引入外部的css和js文件

            body 主要用于展示html的页面内容！

                text      字体颜色
                       1.直接写颜色单词
                       2.#00 00 00

               bgcolor    背景色
                        1.直接写颜色单词
                       2.#00 00 00
               background 背景图片

       排版标签

           1.html   
           2.<br/>
           3.p 段落标签段落与段落自动换行！
                align： right left center 控制内容所在的位置
           4.hr 画线

              width 线的长度
                   1.固定值 xxx px px像素
                   2.百分比会按照浏览器的大小自动修改
              size 线的粗度
                    1.固定值 xxx px px像素
                   2.百分比会按照浏览器的大小自动修改
              color 线的颜色
              align 控制线的位置： center


       块标签

           span 行内块默认宽度是自适应
           div 行级块默认宽度是一行

       字体标签

            font

               size 字体大小范围 1-7 不需要写单位大于7默认为7
               color 字体的颜色
               face 字体的类型！

           <h1-h6>

               h1-h6 h1最大的标题默认属性黑色加粗

               i 斜体
               b 粗体

       清单标签列表

             ol 有序列表

               type : 1 a A i I li前面的标识类型 i I 罗马字符
               start: 数字，指的开始的位置

                li 一列

           ul 无序列表

               li

           dl 自定义

                dt 例子：放置个人简介的照片 dd 个人的信息
               dd

            列表清单，能不能自定义图片！
           能， css 中能自定义列表的图片


       图像标签

            img

              src

                   ../ 上一级文件夹
                   ./ 当前文件夹
                   / 绝对路径

              width 只要指定宽度，那么高度会自动按比例缩放！！
              height
              alt   当图片实现失败显示的提示 /////   alt在搜索引擎中会被查找
              title 当鼠标移动到图片上显示的提示


              热区地图、

              usemap


               
               <img src="../../1.jpg" width="500px" height="500px" alt="altxxxx" title="titlexxx" usemap="#mymap"/>

               <map name="mymap">
                   
                   <area   shape="rect" coords="0,0,200,200" href="http://www.baidu.com" />
                      
                      <area   shape="circle" coords="200,200,200" href="http://www.qq.com" />

               </map>


       超链接标签

           a

             href 需要跳转的资源

                  1.网址 url统一资源定位符   uri 统一资源标识符
                          协议：
                           http://
                           file://
                           content://
                           主机地址：
                           www.baidu.com --》 ip

                           port: 端口号 80

                           path:资源路径

                          scheme://host：port:path

               2.自己的html资源注意路径要写 ../ ./ /
               3.#tagname

                   跳转当前页面指定的标签位置通常用于置顶的功能

           target 跳转的目标

                 1._self 在当前标签打开覆盖原有页面
               2._blank 新标签打开不会覆盖原有页面
               3.跳转到自定义的frame中



       表格标签

               table 属性：
                     align；表格的对齐方式
                   bgcolor：表格背景颜色
                   width: 表格的宽度
                   height:
                   border: 1px 表格分割变的宽度
                   bordercolor: 分割线的颜色

                     子标签;

                   tr 一行

                       align：控制td列的排列方式
                   th 一列相当于 td中加粗居中

                   td 一列正常显示的一列

                       属性：

                          colspan：值：列合并，值代表向右合并几个
                          rowspan:      行合并;   值代表向下合并几个（-1）


       多媒体标签

               <video> 视频
               <audio> 音频


   3.form表单标签极其重要

           form

               action: 提交的路径
               method: 提交的方法 get post

               查看一下http请求的几种！---


           input种类
               <input> 标签用于搜集用户信息。
           根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
           关于<input>标签type属性值说明 :
           text
           <input type=”text”>
           定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
           其它常用属性:
           ?name:定义标签名称
           ?value:定义标签值
           ?size:定义输入字段的长度
           ?maxlength:定义可输入最大字符个数
           password
           <input type=”password”>
           定义密码字段。该字段中的字符被掩码.
           其它常用属性:
           ?name:定义标签名称
           ?value:定义标签值
           ?size:定义输入字段的长度
           ?maxlength:定义可输入最大字符个数

           radio
           <input type=”radio”>
           定义单选按钮。
           其它常用属性:
           ?name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radion的name值必一样。
           ?value:定义标签值
           ?checked:定义该标签默认被选中。

           checkbox
           <input type=”checkbox”>
           定义复选框。
           其它常用属性:
           ?name:定义标签名称.注意，一组的checkbox它们的name值应该是一样的。
           ?value:定义标签值
           ?checked:定义该标签默认被选中。

           button
           <input type=”button”>
           定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
           其它常用属性:
           ?name:定义标签名称
           ?value:按钮显示名称

           hidden
           <input type=”hidden”>
           定义隐藏的输入字段。
           其它常用属性:
           ?name:定义标签名称
           ?value:定义标签值

           file
           <input type=”file”>
           定义输入字段和 "浏览"按钮，供文件上传。
           其它常用属性:
           ?name:定义标签名称

           submit
           <input type=”submit”>
           定义提交按钮。提交按钮会把表单数据发送到服务器。
           其它常用属性:
           ?name:定义标签名称
           ?value:按钮显示名称

           reset
           <input type=”reset”>
           定义重置按钮。重置按钮会清除表单中的所有数据。
           其它常用属性:
           ?name:定义标签名称
           ?value:按钮显示名称

           image
           <input type=”image”>
           定义图像形式的提交按钮。
           这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。
           其它常用属性:
           ?name:定义标签名称
           ?src:定义作为提交按钮显示的图像的url
           ?alt:定义作用图像的替代文本。

           select与option标签
                   1.<select>
           用于定义一个下拉列表
                       常用属性:
           ?name:定义下拉列表的名称
           ?size:定义下拉列表中可见选项的数目
           ?multiple:定义可选择多个选项
           2.<option>
           用于定义下拉列表中的选项。
           <option>需要位于<select>标签内部
                       常用属性:
           ?value:定义送往服务器的选项值
           ?selected:定义选项为选中状态。

           textarea标签
               <textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)
               常用属性:
           ?name:定义多行文本框名称
           ?cols:定义多行文本框可见宽度
           ?rows:定义多行文本框可见行数
           ?wrap:规定多行文本框中文字如何换行。





   4.html的框架标签和其他


           空格
       > 大于号


       <meta charset="utf-8"> 指引编码格式

       搜索引擎搜索的关键字
       <meta name="keywords" content="最好的培训机构，ios.java.android"/>
       <meta name="description" content="最好的xxxxx" />

        自动跳转
        <meta http-equiv="refresh" content="5;http://www.baidu.com"/>



       框架标签：

           frameset

               将多个页面集合到一个html中
               写法：
               1.去掉页面中的body
               2.写入frameset标签
                  rows: 垂直分



                  cols: 水平分
           frame

                具体显示的页面

                要表明name属性



               target指名此name即可！



       1.html的简介

          书写规范！

       2.标签

          排版

           p 段落之间自动换行 align
           br
           hr width size color align


          文字标签

           font size 1-7 color face黑体

           h1 - h6 h6最小 h1最大

           i 斜体 b

          块

            div   一行
           span 自适应


          清单

           ul 无序列表

           ol 有序
               li
               type: 1 a A i I start：数字 2


           dl 没有标识



       超链接:

           a href 要操作的资源
               target； _self _blank 指定framename

       img

           usemap

           ../
           ./
           /
           src

       table

              border 1px 表格线
              bordercolor red 表格线色

           tr
           td
              colspan 和并列
              rowspan 合并行
           th

           思考：table中添加align 和 tr中添加align属性的区别？？


       form:

           http:网络请求的协议！ request response

           http请求方式; get /post

           input type   text文本输入框 password radio 单选   checkbox 多选默认选中：checked="checked"      file 提交文件

                  name 提交参数的key   ?name=value&。。。。
                  value 提交的值


           select 下拉框选地址

               option 一条 selected="selected"

           textarea 文本域

                   rows
                   cols 指定文本域大小


       frameset frame的容器

           rows="60，*，90" 上下分 1.60 2，占满剩下的
           cols= 上下分 1.60 2，占满剩下的

       frame

           name 供跳转资源查找 target = name


       <meta charset="utf-8" />




       1.http请求的方式

       2。练习标签

       3.写一个网页

阅读全文

0 0