• html基础笔记


    1   HTML简介

         HTML:超文本标记语言(hypertext markup language);

      由浏览器直接解析执行(没有编译过程);

      超文本:音频、视频、图片都成为超文本;

        标记:<英文单词或者字母>称为标记。html页面都由标记组成;

    2 HTML网络术语

       网页:由各个标记组成的页面;

       主页:一个网站的其实页面或者导航界面;

       标记:也称标签。

      <h1>开始标签,</h1>结束标签;每个标签都有规定好的含义;

       元素:<h1>内容</h1>,称为元素;

       属性:给每一个标签做的辅助信息;

       XHTML:符合XML语法标准的HTML;

       DHTML :dynamic动态的。html+css+js合起来的页面就是DHTML;

       HTTP : 协议标准。用来规定客户端浏览器和服务器交互时及数据的一个格式。SMTP:邮件传输协议;FTP:文件传输协议;

    3 HTML编辑工具

       notepad: 记事本 editplus : 语法高亮显示;技巧:根据颜色判断单词是否出错(不是100%);

       ultraedit : 根据颜色判断单词是否出错,可以显示二进制数据;

       dreamweaver : 专业工具,代码提示;

    4  HTML规范

    HTML : 弱势语言;不区分大小写;后缀名是html或htm(一些系统不知后缀名超过3个字符,比如dos系统);

    HTML结构:        

         1) 声明部分:用来告诉浏览器整个页面使用的是哪个标准; <!doctype html>是HTML5标准;       

         2) head部分 : 不会显示在页面上;是告诉浏览器一些页面的额外信息;       

         3) body部分 :  所写的代码必须放在此标签内;        

    5 HTML的各个标签   

        每个标签都有私有属性,也有公共属性;   

        html中表示长度的单位都是像素;html只有一种单位就是像素;   

         body:      bgcolor:背景颜色;      background : 背景颜色;      text: 文本颜色;  

    a、排版标签  

       所有的浏览器默认情况下都会忽略空格和空行;  

       <p>:代表一个段落     属性:align:对齐方式;值:left ightcenter;  

       <br> : 换行;

        <hr> : 分割线      color:闲的颜色;size:线的粗细;线的长短(两种写法:1 绝对值 eg:500  ;2 相对值:50%);       

        noshade :不要阴影;      align:对齐方式;值:left ightcenter;       center:内容居中;   

       <pre>:预定义格式标签,告诉浏览器不要忽略空格和空行;    

       <div>:块级标签,必须单独占据一行,属性:align;    <span>: 行内标签,不换行字体标记; 

      

     b、字体标签   

        <h1~h6>:定义字体的大小,属性:align:居中;

        font : color:字体颜色;三种写法:1 英文单词:red;2 十六进制:#00ffcc; 3 RGB(三原色):new RGB(124,156,23);     size:字体大小;        face:字体类型;     

        特殊字符:&lt;小于    &gt;大于  &amp;&符号   &quot;双引号  &apos; 单引号  &copy;版权    &trade;商标  &nbsp;空格    

        <b>:加粗;     

        <strong>:加粗;   

        <i> : 斜体;  

        <em>:斜体;     

        <u>:下划线;     

        <s>:中划线(删除线)/<del>(删除线);    

        <sup>: 上标;   

        <sub>:下标;     

     c 图像标记     

     img:代表一副图片

           属性:src:图片的路径;

                相对路径:相对于页面所在的路径,标记是:   . /和  ../    ,分别代表当前目录和父目录;           

             绝对路径:1):从盘符开始:C:Documents  SettingsAdministrator桌面images1.jpg                    

                2):网络路径:https://www.baidu.com

               width:宽度            

       height:高度            

       alt:当图片显示不出来代替图片的内容           

       title : 提示性文本            

       border : 边框      

      热点:特定的位置添加超链接           

          <img src="images/1.png"  width="300" height="300" useMap="#Map" border="0" />          

             <map name="Map" id="Map">               

                <area  shape="circle"  coords="122,81,38" href="www.baidu.com" />           

            </map>           

          解析:<img> 标签中的 usemap 属性与 map 元素中的 name 相关联,以创建图像与映射之间的关系;              

              <area> 标签定义图像映射内部的区域;shape:规定区域的形状、circle(圆圈)、coords: 规定区域的坐标  href:规定的目标URL;               

    d、清单标记        

          列表标签:3种                  

              无序列表:ul              

                    属性:type   值:disc(默认,实心远点)、square(实心方点)、circle(空心圆);              

            有序列表:ol                    

                属性:type  取值:1(默认阿拉伯数字);   start:从即开始  

            定义列表 : dl 

                 dt:列表项标题  

                 dd:   列表项

    e、超链接(3种)          

        1、链接到其他页面         

        2、锚:给超链接起的一个名字,作用:连接到本页面或其他页面的特定位置;使用name属性给超链接起名字;          

        3、链接到博客<a href="http://www.cnblogs.com">进入博客</a>            

            属性:target:告诉浏览器怎么显示目标页面

                        html中定义4个值:

                _self  : 在同一个浏览器中显示;                          

                _blank : 打开新的浏览器显示;                           

                _parent : 在父窗口中显示;                           

                _top : 在顶级窗口中显示;                                                     

    f、 表格标记     

        table:表格        

            属性:border:边框           

                  width:宽度           

                  height:高度            

               align:表格的对齐方式            

               cellpadding:单元格内容到边的距离           

                  cellspacing:单元格和单元格之间的距离                    

                bgcolor:背景颜色            

                background:背景图片            

                bordercolorlight:表格的上,左边边框,以及单元格的右,下边框的颜色                                              

                   bordercolordark : 表格的右,下边框,以及单元格上,左的边框的颜色            

                dir:单元格内容的排列方式  取值:ltr 从左到右,rtl:从右到左            

           caption : 表格标题        

           tr:行   属性:dir  取值:ltr 从左到右,rtl:从右到左            

              td:单元格    属性:align:内容的横向对齐方式             

           valign:内容的纵向对齐方式 top/middle/botton             

           绝对值或者相对值(%)             

           height:单元格的高度                     

     单元格的合并:              

         属性: colspan:横向合并          

                  rowspan:纵向合并         

    th:相当于<td> + <b>,属性同<td>;       

                      属性:align:取值:left/center/right/top/bottom         

    thead         tbody         tfoot            

    写与不写的区别:                     

         1 当表格大的时候,不写,则必须等表格内容下载完才显示;如果是tbody标签,则边下载边显示;                      

         2 tbody、tfoot那么浏览器解析内容时是从上到下解析;写了,则顺序任意,浏览器的解析还是按照 thead、tbody、tfoot顺序显示内容;                       

    g、框架标记及<iframe>    

            框架页面上不允许有body标签      

          frameset:框架的集合(html5不支持)       

               rows:纵向分部框架        

              cols:横向分部框架        写法:1 绝对值  "200,*"  *表示剩余的;  2 相对值  "30%,*"           

           frame : 框架.一个框架显示一个页面(html5不支持)          

               scrolling:是否需要滚动条。默认为true;          

               noresize:固定框架大小         

               bordercolor : 给框架边框起一个颜色          

               frameborder:边窗边框         

               name : 给框架起一个名字         

               src :窗口中的目标URL             

          内嵌框架:嵌入在一个页面上的框架(仅仅IE支持)             

          iframe:属性:width/height/scrolling:是否需要滚动条。默认为true;             

       h、多媒体标记      

          bgsound : 背景音乐     

             embed:播放多媒体文件          

                属性:src  目标文件路径              

                autostart  自动播放 值:true/false            

                   volume :0 ~100,规定音量的大小,不写则有系统默认音量;   

            marquee:移动      

                 属性:direction 移动目标方向 left/right/up/down/,   down移动距离是固定的200px;             

                    behavior : 行为方式    取值:slide 只滚动一次,alternate  来回滚动,scroll 单方向循环滚动             

                    scrollamount:移动速度          

                      loop : 循环多少圈;负值为无线循环    

                        scrolldelay : 移动一次休息多长时间;单位为毫秒;

    i、头标记    

          head :定义文档的信息      

          title : 定义浏览器工具栏的标题    

          base: 定义页面上所有链接的默认地址或默认目标  

             link :定义文档与外部资源之间的关系;常用于连接样式表    

          meta:定义关于HTML文档的元数据;用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据;   

            script:定义客户端脚本,比如JavaScript;     

         style:定义文档的样式信息        

          例:      <head>        

               <title>html页面</title>         

              <meta charset="UTF-8"><!--设置当前页码的编码用UTF-8-->         

              <meta name="keywords" content="HTML, CSS, XML" />     

                 <base href="http://www.w3school.com.cn/images/"  target="_blank" />    

                   <link  rel="stylesheet" type="text/css" href="mystyle.css" />         

              <style  tyep="text/css>      

                       body{        

                     p{color : blue}        

               </style>    

              </head>           

          link :链接颜色      

          alink : 鼠标按下时的颜色   

             vlink : 访问过链接后的颜色    

            leftmargin : 左外边距  

               topmargin:上外边距   

            <body  link = "red" alink = "blue" vlink = "yellow" leftmargin = "0" topmargin = "0">      

        j、表单标签(所有的表单标签必须被包裹在<form  action="#">标签中)  action属性:指定后台的一个地址;   

           input : 输入框        

             属性:type   值:  text  文本框         

                              password 密码框            

                            redio 单选框          

                               checkbox  多选框         

                               submit 提交            

                            reset 重置           

                               button 普通按钮         

                          readonly  只读      

                            disabled    

           select:创建单选或多选菜单         

              属性:multiple 规定可同时选择多个选项 值:multiple  

               option:作为 <select> 标签的菜单或是滚动列表中的一个元素显示;    

                  属性值:selected="true"  默认显示;       

         textarea : 文本域; 属性:cols 列数、rows:行数;    

                 label : 为input远的定义标注;在label元素内点击文本,就会触发此控件;   

                  属性:for  ,for 属性值应当与相关元素的 id 属性值相同。  

            eg:     

               <input type="radio" name="gender" id="gender-man" >     

               <label for="gender-man">男 </label>       

            frameset :定义一个框架集;   

                   属性:cols 定义框架集中列的数目和尺寸      

                    rows定义框架集中行的数目和尺寸  

          legend : 为 fieldset 元素定义标题; frameset子元素;  

            eg:       

            <fieldset>   

                    <legend>用户组1</legend>    

                     用户名:<input type="text"><br>     

                    密码:<input type="text">   

               </fieldset>         

  • 相关阅读:
    3/10
    2/10
    福大软工 · 最终作业
    福大软工 · 第十二次作业
    Beta 冲刺(7/7)
    Beta 冲刺(6/7)
    Beta 冲刺(5/7)
    Beta 冲刺(4/7)
    Beta 冲刺(3/7)
    Beta 冲刺(2/7)
  • 原文地址:https://www.cnblogs.com/zzp0320/p/7735207.html
Copyright © 2020-2023  润新知