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

          

      

原文地址:https://www.cnblogs.com/mxj961116/p/11068598.html