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属性所指明的提交地址。