• HTML学习笔记


    1.HTML概念

      超文本标记语言

    2.互联网三大基石

      URL:统一资源定位符(唯一的定位一个网络资源)

      HTTP:超文本传输协议(规范浏览器与服务器之间数据交互格式)

      HTML:超文本标记语言(有效的组织数据在浏览器的显示)

    <html>
        <head>
            <!--head标签中主要配置浏览器的配置信息-->
            <title>HTML学习</title><!--网页标题标签:告诉浏览器用什么标题显示网页-->
            <meta charset="utf-8"/><!--网页解析编码格式配置(HTML5):告诉浏览器使用指定的编码格式解析文档-->
            <meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--HTML4:文档配置格式设置-->
        </head>
        <body>
            this is my first html
        </body>
    </html>

    3.网页标签

      网页标题标签

     <title>HTML学习</title><!--网页标题标签:告诉浏览器用什么标题显示网页-->

      编码格式标签

    <meta charset="utf-8"/><!--网页解析编码格式配置(HTML5):告诉浏览器使用指定的编码格式解析文档-->
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--HTML4:文档配置格式设置-->

      网页搜索优化标签

    <meta name="keywords" content="111,222,333"/><!--网页关键字-->
    <meta name="description" content="本网站。。。"/><!--网页描述-->
    <meta name="author" content="ma"/><!--网页作者-->

      网页指定跳转标签

    <meta http-equiv="refresh" content="5;url=http://www.baidu.com"/><!--网页自动跳转-->

      其他标签

        例如:css引入标签和js引入标签

    4.HTML的body标签

      (1)标题标签

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

          属性:

            align: center left right调整显示位置

      (2)水平线标签

        <hr>:会在页面中显示一条水平线,默认居中显示

          属性:

            width="宽度" 设置水平线的宽度

            size="高度" 设置水平线的高度

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

      (3)段落标签

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

        特点:

          段间距比较大

      (4)换行符

        <br>:告诉浏览器在此位置换行

      (5)空格符

        &nbsp(1字节):告诉浏览器在此位置加入空格

      (6)权重标签

        <b>:会将内容加黑显示

        <i>:会将内容斜体显示

        <u>:会将内容添加下划线

        <del>:增加中划线

        以上标签不会自动换行,可以嵌套使用

      (7)列表

        有序列表

          <ul>

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

            特点:

              默认数据前有一个黑圆圈

        无序列表

          <ol>

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

            特点:

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

            属性:

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

        自定义列表

          <dl>

            <dt>:数据的标题

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

    6.HTML的图片标签

      img

        src:图片路径

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

          网络资源路径:图片资源的URL地址

        设置图片的宽度,如果是单独设置,则在图片保证不失真的情况下自动缩小或放大

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

        设置图片的高度,如果是单独设置,则在图片保证不失真的情况下自动缩小或放大

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

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

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

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

      注意:

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

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

    7.HTML的超链接标签

      (1)<a>标签:

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

            本地资源:相对路径

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

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

             _self:在当前页中刷新显示

             _blank:在新的标签页中显示

             _top:在顶层页面中显示

             _parent:在父级页面中显示

          注意:

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

      (2)锚点

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

          使用:

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

              <a name="锚点名"></a>

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

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

    8.HTML的表格标签

      <table>:声明一个表格

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

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

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

          注意:

            行高即该行所有单元格的高度

            单元格的宽度即列宽

      属性:

        border:给表格添加边框

        设置表格的宽度

        height:设置表格的高度

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

        cellspacing:设置边框的大小

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

      单元格的合并:

        第一步:

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

        第二部:

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

        第三部:

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

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

    9.HTML的内嵌和框架标签

      内嵌标签:

        <iframe>

          src:要显示的网页资源路径,可以是本地(相对路径)也可以是网络资源(URL)

            注意:

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

          设置显示区域的宽度

          height:设置显示区域的高度

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

        作用:

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

      框架标签:

        <frameset>

          rows:按照行进行切分

          cols:按照列进行切分

          子标签:

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

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

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

        注意:一定要删除body标签

    <html>
        <head>
            <title>框架标签学习<title>
            <meta charset="UTF-8">
        </head>
        <frameset row="10%,*,10%">
            <frame src="" />
            <frameset col="50%,50%">
                 <frame src="" />
                 <frame src="" />
            </frameset>
            <frame src="" />
        </frameset>
    </html>    

    10.HTML的表单

       <form>表单标签

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

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

        属性:

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

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

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

            post:适合大量数据,安全

          注意1:

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

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

          注意2:form标签会收集其标签内部的数据

      <form>表单域标签

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

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

        使用:

          文本框:

            input

              type:

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

                passwd:收集用户密码数据

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

              value:默认值

          单选框:

            input:

              type:

                radio

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

              value:要提交的数据

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

          多选框:

            input:

              type:

                checkbox

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

              value:要提交的数据

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

          下拉框:

            select

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

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

                value:要提交的数据

          文本域:

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

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

            rows:声明文本域的行数

            cols:声明文本域的列数

          普通按钮:

            input:

              type:

                button

              value

          隐藏标签:

            input:

              type:

                hidden

            name

            value

              

          

  • 相关阅读:
    centos7配置静态IP地址
    Linux和Windows的区别
    Linux就该这么学——文件的特殊权限
    Linux就该这么学——文件权限与归属
    Linux就该这么学——用户身份与能力
    Linux就该这么学——计划任务服务程序
    Linux就该这么学——流程控制语句
    Linux就该这么学——编写SHELL脚本
    Linux就该这么学——初识vim编辑器
    Linux就该这么学——重要的环境变量
  • 原文地址:https://www.cnblogs.com/mxj961116/p/11068598.html
Copyright © 2020-2023  润新知