zoukankan      html  css  js  c++  java
  • 零基础学html第一天

    html:超文本标记语言

    unicode(UTF-8):万国码

    <...>:标记标签

    &nbsp; :空格

    <br>:换行

    <hr>:水平线

    <p></p>:段落标签

    <sup></sup>:上角标(如:y=x^2)

    <sub></sub>:下角标

    <h1></h1>:标题标签(h1~h6)

    <strong></strong>:字体加粗

    <i></i>:字体倾斜

    <pre></pre>:原格式输出(需要空格时按空格键,tab键不可以)

    ········标签中输入lorem后按tab键添加测试数据

    ------------------------------------------------------------------------------

    无序列表:

    <ul>

      <li></li>

    </ul>

    属性:

    type="disc"   :实心圆点(默认)

    type="circle"    :空心○

    type="square"  :实心方块

    ---------------------------------------------------------------------------

    有序列表:

    <ol>

      <li></li>

    </ol>

    属性:

    type="1"    :序号为数字

    type="a"    :序号为小写字母

    type="A"    :序号为大写字母

    type="i"    :序号为小写罗马数字

    type="I"    :序号为大写罗马数字

    ---------------------------------------------------------------------------

    自定义列表:

    <dl>

      <dt>辽宁省</dt>

      <dd>沈阳市</dd>

      <dd>大连市</dd>

    </dl>

    dt:第一级标题

    dd:第二级标题

    ----------------------------------------------------------------------------

    超链接:

    <a href="">...</a>

    属性:

      href=""    :中写要跳转页面的地址

      target="_blank"   :跳转时打开新的一页

    回顶部功能:

      <a name="a01"></a>    :放在最顶部

      <a href="#a01">回顶部</a>

    ----------------------------------------------------------------------------

    图片:

      <img src="" >

    属性:

      src=""   :中写图片地址

      title=""  :提示(鼠标放在图片上时的提示)

      alt=""   :当图片加载失败时的提示

    注(相对路径、绝对路径):

      绝对路径:文件在计算机中真正的路径

      相对路径:谁要获取资源就相对谁

    ----------------------------------------------------------------------------

    form表单:

    <form>
    用户名:<input type="text" name="user" /><br>
    密&nbsp;码:<input type="password" name="password" /><br>
    性别:<input type="radio" name="sex">男
         <input type="radio" name="sex">女<br>
    省份:
    <select>
      <option>辽宁省</option>
      <option>吉林省</option>
      <option>内蒙古自治区</option>
    </select><br>
    城市:
    <select>
      <option>大连</option>
      <option>沈阳</option>
    </select><br>
    <input type="submit" value="登录">
    </form>

    select为下拉选择

    input属性:

       type="text"   :文本输入框

      type="password"   :密码输入框

      type="radio"      :单选(name需要相同)

      type="submit"    :提交按钮

    ----------------------------------------------------------------------------

     以下为学习时的代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>文升谁都打不过</title>
    </head>
    <body>
        <a name="a01"></a>
        听闻爱情,<br>    十人九悲!<hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure commodi esse odio nobis officia sed reiciendis, amet, voluptas nihil consequatur fugiat molestias. Ratione beatae aliquam ullam, optio! Culpa, asperiores suscipit.</p>
        &copy;
        &reg;
        &gt;
        &lt;
        y=x<sup>2</sup>
        H<sub>2</sub>O
        <h1>这是H1标题</h1>
        <h3>这是H3标题</h3>
        <h6>这是H6标题</h6>
        <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate repellendus laboriosam suscipit voluptatibus vel dolore culpa quisquam modi quis provident incidunt minus veniam, sunt sit quam id repellat debitis exercitationem!</strong>
        <i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut facilis voluptatibus, earum libero error atque sunt veniam unde sapiente corrupti vero fugit voluptas. Minima nemo est velit earum dicta.</i>
        <pre>
                    凉州词
        葡萄美酒夜光怀,欲饮琵琶马上催。
        醉卧沙场君莫笑,古来征战几人回。
        </pre>
        <ul type="square">
            <li>香蕉</li>
            <li>苹果</li>
            <li>大鸭梨</li>
        </ul>
        <ol type="a">
            <li>抽烟</li>
            <li>喝酒</li>
            <li>烫头</li>
        </ol>
        <dl>
            <dt>辽宁</dt>
                <dd>沈阳市</dd>
                <dd>大连市</dd>
            <dt>吉林</dt>
                <dd>长春市</dd>
                <dd>吉林市</dd>
            <dt>内蒙古自治区</dt>
                <dd>呼和浩特市</dd>
                <dd>包头市</dd>
        </dl>
    
        <h1>我的电脑</h1>
        <ul type="circle">
            <li>本地磁盘(C:)
                <ul type="square">
                    <li>我的文档</li>
                    <li>我的程序</li>
                </ul>
            </li>
            <li>本地磁盘(D:)
                <ul type="square">
                    <li>我的电影</li>
                    <li>我的游戏</li>
                </ul>
            </li>
        </ul>
        <a href="index1.html" target="_blank">点这里你会发现惊喜</a>
        <a href="#a01">回顶部</a>
    
        <img src="../zly.jpg" title="这是赵丽颖" alt="图片走丢了">
    
        <form>
            用户名:<input type="text" name="user" /><br>&nbsp;码:<input type="password" name="password" /><br>
            性别:<input type="radio" name="sex"><input type="radio" name="sex"><br>
            省份:
            <select>
                <option>辽宁省</option>
                <option>吉林省</option>
                <option>内蒙古自治区</option>
            </select><br>
            城市:
            <select>
                <option>大连</option>
                <option>沈阳</option>
            </select><br>
            <input type="submit" value="登录">
        </form>
    </body>
    </html>

    如有错误希望您能提示我修改

    个人笔记,转载请说明源地址

  • 相关阅读:
    按钮/文本框 disabled
    jQuery实用的语法总结
    练习JavaScript实现梯形乘法表 效果:
    练习JavaScript实现过滤特殊字符
    练习JavaScript判断上传文件后缀名
    JavaScript知识结构图
    Photoshop、Illustrator思维导图笔记
    PHP中Imagick 图像处理类库的使用
    PHP 使用 Imagick 裁切/生成缩略图/添加水印, 自动检测和处理 GIF
    SWFUpload V2.2.0 详细说明文档
  • 原文地址:https://www.cnblogs.com/makangning/p/9362116.html
Copyright © 2011-2022 走看看