search

Home >Web Front-end >HTML Tutorial >Share a journey of learning HTML

Share a journey of learning HTML

零下一度
零下一度Original
2017-06-24 13:23:222556browse

Website development process

  • Determine the style and functions (forum, message board, payment, user login, etc.).

  • Artists produce web page renderings (home page, list page, content page).

  • #The production staff cuts the pictures and typesets them into a web page.

  • #The background program starts writing the program.

  • #The combination of front desk and back desk.

HTML comments

Note: Comments are only for future maintenance use.

Bullets



    

  • 内容
    • 　　
  • 内容
    • 　　
  • 内容
    • 





Common attributes of


     or 
  • 

    l Type: the type of bullet, Values: disc (small black dot), circle (circle), square (solid square)
    

    HTML number list (ordered)
    

    <ol> <li>内容</li> <li>内容</li> <li>内容</li>
</ol>
    

     < ;ol> or 
  • Common attributes
    

      

    • ## Type: Number Type, value: 1, a, A, i, I
      • 

    •  Start: From which number 
      • 

    Rolling subtitle mark (obsolete)
    

    <marquee> 内容…..  

</marquee>
    

    

     Common attributes
    

      

    •  Direction: scrolling direction, values: up, down, left, right
      •  
    •  Width: Scroll width
      • 

    •  Height: Scroll height
      • 

    •   BgColor: Scroll background color
      • 

    •  ScrollAmount: Scroll step value
      • 

    •  ScrollDelay: The dwell value between two steps
      • 

    •  Loop: The number of loop scrolls
      • 

    

    Picture mark
    

      Syntax format: Share a journey of learning HTMLAttribute="value">
    

     Commonly used attributes: 
    

      

    •  Width: Image width. 
      • 

    •  Height: Image height. 
      • 

    • # Border: The border of the picture. 
      • 

    • # Src: The path of the image. 
      • 

    •  Align: left, center, right.  (can achieve the effect of mixed graphics and text) 
      • 

    •  Hspace: left and right spacing between pictures and text. 
      • 

    •  Vspace: The upper and lower spacing between pictures and text. 
      • 

    ##Hyperlink
     
     Syntax format: Attribute="Value"> ;Content
     
    Common attributes: 
    

      

    • # Href: target file Address URL. 
      

      • 

    • # Target: Open method. _blank: new window, _self: this window, _parent: the previous window opens, top: the top-level window opens. 
      

      • 

    • # Name: Define the name of the tracing point. 
      

      • 

    •  mailto
      

      • 

    •  #Empty link. 
      

      • 

    •  
      JsConnection: 
      

      • Html color representation
    

    There are three representation methods
    : 
    Color words: blue, green, red, yellow. 
     Decimal representation: rgb (255, 0, 0) 
     Hexadecimal representation #FF0000 (red), #00FF00 ( Green), #0000FF (blue)
    Anchor link
    

    

       Meaning: Anchor link jumps to different areas of a web page
      •  Define the anchor point (make a mark): 
      • 

         For example: 
        • 


        • 

      

        

      

      # Jump to anchor point (marker): 
        

        •  Syntax: Content…..
          

          • 

        • 


          #Mark
          • 

        Function: Provide meta information of the web page. Specify search keywords for web pages. 
      

      
