zoukankan      html  css  js  c++  java
  • html学习成长记

    •认识HTML

    1.WWW的基本概念

         www :World Wide Web 全球信息网

          www分为两个部分:Server , Client

      

         两者间的通讯方式通过HTTP(HyperText Transfer Protocol)超文本传输协议进行沟通的,所谓通讯协议就是当计算机彼此通讯时,所共同遵守的通讯规则。

    2. URL地址:Uniform Resource Locator 统一资源定位器,用于指定要取得的Internet上资源的位置与方式。

    •网页开发技术概况

    1.以网页技术来说,大致可以分为静态网页和动态网页。

    2.HTML (HyperText Makeup Language)超文本标记语

    言,目前版本为4.0。

    •认识HTML语言

    •HTML标记

    <标记名称  属性1=”值1”  属性2=”值2” …>组件资料</标记名称>

    *标记不区分大小写,属性值可以不加引号

    •HTML结构

          <html>

                 <head>

                    <title>标题</title>

                </head>

                 <body>

                     主体部分

                 </body>

           </html>

    •HTML注释:<!--您的第一个HTML文件-->
     

    文字版面编辑

    •版面控制标记

          1、换行<br/>

          2、段落标记<p></p>

          3、水平线<hr>

       html属性:

       粗细: size,单位px 、宽度:width,单位px或%、 水平对齐方式:align、颜色:color     

          4、空格&nbsp;

          5、居中标记<center></center>

    •标题文字

          1、 <hn></hn>

          n值为1~6 依次减小

          2、特殊文字样式 

      粗体 b; 斜体 i; 下划线 u; 删除线 s; 上标 sup; 下标sub 

    body标签属性:

      背景颜色:bgcolor

      背景图片:background

      文字颜色:text

    •文字列表设计

      有序列表:

      <ol>

                 <li>编号1</li>

                 <li>编号2</li>

                 <li>编号3</li>

         </ol>

         编号形式:type属性

         Type=1 或A 或a或I 或i

         设置编号的开始序号:start属性

         Start=n   (只能是数字)

      无序列表:

      <ul>

               <li>项目符号</li>

               <li>项目符号</li>

               <li>项目符号</li>

         </ul>

          设置项目符号的形式:type属性

          Type=circle  或disc或square

        列表嵌套:

        <ul>

          <li>选项1</li>

          <li>选项2

            <ol>

              <li>选项2-1</li>

              <li>选项2-2</li>

            </ol>

          </li>

        </ul>

    •表格

    1、语法

           <table>

        <caption>表格标题</caption>

          <tr><th>表头1</th><th>表头2</th></tr>

          <tr><td>列表1</td><td>列表2</td></tr>

        </table>  

    2、表格属性

          border,边框宽度;cellspacing,表格内框的宽度;cellpadding,表格内的文字至四周边框的距离;Height,高度;

          width,宽度; bordercolor,边框颜色; bgcolor,背景颜色; align,表格在网页中的水平对齐方式。

    3、行、列属性

          高:Height 

          行/列外框的颜色:bordercolor

          行/列背景色:bgcolor

          行/列文字水平对齐方式:align

          行/列文字的垂直对齐方式:valign=top   middle  bottom

    4、跨行、跨列

          Rowspan、 colspan

    •图片使用

      图片标记:<img src="图片路径" >

      图片属性:高度:height; 宽度:width; 边框宽度:border; 优先读低分辨率图:lowsrc; 文字标注:alt

    •超链接

      1、绝对路径&相对路径:

      绝对路径: http://www.baidu.com/ 或 D:360Downloads

      相对路径:   ../../a/b.jpg

      

         2、超链接标记

          <a href=”链接位置”>超链接名称</a>

         3、图片超链接

          <a href="http:\www.baidu.com"><img src=d:xujun.jpg></a>

         空链接:<a href="JavaScript:;"></a>

        空链接与其它各类链接的区别: 

        href="JavaScript:;"   同 href="javascript:void(0);" ,空链接,点击不会有任何跳转

        href="#"        同#top,点击回到顶部,页面不刷新

        href=" "         点击后刷新并回到顶部

        href="/"         点击跳转到上一级目录 

      链接打开窗口:

         _blank      在新窗口打开     

        _parent    在父级窗口打开     

        _self        在当前窗口打开     

        _top        返回信息显示在顶级浏览器窗口中

    •多媒体
    •滚动字幕

          1、<marquee>...</marquee>

          2、 <marquee>的属性  

        对齐方式:align

        单向运动:scroll

        到左停止:slide

        往返运动:alternate

        背景颜色:bgcolor

        循环次数:loop

        字幕高度:height

        字幕宽度:weight

        移动速度:scrollamount

        停顿时间:scrolldelay

        字幕左右空白:hspace

        字幕上下空白:vspace

        文字方向:direction

        移动方式:behavior

    •HTML表单

       <form action="" method="" target="" ></form>  属性:action 表单提交的URL地址  method   两种取值方式 target 指定 目标窗口

      1、按钮:    <input type="button">

      2、文本框:    <input type="text">

      3、密码:     <input type="password">

      4、单选:     <input type="radio" id="male" name="sex" checked="checked"><label for="male">男</label>   

                <input type="radio" id="female" name="sex"><label for="female">女</label>

      5、复选框:     <input type="checkbox">红色<input type="checkbox">绿色

      6、下拉菜单:     <select>

                      <option>--请选择--</option>       

                  <option>唱歌</option>       

                  <option>跳舞</option>     

                 </select>  

        *如果要变成复选,加muiltiple即可。用户用Ctrl来实现多选。

        <select name="fruit" multiple="multiple">

        还可以用size属性来改变下拉框(Select)的大小

      7、上传控件:     <input type="file">

      8、多行输入框:     <textarea maxleng="限制字数" cols="宽度" rows="高度"></textarea>

      9、重置按钮:     <input type="reset">   [只针对它所在的form表单有效果]

      10、提交按钮:     <input type="submit">  [只针对它所在的form表单有效果]

      11、图片按钮:

        <input type="image">

      12、隐藏字段:

        <input type="hidden">

      

  • 相关阅读:
    Git更新或提交出错的解决办法
    webpack简单学习的入门教程
    CentOS源码安装QT
    后台程序在向tty/串口写数据的时候stop了
    Linux signal 处理
    Linux C 获取 文件的大小
    Microsoft Excel 标题栏或首行锁定
    Socket连接何时需要断开
    Windows MFC 打开文本
    动态库的生产和调用
  • 原文地址:https://www.cnblogs.com/xiaosy/p/4666986.html
Copyright © 2011-2022 走看看