• 从HTML开始


     

    <html>:做网页,是一种超文本标记语言

        超文本:既有添加文本的能力,还可以添加图片,视频等多媒体元素。

        标记:由标签组成。不同的标签有不同的效果。

             开始标签,结束标签。 如:张三开始 - 张三结束。

    <title>:标题内容</title>是整个网页的标题标签。

    <!doctype html><!--文档声明,告诉浏览器以什么样的标准来解析该网页-->
    
    <html><!--根标签的开始-->
    
    <head><!--头部标签的开始-->
    
    <meta charset="utf-8"><!--设置网页的编码,设置UTF-8,可防止中文乱码-->
    
    <title>我的第一个html文件</title><!--设置网页的 标题-->
    
    </head><!--头部标签的结束-->
    
    <body><!--身体标签的开始-->
    
    hello阿萨德
    
    </body><!--身体标签的结束-->
    
    </html><!--根标签的结束-->

    1.常用的标签

     

    标题标签字体加粗  h1~h6 字体逐渐变小,自动换行  
    
    换行标签   <br/>
    
    标尺线标签  <hr/>   
    
    marquee 弹幕效果
    
    direction  方向  
    
    left(左)  right(右) up(上) down(下)
    
    scrollamount  设置速度,值越大,越快
    
    behavior  
    
    scroll(循环滚动)
    
    slide 一次,走完即停
    
    alternate  交替滚动(来回滚动)
    
    height  设置高度
    
    加粗  strong   b
    
    斜体  i  em
    
    图像标签 img
    
    src 图片的路径(相对路径和绝对路径)
    
    title  鼠标悬浮在图片上显示的内容
    
    alt  图片无法加载时,显示的内容

    2.单标签和双标签

    单标签:单独一个标签  比如<br>

    双标签成对存在的,比如<h1></h1>

    3.相对路径和绝对路径

    html导入外部资源
    
        相对路径
    
          相对当前页面的位置,去寻找另外一个资源
    
          ./  当前目录 
    
          ../  上一级目录
    
          ../../ 上二级目录 
    
        绝对路径
    
          从网站根目录寻找另外一个资源
    
        ./是同级
        ../是去上一级
        ../images/a1.jpg,去当前文件的上一级寻找名字为images的文件夹,再到images文件夹下面寻找a.jpg

    4.超链接  a标签

    <a href="http://www.baidu.com" target="_blank"> 点击</a>
    
    href:设置要打开的链接
    
       target:设置在何处打开
    
       _self:在本窗口打开
    
       _blank:在新窗口打开
    
           还可在iframe中打开
    
       _top:回到顶部

    5.转义字

    &nbsp; 空格
    
    &lt;    <
    
    &gt;    >
    
    &copy; ©版权符号

    6.锚链接

    定义一个锚点
    
    <a name="mao">锚点位置</a>
    
    跳到锚点位置
    
    <a href="#mao">跳到锚点</a>

    7.列表

    有序列表
    
    <ol type="I" start="2"> <!-- 定义一个有序列表 -->
    
      <li>第1项</li><!-- 定义一个列表项 -->
    
      <li>第2项</li>
    
      <li>第3项</li>
    
      <li>第4项</li>
    
      <li>第5项</li>
    
    </ol>
    
    type:设置序号的类型   A  a  1  i  I
    
    start:设置开始序号  
    
    无序列表
    
    <!--disc黑点  circle圆  square黑方块 -->
    
    <ul type="square">
    
      <li>11</li>
    
      <li>22</li>
    
      <li>33</li>
    
      <li>44</li>
    </ul>
    
    自定义列表
    
    <dl>
      <dt>张艺兴</dt>
      <dd>是一个....</dd>
    </dl>
    
    dd相对于dt有缩进

    8.行级标签、块级标签

    P标签 段落标签:自动换行,段前段后间隔比较大

      行级标签:不会自动换行,设置宽高无效,比如:a ,strong

      块级标签:会自动换行,可设置宽高  h1 ,  h2  , p

      行内块:不会自动换行,可设置宽高  比如  img

     

    9.表格table

    行,列,单元格,边框,内容位置,合并
    
    基本结构
    
    <table border="1" width="400" height="400">
      <tr>
        <td align="left">11</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    
    顺序:table>tr>td
    
    tr:行
    
    td :单元格
    
    对一个td设置width,
    
    那该列的width都是一样的(列宽)
    
    对一个td设置height,
    
    那该行的height都是一样的(行高)
    
    和把height设置在tr上是一样的效果
    
    align:
    
    设置在td上,是设置该td内容的水平位置
    
    left(左),right(右),center(中)
    
    设置在tr上,是设置该tr里所有td内容的水平位置
    
    valign:
    
    设置在td上,是设置该td内容的垂直位置
    
    top(上),middle(中),bottom(下)
    
    设置在tr上,是设置该tr里所有td内容的垂直位置
    
    cellspacing:设置单元格之间的距离
    
    cellpadding:设置单元格内容与单元格之间的距离
    
    colspan:跨列(左右合并)
    
       colspan=”n” 对应的该tr要删n-1个td
    
    rowspan:跨行(上下合并)
    
       rowspan=“n”
    
    对应的下n-1的每一行都要删除一个td

    10. 表单元素表单form:将前台填写的数据传到后台

    <form action="http://www.taobao.com"></form>
    action:设置提交的地址
    method:设置提交方式(post,get)
    https://www.taobao.com/?user=zhangsan&pwd=123
    文本输入框:
    <input type="text" >
    密码框 <input type="password" >
    提交按钮 <input type="submit">
    单选框 <input type="radio" name="sex"><input type="radio" name="sex">
    复选框
    <input type="checkbox" name="love"> 看电影 <input type="checkbox" name="love"> 打球 <input type="checkbox" name="love"> 敲代码
    下拉选择
    <select name="stu" >   <option value="ben">本科</option>   <option value="yan">研究生</option>   <option value="bo">博士</option> </select>
    textarea 多行文本域 <textarea name="" cols="30" rows="5" >11111</textarea>
    图片提交按钮 <input type=“image” src=“路径”> <input
    type=“submit”>
    重置按钮 <input type="reset"><!-- 重置按钮,清空表单 -->
    普通按钮 <input type="button" value="按钮">
    文件选择 <input type="file"> 用于文件上传

    隐藏域
    <input type="hidden"> 在页面不展示

    12.一些属性

    placeholder  表单提示信息
    
    readonly   只读
    
    disable    不可用,不会提交
    
    required  必填
    
    hidden    隐藏
    
    checked    单选、复选的默认选中
    
    selected   下拉选择框的默认选中

    13. 网页框架

     

    iframe
    <iframe width="500" height="500" src="http://www.taobao.com" frameborder="1"></iframe>
    
    src=网页的路径
    frameborder  边框
    scrolling="no"  去掉滚动条   
          yes   加上滚动条
    frameset
    <frameset cols="25%,*">   <frame src="http://www.baidu.com"></frame>   <frame src="http://www.baidu.com"></frame> </frameset> Cols:将网页左右分割 Rows:将网页上下分割 两者对比 Iframeframeset灵活,在使用frameset时需删除body,并且也不能添加其他的元素到网页中,而iframe可以,并且iframe可以嵌套在其他标签里,位置是任意的。推荐使用iframe.

     14.标注

    <input id="man" type="radio">
    <label for="man"></label>


     

  • 相关阅读:
    bilibili 高并发实时弹幕系统的实现
    主流深度学习框架对比
    完整的视频直播系统
    一个简单的直播demo for java
    流媒体知识 wiki
    Entity Framework 6 暂停重试执行策略
    泛型的资源释放
    Entity Framework异步查询和保存
    Entity Framework中的连接管理
    了解Entity Framework中事务处理
  • 原文地址:https://www.cnblogs.com/lin02/p/10763696.html
Copyright © 2020-2023  润新知