• html学习笔记


    1.

    meta name="viewport" content="width=device-width,initial-scale=1.0"

    content属性值 :

         可视区域的宽度,值可为数字或关键词device-width

         height:同width

         intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放

         maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,

                  maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。

         user-scalable:是否可对页面进行缩放,no 禁止缩放

    2.

    <!DOCTYPE HTML>//这个网页的文档类型,这个是html5的写法 <html lang="en">//这里的lang="en"可以删除,如果不删除的,用谷歌之类打开,它会认为是英文的,会自动给翻译(如果设置了自动翻译的话)     <head>//这个就是头部的那个标签了。     <meta charset="UTF-8">//这个是设置的编码为UTF-8的

    3.  

    html中link标记允许当前文档和外部文档之间建立连接,但是只能在head标签里面用.href设置或获取目标 URL ,rel设置或获取对象和链接目的的关系,type设置或获取对象的 MIME 类型,media设置或获取媒体类型.

    4. alt: 如果无法显示图像,浏览器将显示替代文本

    5. $(document).ready(function(){}) 可以简写成 $(function(){}),页面框架下载完毕后就执行,js中用$来定义一个方法。在jQuery库中,$是jQuery的别名,如:$()相当于jQuery()。

    6. 语法结构: <marquee>文本或图片</marquee>

    属性: behavior:值有scroll,slide,alternate

    其中scroll表示循环滚动,slide表示只滚动一次,alternate表示来回滚动

    Bgcolor:表示背景色

    Direction:值有left,right,up,dowm,表示滚动的方向

    Scrollamount:表示滚动的速度,数值从1开始,数值越大的滚动的速度越快

    Scrolldelay:滚动字幕停顿的时间,填的数字,默认单位是毫秒,所以数字越大停顿的时间越长

    Hspace,vspace:用来设置内容和滚动框的水平和竖直的距离

    Loop:用来设置循环的次数

    onmouseOver:用来设置鼠标的滑动(用法如下

    <marquee onmouseout="this.Start()" onmouseover="this.Stop(_)">文本内容</marquee>

    作用:前面一个来设置鼠标移出该区域时继续滚动,后者设置鼠标移入该区域时停止滚动 7. 11.1<div>标签

    网页布局的三种方式:表格框架,框架和div标签

    语法结构: <div style=””> 具体内容</div>

    div可以使用嵌套结构

    Style有很多的属性在css中可以学到

    定义浮动框架: <div style=”float:left/right/none;”></div>

    定义左右结构的框架:

    <div>

    <div style=”float:left;”></div>

    <div style=”float:right;”></div>

    </div> 定义横向结构的框架: <div>

      <div style=”float:left;”></div>

      <div style=”float:left;”></div>

      <div style=”float:left;”></div>

    </div>

    这样就会产生横向的三个框架,总言之就是他们的float的值要一样

    定义纵向结构的框架: <div>

      <div style=”float:left;clear:both;”></div>

      <div style=”float:left;clear:both;”></div>

      <div style=”float:left;clear:both;”></div>

    </div>

    这样就会产生横向的三个框架,总言之就是他们的float的值要一样,并且最后要有一个clear:both 的属性。

    7.文本域,支持多行文本输入

    语法:

    <textarea rows="行数" cols="列数">文本</textarea>

    1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

    2、cols :多行输入域的列数。

    3、rows :多行输入域的行数。

    4、在<textarea></textarea>标签之间可以输入默认值。

    栗子:

    <form action="save.php" method="post" >

    <label>个人简介:</label>

    <textarea cols="50" rows="10">在这里输入内容...</textarea>

    <input type="submit" value="确定" name="submit" />

    <input type="reset" value="重置" name="reset" />

    </form> 


    8.使用单选框/复选框

    <input type="radio/checkbox" value="值" name="名称" checked="checked"/>

    1、type:

    当 type="radio" 时,控件为单选框

    当 type="checkbox" 时,控件为复选框

    2、value:提交数据到服务器的值(后台程序PHP使用)

    3、name:为控件命名,以备后台程序 ASP、PHP 使用

    4、checked:当设置 checked="checked" 时,该选项被默认选中

    栗子:

    <form action="save.php" method="post" >

    <label>性别:</label>

    <label>男</label>

    <input type="radio" value="1" name="gender" />

    <label>女</label>

    <input type="radio" value="2" name="gender" checked="checked"/>

    </form>

    9.下拉列表

    语法:<option value="提交值">显示值</option>

    <select>

    <option value="看书">看书</option>

    <option value="旅游" selected="selected">旅游</option>

    <option value="运动">运动</option>

    <option value="购物">购物</option>

    </select>

    10.使用下拉列表框进行多选

    <select multiple="multiple">

    <option value="看书">看书</option>

    <option value="旅游">旅游</option>

    <option value="运动">运动</option>

    <option value="购物">购物</option>

    </select>

    11.使用提交按钮提交数据:

    <input type="submit" value="提交">

    type:只有当type值设置为submit时,按钮才有提交作用

    value:按钮上显示的文字

    <form method="post" action="save.php">

    <label for="myName">姓名:</label>

    <input type="text" value=" " name="myName " />

    <input type="text" value="提交" name="submitBtn" />

    </form>

  • 相关阅读:
    剑指63.数据流中的中位数
    剑指62.二叉搜索树的第k个结点
    JPA ---- EntityManager使用
    JPA ---- EntityManager介绍
    win10多桌面切换
    $emit子组件如何传递多个参数
    height高度自适应
    vue Avoided redundant navigation to current location
    Ant Design 使用小结
    Object.keys方法之详解
  • 原文地址:https://www.cnblogs.com/auvxx/p/5399667.html
Copyright © 2020-2023  润新知