HTML学习笔记

最新推荐文章于 2024-10-17 15:53:46 发布

yangfeitarena

最新推荐文章于 2024-10-17 15:53:46 发布

阅读量545

点赞数

分类专栏： HTML 文章标签： html input stylesheet border 浏览器搜索引擎

本文链接：https://blog.csdn.net/yangfeitarena/article/details/4006657

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

知识要经常捋,才不至于乱.

1.HTML文件：
1>.是纯文本格式,内容包括文本信息和文本标记
2>.后缀为".html"或".htm",两者完全等价
3>.大小写不敏感

2.标记:
1>.主体标记 <body></body>
     功能：主体显示
     属性:1>).bgcolor 背景颜色,如：bgcolor="#CCFFCC"
     2>).background 背景图片，如：background="images/bg.gif"
     3>).bgproperties="fixed" 使背景图片不随着滚动条的滚动而滚动
     4>).text 设置文档正文的文字颜色，如：text="#FF6666"

2>.换行标记 <br>
     功能：换行
     说明：如果有N个空格或者换行连在一起,则浏览器会当作只有一个处理

3>.分段标记 <p></p>
     两个段落之间会自动间隔一行

4>.正文标题标记
     <h1>1号正文标题文字</h1>
     <h2>2号正文标题文字</h2>
     <h3>3号正文标题文字</h3>
     <h4>4号正文标题文字</h4>
     <h5>5号正文标题文字</h5>
     <h6>6号正文标题文字</h6>
      属性：align 对齐方式，如：align="center"

5>.注释标记 

6>.水平分隔线标记 <hr>
      属性：1>).color 颜色，如：color="#00ff00"
            2>).size 字体，如：size="2"
            3>).width 占屏宽百分比或者是占多少个像素，如：width="50%";width="300"
            4>).align 对齐方式，如：align="center"

7>.头部标记<head></head>
说明：主要是供浏览器或者网络搜索引擎使用，不会显示在网页正文中

8>.窗口标题标记 <title></title>

9>.<link>标记
建立到外部文件(主要是CSS外部样式表)的链接
如：<link rel="stylesheet" href="mystyle.css" type="text/css">

10>.<style>标记
      设置网页的内部样式表
     如：<style type="text/css">
             body{background-color:white;color:red;}
         </style>

11>.<meta>标记
       设置当前页面的元数据信息,即当前页面的一些信息,也可以交给搜索引擎去搜索
      如：<meta name="description" content="HTML教程">
          <meta name="keywords" content="HTML教程,杨飞">
          <meta name="author" content="杨飞">
          <meta http-equiv="Content-Type" content="text/html;charset=GBK">
            
          <meta http-equiv="refresh" content="5;url=http://hi.csdn.net/yangfeitarena">

12>.粗体字标记 <b></b>
如：<b>粗体字</b>

13>.斜体字标记<i></i>
如：<i>斜体字</i>

14>.中划线标记<del></del>
如：<del>词当中划线表示删除</del>

15>.下划线标记<ins></ins>
如：<ins>词下划线表示插入/填充内容</ins>

16>.下标标记<sub></sub>
如：P<sub>1</sub>

17>.上标标记<sup></sup>
如：=2<sup>7</sup>

18>.预设文本标记<pre></pre>
功能：里面的内容将按照原样显示

19>.字体标记<font></font>
       属性：1>).face 字体类型，如：<font face="宋体">文字内容</font>
        2>).size 字体大小，如：<font size="2">文字内容</font>
        3>).color 文字颜色，如：<font color="#FF0000">文字内容</font>

20>.<img>标记
        功能：用于在HTML中插入图片
        属性：1>).alt 在不支持图片显示的浏览器中将显示本属性值(alternate text)，如：<img src="youyou.png" alt="我的图片 ">
         2>).width/height 设置图片的大小 ,如：<img src="my.png" width="50%" height="60%">
                                              <img src="my.png" width="200" height="300">

         3>).align 设置图片对齐方式，如：<img src="my.png" align="center">
         4>).border设置图片边框线条宽度 ,如：<img src="my.png" border="2">

21>.特殊符号：
      显示效果符号说明    实体名表示
                 空格         
       <         小于号      <
       >         大于号      >
       &         符号&       &
       "         双引号      "
                 乘号        ×
                 除号        ÷
                 版权符号    ©
                 注册商标    ®

22>.超链接标记<a></a>
        属性：1>).target 在指定的窗口或新窗口中显示链接页面，如：<a href="http://hi.csdn.net/yangfeitarena" target="_blank">杨飞的空间</a>
        2>).name 设置锚标记,实现超链接跳转到页面指定位置，如：<a name="p1">文本内容</a>
                                                              <a href="href.html#p1">跳转到指定页面锚p1指定的位置</a>
        3>).title 设置超链接的说明文字(鼠标悬停在超链接上时显示)，如<a href="youyou.png" title="点击可以看到我的照片">悠悠</a>
        补充：1>).链接到email地址，如：<a href="mailto:jiruan03_2yangfei@163.com">联系我</a>
         2>).图片作为超链接 ,如：<a href="http://hi.csdn.net/yangfeitarena"><img src="youyou.png"></a>

