HTML标签---学习笔记

时间:2019-09-04
本文章向大家介绍HTML标签---学习笔记,主要包括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" />   
    head>
    <body>
        hello world!
    body>
html>

?

第三章

标题标签:

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

    属性:

      align:center、left、right

水平线标签:

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

    属性:

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

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

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

段落标签:

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

    特点:段间距比较大

换行符:

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

空格符:

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

权重标签:

  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标签可以跳转指定的锚点,达到网页内部资源跳转的目的,格式:

        访问方式

?

第七章

表格标签:

  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:区域名,结合超链接使用

?

第九章:

$flag 上一页 下一页