The tag has two attributes: http-equiv and name
      

      1. http-equiv attribute
      

      

       Function: simulate http protocol File header information tells the browser how to open the web page. 
      

        

      •  The http-equiv attribute is generally used in conjunction with the content attribute. Content attribute specifies the detailed attributes of the information
        • 

      • 

         Set the character set of the web page: 

        • 

          

          • 


          • 

        

      

        


      •  Automatically refresh the web page:;
        • 

          

          • 


        • 2. Name attribute
          • Set the search keywords and copyright of the web page information, authors, etc. 
        

        （1）       设置网页搜索关键词
        

        

        （2）       设置网页描述信息
        

        

        Xhtml规范
        

          

        • l  所有标记和属性全部小写
          • 

        • l  单边标记必须关闭。如：
          -----
          • 

        • l  所有的属性值都必须加引号。
          • 

        • 

          l  所有属性都必须有值。如：
          

          ---
          

          • 

        • l  标机之间要顺序嵌套，外层套内层。
          • 

        • l  Xhtml网页必须有DTD文档类型定义代码
          • 

        

         
        

         
        

        DTD文档类型定义
        

        三大类型：
        

         
        

        表格标签
        

        （1）结构：(一行四列)
        

        

        
   
        
 
 
 
   

        

        

        

         
        

        （2）border属性：
        

          

        •   Width：宽度
          • 

        •   Height：高度
          • 

        •   Border：边框
          • 

        •   Bordercolor：边框颜色
          • 

        •   Bgcolor：表格背景色
          • 

        •   Background：背景图片
          • 

        •   Cellpadding：单元格与内容距离
          • 

        •   Cellspacing：单元格与单元格距离
          • 

        •   Rules：合并边框线，取值：all
          • 

        

         
        

        （3）       tr属性：
        

        bgcolor
        

        align
        

        height：水平：left、center、right
        

        valign：垂直：top、middle、bpttom
        

        （4）      td属性：
        

          

        •   colspan：合并单元格（左右）
          • 

        •   rowspan：合并单元格（上下）
          • 

        •   background
          • 

        •   width
          • 

        •   height
          • 

        •   bgcolor
          • 

        •   align
          • 

        •   valign
          • 

        

        表单
        

        （1）结构：
        

                 
        

        

        　　
        

           用户名：   密码：   

        

        

         
        

        （2）
        标记属性----块元素
        

          

        •   name
          • 

        •   method:提交方式 get、post
          • 

        •   action：指定表单的处理程序，一般是PHP文件
          • 

        •   enctype：指定表单数据的编码方式。只能在method=post情况下。
          • 

        •   application/x-www-form-urldecoded   //默认加密方式
          • 

        •   multipart/form-data   //上传文件，值是他自己
          • 

        

        （3）get和post方法
        

                     Get提交方式：将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。不安全
        

                       如果某个表单元素，不想往服务器传递数据，那么，name可以不用写。
        

                      POST提交方式：POST提交的数据相对安全，可以提交海量数据，可以上传附件。
        

        单行文本域
        

                 语法格式：属性=“值”>
        

          属性：            
        

          

        •   name：文本框的名字
          • 

        •   Type：表单元素类型
          • 

        •   Value：文本框的值
          • 

        •   Size：文本框的长度
          • 

        •   Maxlength：最多可以输入多少个字符。
          • 

        •   Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”
          • 

        •   Disabled：禁用属性 同上。
          • 

        

        单行密码域
        

        语法格式：
        

          属性：    
        

          

        •   name：文本框的名字
          • 

        •   Type：表单元素类型
          • 

        •   Value：文本框的值
          • 

        •   Size：文本框的长度
          • 

        •   Maxlength：最多可以输入多少个字符。
          • 

        •   Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”
          • 

        •   Disabled：禁用属性 同上。
          • 

        

         
        

        单选按钮
        

        语法格式:男
        

                           女
        

          属性：
        

          

        •   name：元素名称
          • 

        •   Checked：默认选择checked=“checked”
          • 

        •   Value：值
          • 

        

        复选框
        

        语法格式： 游戏
        

                              杀人
        

                              放火
        

         属性：
        

          

        •   name：元素名称
          • 

        •   Checked：默认选择checked=“checked”
          • 

        •   Value：值
          • 

        

        下拉列表
        

         
        

        语法格式：
        

        <select> <option>北京</option> <option>天津</option> <option>重庆</option></select>
        

         
        

          

        •   ：只有一个name属性。
          • 

        •   ：两个属性value、selected
          • 

        •   Selected：默认选中
          • 

        •   层叠样式表方式改下拉列表宽度：type=”width:100px”
          • 

        

         
        

        文本区域
        

        语法格式：
        

          属性：
        

          

        •   name：元素名称
          • 

        •   Cols：宽度
          • 

        •   Rows：高度
          • 

        

         
        

         
        

        各种按钮
        

          

        •   提交按钮 
          • 

        •   重置按钮 
          • 

        •   图片按钮 
          • 

        •   普通按钮 
          • 

        •   普通按钮本身不具备任何功能，需与js配合使用。
          • 

        

        上传文件域
        

        语法格式：
        

          属性：
        

          

        •   Name：名称
          • 

        •   Value：上传文件名。Value属性是只读属性，
          • 

        • 

          必须与
          

          enctype=”multipart/form-data”>配合实现才能上传
          

          • 

        

        隐藏域
        

        功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。
        

        语法格式：
        

         
        

        表格标题
        

        语法格式：
        


         
        

        是
        的子标记。放在
        

        的后面。
         
        网页多媒体
        网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。
         
         
        图片热点
        图片热点：给一张图片加多个热点。
        语法结构：
        <ing></ing><map><area>