23>.有序列表标记<ol></ol>

           <ol type="a">
               <li>列表条目1</li>
               <li>列表条目2</li>
                 .......
           </ol>
            说明：type为可选属性,用于设置列表符号，允许取值:"1","a","A","i","I"

24>.无序列表标记<ul></ul>

            <ul type="disc">
               <li>列表条目1</li>
               <li>列表条目2</li>
                 ......
            </ul>
            说明：type为可选属性,用于设置列表符号，允许取值:"disc","circle","square"

25>.定义列表标记<dl></dl>
            <dl>
               <dt>列表条目1标题</dt><dd>列表条目1正文</dd>
               <dt>列表条目2标题</dt><dd>列表条目2正文</dd>
                 ......
            </dl>

26>.表格
          <table></table>一整张表格
          <tr></tr>表格中的一行
          <td></td>一行中的一列(一个单元格)
          <th></th>表头中的单元格
          <caption></caption>表格的标题

          属性：
             1>).width/height 指定表格或某一单元格的宽度/高度
             2>).border指定边框线条的宽度
             3>).bordercolor 指定边框线条的颜色
             4>).bgcolor指定表格或某一单元格的背景颜色
             5>).background指定表格或某一单元格的背景图片
             6>).align设置单元格对齐方式
             7>).cellspacing 设置单元格间距
             8>).cellpadding设置单元格内容与单元格边界之间的距离
             9>).colspan/rowspan实现跨列/跨行单元格
          如：<table border="1" width="250" height="80">
       
       <tr>
           <td>xxx</td>
           <td colspan="2">xxx</td>
       </tr>
       <tr>
           <td>xxx</td>
           <td>xxx</td>
           <td>xxx</td>
       </tr>
       <tr>
           <td>xxx</td>
           <td>xxx</td>
           <td>xxx</td>
       </tr>
    </table>
    <table border="1" width="250" height="80">
       
       <tr>
           <td>yyy</td>
           <td>yyy</td>
           <td>yyy</td>
       </tr>
       <tr>
           <td rowspan="2">yyy</td>
           <td>yyy</td>
           <td>yyy</td>
       </tr>
       <tr>
           <td>yyy</td>
           <td>yyy</td>
       </tr>
    </table>

27>.表单
        <form action="http://127.0.0.1:8087/testPro/login.jsp" method="post">
       用户名：<input type="text" name="username"><br>
       密码：<input type="password" name="password"><br>
       <input type="submit" value="提交">
       <input type="reset" value="重置">
   </form>
      表单中的组件:
          1>).单行文本框 <input type="text" name="username" value="杨飞">
          2>).密码输入框 <input type="password" name="password">
          3>).单选按钮   <input type="radio" name="gender" value="male" checked>男
                             
                         <input type="radio" name="gender" value="female">女
          4>).复选框     <input type="checkbox" name="fruit" value="apple">苹果<br>
           <input type="checkbox" name="fruit" value="grap">葡萄<br>
           <input type="checkbox" name="fruit" value="orange">橘子<br>
          5>).下拉表框   <select name="fruit" size="3" multiple>
               <option value="apple">苹果
               <option value="grap">葡萄
               <option value="orange">橘子
           </select><br>
          6>).多行文本输入框
                         <textarea name="info" rows="5" cols="60">请留言：</textarea><br>
          7>).提交按钮   <input type="submit" value="提交">
          8>).重置按钮   <input type="reset" value="重置">
          9>).图片提交按钮<input type="image" src="done.gif" alt="提交" name="submit2"><br>
          10>).隐藏域    <input type="hidden" name="role" value="guest"><br>
          11>).文件组件 <form action="k.jsp" enctype="multipart/form-data" method="post">
                    <input type="file" name="f1">
                    ...
                 </form>
                           
       表单提交方式:
           method="post" 慢，地址栏隐藏表单参数
           method="get" 快，地址栏不隐藏表单参数,默认是get方式的

28>.页面框架
      a.html:
            ......
            <body bgcolor="red">
              内容列表：<br>
              <a href="a.html" target="frame_c">条目A</a><br>
              <a href="b.html" target="frame_b">条目B</a><br>
              <a href="c.html" target="frame_c">条目C</a><br>
            </body>
            ......
      test.html:
            ......
           </head>
              <frameset cols="100,*">
               <frame name="frame_a" src="a.html">
               <frameset rows="25%,*">
                    <frame src="b.html" name="frame_c">
                    <frame src="c.html" name="frame_b">
                   </frameset>
              </frameset>
           <body>
            ......

29>.<applet>标记用于嵌入Java Applet

30>.<embed>标记
      功能:用于在页面中嵌入多媒体文件，但用户计算机上需事先安装好相应的处理程序.
       如：<embed src="弯弯的月亮.mp3"
                  autostart="true"
                  loop="true"
                  hidden="false"
                  controls="CONSOLE"
                  width="200"
                  height="45"
            >