zoukankan      html  css  js  c++  java
  • H5基础

    html语法基础

    // 标准属性:所有的元素都支持的属性
    id       定义此元素在页面中的唯一标识
    title    鼠标悬停在元素上时,显示的文本
    style    css中  定义行内样式
    class    css中  引用类选择器

     注释的快捷键: ctrl+/

    <!--注释:1、注释不可以嵌套注释  2、注释不可以写在标签中-->

    HTML文档的构成

    1、文档类型的声明

    <!-- 告诉浏览器以代码以h5的规则解析 -->
    <!DOCTYPE html>  

    2、网页的基本结构

    <!DOCTYPE html>
    <!-- 网页开头和结束 -->
    <html>
    <!-- 网页头部内容 -->
    <head>
    <title></title>
    </head>
    <!-- 网页主体,用户可见 -->
    <body>

    </body>
    </html>

    3、head元素是其他头元素的容器<head></head>

    <head>
    <!-- 元数据,定义网页的全局信息,解码方式 -->
    <meta charset="utf-8">
    <meta name="Keywords" content="关键词的内容">
    <meta name="description" content="描述的内容">
    <title></title>
    </head>


    定义网页内部样式
    <style type="text/css"></style>
    定义或者引用js文件
    <script type="text/javascript"></script>
    引用外部样式表
    <link rel="stylesheet" type="text/css" href="">

    4、body元素——定义网页主体

    bgcolor 背景颜色
    text 字体颜色
    取值: 合法的颜色值----->单词

    例1

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
    </head>
    <body bgcolor="pink" text="#fff">
        lorem
    </body>
    </html>

    5、标题元素——在页面中以醒目的方式显示文本

    <h1>
        <h2>
            <h3>
                <h4>
                    <h5>
                        <h6>
    
    
    特点:1、文本加粗   2、字号变化   3、独占一行且上下有垂直间距
    属性:aligb   设置标签内容水平方向对齐:left/center/right

    6、段落标记

       语法:<p></p>

          作用:突出表示一段文字

          特点:独立成行,上下有垂直的间距

          属性:align

    7、换行标记

       语法:<br></br>

    8、水平线(分割线)

          语法:<hr></hr>

          属性:

           width="50%"      表示水平线的宽度   取值为%或者px为单位的数字

           size="5px"           表示水平线的尺寸(粗细),取值为%或者px为单位的数字

           align="left"          对齐方式

           color="red"          设置水平线的颜色

    9、预格式化标签

         语法:<pre></pre>

         作用: 标签内部的文本,保留其格式,再页面上显示

         空格折叠现象:一个或多个空格、回车会被浏览器渲染成一个空格或显示

     10、特殊字符(实体)

          空格    &nbsp;

          <            &lt;

          >           &gt;

         版权       &copy;

         注册       &reg;

            ¥        &yen

             x         &times;

    例1;

    <p>Copyright &copy 2014-2018 &lt; 京东ID.com &gt; 版权所有</p>

     11、文本样式标签

    <b>我是粗体</b>
    <strong>我是粗体</strong>
    
    <i>我是斜体</i>
    <em>我是斜体</em>
    
    <u>下划线</u>
    
    <del>删除线</del>
    <s>删除线</s>
    
    <!-- 上标:2的3次方 -->
    上标:2<sup>3</sup>
    下标: 2<sub>3</sub>

    12、分区元素

      1)、块分区,用于页面中布局

            语法: <div></div>

            特点:独立成行

            2)、行分区,同一行文本使用不同的样式

      语法:<span></span>

           特点:可以与其他的span和文字共用一行

     13、行级元素和块级元素(元素的显示形式)

      1)块级元素——在网页中单独成行就是块级元素
    
         常见块级元素:h1-h6    p    div
    
         从上往下排列
    
      2)行级元素——在页面中与其他行内元素/行内块共用一行
    
         从左往右排列
    
         页面中常见行内元素:em  i  b strong u sup  sub  span

    3)行内块元素

        显示的方式与行内元素相同,但是具备块级元素的特征

     4)table的显示方式
        
       1、表格的宽高是由表格的内容决定,内容多就宽一些,高一些;
    2、表格中的多有数据都预读到内存,一次性画到页面上;

    14、图像和连接

    1)图像

    语法:<img>或者</img>
    属性:src="url"    url-图片资源路径
    alt :图片资源出错,显示文字;

    设置图片高度,以px为单位的数字;
    height:设置图片的高度,以px为单位的数字;
    若 宽高比设置的不对,会发生图片失真的情况 ,解决:宽高只设置1个,另一个自适应; URL路径的表现形式 绝对路径:一个完整的路径(通信协议
    +主机地址+文件目录结构+文件的具体名称) 合适使用: 1)使用网络资源的时候,使用绝对路径; 优点:不占据自己服务器的存储空间; 缺点:不稳定;
    相对路径:参照物是html本身
    1)图片和html文件在同一个路径下,src直接引用文件名称;

    二、表格列表

     1、链接

    <a href="跳转地址,若没有写#" target="_blank">链接文字</a>
    target的取值:_self 默认值,在当前页面标签页打开新链接
    _blank 在新的标签页打开

    a标签的其他表现形式:

    <!-- 下载 -->
    <a href="1.zip">下载</a>
    <!-- 新建邮件 -->
    <a href="邮箱地址">新建邮件</a>
    <!-- 执行js脚本 -->
    <a href="javascript:alert(111111)">执行js</a>
    <!-- 返回当前页顶部 -->
    <a href="#">返回顶部</a>

    2、锚点——网页中的一个记号

    h4:

        1)<a>定义锚点 

        <a name="no1"></a>

       2)<a>链接到锚点       

        <a href="#no1">回到锚点</a>

    h5:

       1) 任意标签的Id属性定义锚点

     <any id="id"></any>

       2)使用a标签链接锚点

        <a href="#id">回到锚点</a>

    3、表格

    表格的一个重要功能------>布局

    <!-- 语法 -->
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>        
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>        
        </tr>
    </table>

    table属性:

    1、border="1px"; 设置边框
    2、width="200px";
    3、height="200px";
    可设置宽高,内容小于宽高,按宽高;内容大于宽高,按内容改变尺寸;
    4、align 设置表格对齐方式(水平)
    5、bgcolor 背景颜色
    6、cellpadding 设置单元格内边距(边框到内容的距离)
    7、cellspacing 设置单元格外边距(单元格与单元格之间的距离)

    tr属性

    1、align    设置当前行内容的水平对齐方式(设置表格内容对齐方式)
    2、valign   设置当前行内容的垂直对齐方式 (取值:top  middle  bottom)
    3、bgcolor  当前行的背景颜色

    td属性

    1、width
    2、height
    3、align
    4、valign
    5、bgcolor
    6、colspan=2 从指定的单元格位置处开始,横向跨两列,需要将被合并的列删掉
    7、rowspan=? 从指定的单元格位置处开始,纵向向下合并,需要将被合并的行删掉

    table中的可选标记

    1、表格的标题----如果设置标题,把必须将<caption>标签放在<table>后;
    <caption></caption>
    2、<th></th>  代替<td></td>  行/列的标题   加粗/居中

    表格的复杂应用

    1、行分组
    可以将连续几个行,划分到一个组中,进行统一管理
    表头行   <thead></thead>   表格最上面一行的标题放在thead中
    表主体   <tbody></tbody>   允许将若干放在tbody中进行统一管理
    表尾行   <tfoot></tfoot>   表格中最后一行放在tfoot中
    2、表格的嵌套
    一张表格中,所有的嵌套的表格,只能放在td中

     列表 ----> 默认按照从上到下的顺序来显示数据,并且可以在数据前添加标识,使用列表布局(去掉标识,从上到下,从左到右排列)

    1、列表的组成

      1)有序列表<ol></ol>

         列表属性:type=1/a/A/i   [排序方式]    start='20'     从20开始

      2)无序列表<ul></ul>

                列表属性:type=disc/circle/square/none 

    均有列表项:<li></li> 

    2、列表嵌套----->  所有的嵌套必须只能写在li中

    三、结构标记

    1、结构标签----->    代替div    用户描述整个网页结构,提升标记的语义

    常用的结构标记:

    <header></header>    定义网页或某个区域的头部内容
    <nav></nav>          定义网页的导航链接部分
    <section></section>  定义网页的主体
    <aside></aside>      定义网页侧边栏
    <footer></footer>    定义网页底部内容,多用于版权,解释说明,备案号
    <article></article>  定义与文字相关内容

    四、表单

    1)作用:

      1、提供可视化的输入控件;

      2、手机用户填写的信息并提交给服务器

    2)表单的组成部分:

      1、前端部分

      提供表单的控件,与用户做交互的可视化控件;

      2、后端部分

      对提交的数据进行处理(接口)

    3)表单

    <form action="" method="" enctype=""></form>
    
    属性:
    1、action    定义表单被提交时发生的动作,通常用来定义服务器处理数据的地址、接口,默认提交给本页地址
    2、method    指定表单数据提交的方式(方法)
        get()
        post()
        delete()
        put()
    3、enctype     编码方式,设置表单允许将什么格式的数据提交给服务器
    
        enctype="text/plain"      提交普通字符,不能由特殊符号
        enctype="application/x-www-form-urlenooded"        允许将任意的字符提交给服务器
        enctype="multipart/form-data"            允许将文件提交给服务器

    4) 表单控件 ----->   能够与用户进行交互的可视化元素

    【分类】
    1. input元素 2. textarea 所行文本域 3. 下拉选择框 4. 其他元素
    【input元素】 ----->  在页面中提供各种各样的输入控件,通过type属性来设置输入控件的样式
    
    type    设置输入控件的类型
    name    为控件定义的名称,提供给服务端使用(必须值)
    value   控件的值,提交给服务端使用
    type="text"   默认值
    type="password"   
    
    
    【input属性】:
    1、maxlength    限制输入的最大字符数
    2、readonly     只读,允许被提交
    3、disabled     禁用控件  不可操作和提交
    4、placeholder   占位符  默认显示在控件上,得到焦点 文本无效  不可被提交
    
    
    <form>
        <input type="text" name="uname" readonly=""  placeholder="请输入账号">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>


    按钮
    type="submit" 提交按钮 将表单中的数据提交给服务器
    type="reset" 重置按钮 让表单内容恢复到初始化状态
    type="button" 无功能的按钮 没什么功能 单击时间onclick="js的函数"


    <button onclick="js的函数"></button> 可以提交

    type="radio" 单选按钮,用name来定义控件名称+分组,必须有value
    checked 设置默认选中项,无值属性
    checkbox 多选按钮,传到后台要全部接收的话需要定义name为数组hobby[],后台用for循环接收

    5)  隐藏域信息 -----> 不想给用户看  又想提交给服务器

    <input type="hidden" name="uid" value="dn18100023">

    6)文件选择框

    若传file:注意:
    method="post" 
    enctype="multipart/form-data"
    multiple 无值属性,支持同事上传多个文件   需要name属性
    
    <form action="" method="post" enctype="multipart/form-data">
        <input type="file" name="me" multiple>    
    </form>

    7)文本域-----> 允许录入多行数据的文本框

    <form action="">
            <!-- 若输入的多 则出现滚动条 -->
            <textarea name="sanm" cols="30" rows="10"></textarea>    
    </form>

    属性:

      name         控件名称

           readonly    只读

           cols           指定文本域的列数

           rows          指定文本域的行数

    8)下拉选择框

    当option没有value属性时,提交时选择的value为选中的option内容;当option有value时,提交时 选择的value时选中的option的value;

    <form action="">
            <select name="city" value="北京">      表示一个下拉选择框
                <option>北京</option>    表示下拉选项中的一个选项
                <option>北京1</option>
                <option>北京2</option>
            </select>
     </form>

    属性:

      name

      size            定义显示选项的数量,默认为1,若大于1  下拉选项表现为滚动列表

      multiple      无值属性,可以多选,但是name需要用数组

      value

      selected     设置默认选中项

    9、其他元素

      label           文本与表单控件的关联

      属性:

      for:要与label中文字发生关联的form控件的id

      例1:

    <input type="radio" name="choose" value="delete" id="c3">
    <label for="c3">删除</label>

    10、为空件分组

      fieldset          为控件分组

      legend           文字放在框上,分组标题

    11、浮动框架

       作用:允许在一个网页中引入另一个网页

    <header>
        <iframe src="网页相对路径" width="100%" height="200px" frameborder="0" scrolling="no"></iframe>
    </header>
      scrolling      不显示滚动条

        frameborder        不显示边框

        height       高度存在问题,需要使用js.dom来解决

    12、h5的新表单元素  --->  h5中新提出的表单控件,h4不可用

     

    <body>
        <form action="">
            <input type="email" name=""><br>    // 电子邮件验证(@以及@后面的内容)
            <input type="search" name=""><br>   // 提供快速清除文本框的功能
            <input type="url" name=""><br>      // 验证数据是否符合url规范,验证http://xxx
            <input type="tel" name=""><br>      // 手机上 获取焦点  显示拨号键的效果
            <!-- 只能接收数字,并且提供了箭头灵活调整,E可以输入, step步数-->
            <input type="number" name="" value="10" max="20" min="3" step="2"><br>
            <input type="range" name="" value="10" max="20" min="3" step="2"><br>    // 滑块,允许用户指定选取的范围
            <input type="color" name=""><br>     // 颜色拾取器
            <input type="date" name=""><br>      // 日期选择器
            <input type="month" name=""><br>     // 不拿天
            <input type="week" name=""><br>      // xxxx年xx周
            <input type="submit" name="">
        </form>
    </body>

     

      

      

      

      

      

      

     

      

       

           

          

  • 相关阅读:
    CodeForces Gym 100500A A. Poetry Challenge DFS
    CDOJ 486 Good Morning 傻逼题
    CDOJ 483 Data Structure Problem DFS
    CDOJ 482 Charitable Exchange bfs
    CDOJ 481 Apparent Magnitude 水题
    Codeforces Gym 100637G G. #TheDress 暴力
    Gym 100637F F. The Pool for Lucky Ones 暴力
    Codeforces Gym 100637B B. Lunch 找规律
    Codeforces Gym 100637A A. Nano alarm-clocks 前缀和
    TC SRM 663 div2 B AABB 逆推
  • 原文地址:https://www.cnblogs.com/hd-test/p/11733934.html
Copyright © 2011-2022 走看看