• HTML标签---学习笔记


    第一章

    HTML标准结构学习:

      顶层标签:html

        投标签:head

        主题标签:boby

    <html>
        <head>
            <meta charset="utf-8" />
            <title>HTML结构学习</title>
        </head>
        <body>
            hello world!
        </body>
    </html>

    第二章

    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />    <!--告诉网页使用指定的编码格式-->
            <title>HTML结构学习</title> 
            <meta name="keywords" content="HTML,JSDX,DZY,555" />   <!--网页关键字-->
            <meta name="description" content="本篇博客是关于HTML标签的学习哟,超级棒!!!" />   <!--网页描述-->
            <meta name="author" content="DZY" />   <!--网页作者-->
            <meta http-equiv="refresh" content="5;url=http://www.baidu.com" />   <!--网页5秒后自动跳转到百度-->
        </head>
        <body>
            hello world!
        </body>
    </html>

    第三章

    标题标签:

      h1到h6:会将其中的数据加粗加黑显示,并且显示依次减弱,标题标签自带换行功能(块级标签)

        属性:

          align:center、left、right

    水平线标签:

      hr:会在页面中显示一条水平线

        属性:

          width=“宽度”  设置水平线的宽度

          size=“高度”    设置水平线的高度

          color=“颜色”  设置水平线的颜色

    段落标签:

      p:会将一段数据作为整体进行显示,主要进行css和js操作时比较方便,会自动换行(块级标签)

        特点:段间距比较大

    换行符:

      br:告诉浏览器需要在此位置换行

    空格符:

      &nbsp;:告诉浏览器在此位置增加空格

    权重标签:

      b:会将内容加黑显示

      i: 会将内容斜体显示

      u:会将内容增加下划线

      del:会将内容增加中划线   

      以上这些不会换行,并却可以嵌套使用。

    注意:

      1 标签的属性是对标签功能进一步的补充,可以由开发人员自由指定标签的属性值,来达到想要的显示效果。

      2 像素单位占据的是电脑屏幕的大小,百分比占据的浏览器窗口的大小。 

    第四章

    列表标签:

      无序列表:

        ul:

          li:在该标签中书写列表内容,一个li标签代表列表中的一行数据

          特点:默认数据前有一个黑圆圈符号

      有序列表:

        ol:

          li:在该标签中书写列表内容,一个li标签代表列表中的一行数据

          特点:会自动给列表进行顺序编码,格式从小到大并且时连续的

          属性:

            type:可以改变顺序编码的值,可以时1 a A等,默认使用阿拉伯数字进行顺序编码

      自定义列表:

        dl:

          dt:数据的标题

          dd:数据的具体内容,一个dd表示一条数据

    第五章

    图片标签:

      img:

        src:图片路径

          本地资源路径:一般本地资源使用相对路径即可

        width:设置图片的宽度,如果时单独设置,则再对图片保证不失真的情况下自动缩小或者放大

          单位可以时px也可以时百分比

        height:设置图片的宽度,如果时单独设置,则再对图片保证不失真的情况下自动缩小或者放大

          单位可以时px也可以时百分比

        title:图片标题,鼠标放在图片上面的时候会显示

        alt:图片加载失败后的提示语

        注意:图片是不会自动换行的(行内元素)

    注意:

      相对路径:从当前文件出发查找另一个文件所经过的路径

      绝对路径:从跟盘符出发所查找文件的路径

    第六章

    超链接标签:

      a:

        href:要跳转的网页资源路径

          本地资源:相对路径

          网络资源:网络资源(网页)的URL

        target:指明要跳转的网页资源的显示位置

          _self     在当前页中刷新显示

          _blank  在新的标签页中显示

          _top      在顶层页中显示

          _parent    在父级页面中显示

      注意:

        超链接标签中一定要声明访问方式,访问方式可以是文字也可以是图片

      锚点:

        作用:在一张网页中进行资源跳转

        使用:

          先使用超链接标签在指定的网页位置增加锚点,格式:

            <a name="#锚点名" >访问方式</a>

          使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的,格式:

            <a href="#锚点名" >访问方式</a>

    第七章

    表格标签:

      table:声明一个表格

        tr:声明一行,设置行高及行所有单元格的高度

          th:声明一个单元格,表头格,默认居中加黑显示

          td:声明一个单元格,默认居左原始数据

        注意:

          行高即改行所有单元格的宽度

          单元格的宽度即列宽

        属性:

          border:给表格添加边框

          width:设置表格的宽度

          height:设置表格的高度

          cellpadding:设置内容居边框的距离

          cellspacing:设置边框的大小

        特点:

          默认根据数据的多少进行表格的大小显示

      单元格合并:

        第一步:

          首先确保表格是一个规整的表格

        第二步:

          根据要合并的单元格,找到其所在的源码位置

        第三步:

          行合并:在要合并的单元格的第一个单元格上使用属性rowspan=:"要合并单元格的个数“,并删除其他要合并的单元格完成合并

          列合并:在要合并的单元格上使用属性colspan="要合并单元格的个数",并删除合并的其他单元格

    第八章:

    内嵌标签:

      iframe:

        src:要显示的网页资源路径

          可以是本地(相对路径)也可以是网络资源(URL)

          注意:

            默认当前页面打开及加载src指向的资源

        width:设置显示区域的宽度

        height:设置显示区域的高度

        name:设置内嵌区域的名字,结合超链接标签的target属性使用

      作用:

        在当前网页中加载其他网页的资源,达到不同网页资源之间不互相干扰,并能在同一个页面中展现给用户的目的

    框架标签:

      注意:

        第一步一定要删除boby标签

      frameset:

        属性:

          rows:按照行进行切分页面

          cols:按照列进行切分页面

        子标签:

          frame:进行切分区域的占位,一个frame可以单独加载网页资源

            src:资源路径(本地或者网络)

            name:区域名,结合超链接使用

    第九章:

    表单标签:

      form:

        作用:收集并提交用户数据给指定服务器

        属性:

          action:收集的数据提交地址也就是URL

          method:收集的数据的提交方式

            get:适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全

            post:适合大量数据,安全,隐式提交

          注意1:

            form标签会收集其标签内部的数据

          注意2:

            表单数据提交,要提交的表单项必须拥有name属性值,否则不会提交。

            提交的表单项数据为键值对,键位name属性的值,值位用户书写的数据。

          注意3:

            form表单标签的数据提交需要依赖于submit提交按钮。

    表单域标签:

      作用:给用户提供可以进行数据书写或者选择的标签

      使用:

        文本框:

          input:

            type:

              text:收集少量的文本数据,用户可见

              password:收集用户密码数据

            name:数据提交的键,也会被js使用

            value:默认值

        单选框:

          imput:

            type:

              radio

            name:name属性相同的单选框之恶能选择一项数据

            value:要提交的数据

            checked:checked使用此属性的单选默认是选择状态

        多选框:

          input:

            type:

              checkbox

            name:一个多选组需要使用相同的name属性值

            value:要提交的数据

            checked:checked使用此属性的单选默认是选择状态

        单选下拉框: 

          select:

            name  数据提交的键名,必须声明

            子标签:

              option:一个option标签表示一个下拉选项

                value:要提交的数据

        文本域:

          textarea:声明一个可以书写大量文字的文本区域

            name:数据提交的键名,js和css也会使用

            rows:声明文本域的行数

            cols:声明文本域的列数

        普通按钮:

          input:

            type:

              hidden

            value:按钮的名字

        注意:表单数据提交提交的是表单域标签的value值

      在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式提交给action属性所指明的提交地址。

        

  • 相关阅读:
    与非
    抄卡组
    数据结构》关于差分约束的两三事(BZOJ2330)
    刷题向》图论》BZOJ1179 关于tarjan和SPFA的15秒(normal)
    图论算法》关于tarjan算法两三事
    图论算法》关于SPFA和Dijkstra算法的两三事
    刷题向》DP》值得一做》关于对DP问题的充分考虑(normal)
    数据结构》关于线段树两三事(新手向)(工具向)
    图论算法》关于匈牙利算法的两三事
    关于羊和车的问题
  • 原文地址:https://www.cnblogs.com/buhuiflydepig/p/11461708.html
Copyright © 2020-2023  润新知