<area>
<area></map>
         
        标记常用属性：
          

        •  Shape：热区的形状，取值：rect（矩形）、circle（圆）、polygon（多边形）
          • 

        •  Coords：热区的坐标
          • 

        •    如果shap=rect时，那么，coords=“x1,y1,x2,y2”列如：coords=”50,20,200,150”
          • 

        •  （x1,y1）为左上角坐标，（x2，y2）为右下角坐标。
          • 

        •    如果shap=circle时，那么，coords=“x,y,r”,其中（x，y）圆心坐标，r为半径。
          • 

         
         
        普通框架
        框架集和框架页：
        框架集：
        :主要用来划分窗口。
        框架页：:主要用来指定默认显示的网页地址。
        属性：
          

        •   Cols:划分左右型框架。
          • 

        •   Cols=”200,*”   左边为宽度200px，剩下的为右边。
          • 

        •   Cols=”180,*,180”   左右框架为180px，剩下的为中间框架
          • 

        •   Rows：划分上下型框架
          • 

        •   Rows=”200,*”  上框架高度为200px，剩下的为下框架。
          • 

        •   Frameborder：是否显示边框线，取值0或1.
          • 

        •   Border：边框粗细。
          • 

        •   Bordercolor：边框颜色。
          • 

        框架页的属性 ：
          

        •   Src：该小窗口中，默认显示的网页地址。
          • 

        •   Noresize：不能调整大小。Noresize=”noresize”
          • 

        •   Scrolling:是否显示滚动条，取值：auto、yes、no
          • 

        •   Name：给当前小窗口起个名字。这个name就是给标记target属性来用的。
          • 

        含义：当浏览器不支持框架时，会提示信息。低版本不支持。高版本都支持。
        语法格式：内容
        内嵌框架（行内框架）
        与普通框架区别：
        语法格式：
        常用属性：
          

        •   Src：引入文件地址。
          • 

        •   Width：宽度
          • 

        •   Height：高度
          • 

        •   Frameborder：是否显示框架的边框线，取值：yes或no。
          • 

        •   Scrolling：是否显示滚动条。取值：yes、no、auto。
          • 

        •   Name：制定小窗口的名称，改名称也是给标记的target属性来用。
          • 

        •   Align：框架在网页中对齐方式，取值：left、center、right。
          • 

        CSS简介
        CSS 层叠样式表。
        CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。
         
        语法格式：
        <style> h1{Color:red;    //文本颜色

Text-align:center;    //对齐方式

Border:1px solid #444;     //半框样式

Background-color:#ffff00;    //背景色}</style>
         
        CSS选择器
        基本选择器
        (1) “*”选择器：通配符
          

        •   描述：将匹配所有的html标记，所有标记都会改变。
          • 

        •   语法：*{color：red；}
          • 

         
        （2）标签选择器
          

        •   描述：将匹配指定的html标记
          • 

        •   语法：h1{color：red；}
          • 

        （3）class选择器（类选择器）-----使用最多的选择器
          

        •   描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。
          • 

        •   格式：
          • 

        .myClass{

Color:red;

Background-color:yellow;

}<h1></h1><p></p>
         
         （4）id选择器
          

        •   描述：给指定id的元素添加样式
          • 

        •   注意：网页中html标记的id属性的值，必须是唯一的。
          • 

        style type=”text/css”>

#myId{

Color=red;

Background-color:yellow;

}<p></p>
         
        组合选择器
        （1）多元素选择器
          

        •   描述：给多个元素加同一个样式，多个选择器之间用逗号分开。
          • 

        •   格式：h1,p,div,.p1{ background：red；  }
          • 

        （2）后代元素选择器(最常用)
          

        •   描述：给某个标签的某一个后代元素加样式。选择器之间用“空格”隔开。
          • 

        •   格式：
          • 

                               div  h1.title{ color:red; }
          　　　　　　　 Div  p.title{ color:yellow; }
          　　　　　　
        　　　　　　  
        

        　　　　　　 
        

           
        

        　　　　　　 
        

           
        

        　　　　　　 
        

        (3) Child element selector
         Description: Add style to the child elements of an element
        CSS size attribute
         Width: element width , be sure to add px units. 
         Height: Element height. 
        CSS Font Properties
          

        •  Font-size: text size. For example: font-size: 14px; 
          • 

        •  Font-family: font. For example: font-family: Microsoft Yahei; 
          • 

        •  Font-style: italic, value: italic. For example: font-style: italic; 
          • 

        •  Font-weight: bold, value: bold. Such as: font-weight: bold; 
          • 

        CSS text attribute
          

        •  Color: text color
          • 

        •  Text-decoration: Text decoration line, values: none, underline, overline, line-through 
          • 

        •  Text- align: text horizontal alignment, values: left, center, right
          • 

        •  Line-height: line height, can be a fixed value or a percentage, such as: line-height: 24px; line-height: 150%; 
          • 

        •  Text-indent: The first line is indented. Text-indent: 28px; 
          • 

        •  Letter-spacing: word spacing. 
          • 

        Pseudo-class selector
        A hyperlink has four states
          

        •  Normal state (: link): mouse The style of the previous link is not placed. 
          • 

        •  Put state (:hover): The style when the mouse is placed on the link. 
          • 

        •  Activation state (: action): The style of holding down the left mouse button without releasing it. 
          • 

        •  Visited state (:visited): Press the left mouse button and pop it up, the style at this time. 
          • 

        In daily work, I will use the following writing method to add styles to links: 
        A:link,a:visited{ color :#444;text-decoration:none; } //Combine "normal state" and "visited state" into one. 
        A:hover{ color:#990000;text-decoration:underline; } //"Mouse over" to create a single effect
        CSS list attribute
        List -style: List style, value: none. Remove various symbols before bullets or numbers. 
                                                                                                                                                                                                                      #                                                                                               
      • Shanghai City
      • Shenzhen City
        • CSS border attribute: Each element can have a border line
         Border-left: Left border line. 
         Format: border-left: Thick and thin line color 
           Line style: none, solid, dashed (dashed line), dotted ( Dotted line) 
          •  
        • Example: 
          border-left: 5px dashed red; 
          

          • 

        •  Border-right: right border Wire. 
          • 

        •  Border-top: Top border line. 
          •  Border-bottom: bottom border line. 
          •  Border: Add border lines to four sides at the same time. 
          • CSS padding properties: padding from border line to content
        • Note: When we usually call the width and height properties, they refer to the width and height of the content. Does not include inner and outer margins and border lines. 
          • 

        •  Padding-left: The distance between the left inner padding and the right line to the content. 
          • 

         Padding-right: right inner padding distance. Same as above
           Padding-top: Top. 
          •  Paddingbottom: Next. 
          •  Abbreviated form
          •  Padding:10px; //The inner padding on the four sides is 10px respectively;
          •  Padding: 10px 20px; //The top and bottom are 10px; the left and right are 20px; 
          •  Padding: 5px 10px 20px; //The top is 5px, the left and right are 10px, and the bottom is 20px ; 
          •  Padding: 20px 10px 5px 20px; //The order is top right, bottom left; 
          • CSS margin property: the distance from the edge to the outside 
          •  Margin-left: The distance from the left line to the outside 
          •  Margin-right: Right...
           Margin-top: Top…….
          •  Margin-bottom: Bottom…….
          •  Abbreviation: 
          •  Margin: 10px; //The four outer margins are 10px each. 
          •  Margin: 10px 20px; //The top and bottom margins are 10px, and the left and right margins are 20px. 
        • 

        •  Margin: 10px 20px 50px; //The top margin is 10px, the left and right margins are 20px, and the bottom margin is 50px. 
          • 

        •  Margin: 10px 20px 30px 40px; //The order is top right, bottom left. 
          • 

        CSS Background Properties
          

        •  Background-color: Background color. 
          • 

        •  Background-image: Background image address. Background-image:url(image/banner.jpg)
          • 

        



































































































        

        

      

      

      • 

    The above is the detailed content of Share a journey of learning HTML. For more information, please follow other related articles on the PHP Chinese website!
    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：How to deal with the problem that part of the pop-up window still "remains on the page" after closing it in iOS?Next article：How to deal with the problem that part of the pop-up window still "remains on the page" after closing it in iOS?
    Related articles
    See more