html小笔记

准备考试之余,看点html吧吧吧。。。这里写点小笔记。。。唤起沉睡中的记忆。。。

唤醒记忆三部曲——html(Hypertext Markup Language)

  • <html>标签:这个标签是一张网页的最外层的标签,包含一个网页的所有内容。
      <html>
       ...
      </html>
    
  • <body>标签:页面中所有可见元素都应该包含在其中。

      <html>
          <body>
           ...
          </body>
      </html>
    
  • <head>标签:存放一些关键字等给浏览器和搜索引擎所用,不显示出来,一个页面只能有一个head标签。

      <html>
          <head>
              <meta name="keywords" content="..">
          </head>
      </html>
    
  • <title>标签:用于指定页面的标题,不显示在页面里,显示在浏览器上面的页面一行里。

      <html>
          <head>
              <title>..标题名..</title>
          </head>
      </html>
    
  • 标题标签:有<h1>,<h2>,<h3>,…<h6>六个标题,可以渲染,也有<h7>,<h8>,等,不过不渲染了。没有嵌套关系和并列关系,只是代表优先级不一样。

      <html>
          <body>
              <h1>..标题..</h1>
              <h2>..标题..</h2>
              ...
         </body>
      </html>
    
  • <p>标签:段落标签,一对p标签可以分一个段落,你在html中键入一个换行键是不会换行的,需要用段落标签。

      <html>
          <body>
              ...文字..
              <p>
              ....接上的文字...
              </p>
              ....
          </body>
      </html>
    
  • <div>标签:division(区域)容纳其他的元素,很常用,常见,简单,区分容纳,可嵌套,可以看成目录这各功能。

      <html>
           <body>
              <div>
               ..
              </div>
              <div>
               ..
              </div>
               ..
          </body>
      </html>
    
  • <a>标签:用于指定网页中的链接,锚链接(anchor)。其中,target=self表示在当前页打开网址,target=blank表示新打开一网页显示链接网址。

      <html>
          <body>
              <a href="http:www...." target="self">替换的文字</a>
          </body>
      </html>
    
  • <img>标签:图片标签(image)指定图片。没有结束标签</img>,支持jpg,png,svg,gif等。

       <html>
          <body>
              <img src="要插入图片的本地地址或网络地址" alt="图片加载失败显示的内容">
          </body>
      </html>
    
  • 表格类标签:<table>指创建表格,<tr>指行,<td>指单元格,<th>指定表格的属性。<thead>存放表格属性名,<tbody>存放表格中的值,这里的<thead>指的是存放表格属性的地方,表格属性指列如姓名,年龄这些。<tbody>指的是存放这些属性的值得地方,列如lifan,13这些。建议建表最好用css来完成。

      <html>
          <body>
              <table border="1">
                  <thead>
                      <tr>
                          <th>
                             name
                          </th>
                          <th>
                             age
                          </th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td>
                             lifan
                          </td>
                          <td>
                             13
                          </td>
                      </tr>
                  </tbody>
              </table>
          </body>
      </html>
    
  • <header>标签,<footer>标签:指标题相关的内容,概括整个页面的内容,footer标签,指指定页脚的相关内容。例如联系方式,自我介绍,联系地址等。他们也是一个容器,和div的区别就在于里面的内容是有一定的语义的,方便搜索引擎等的收集,而div里可以放任何东西,且没有语义。

      <html>
         <body>
             <header>
                <h1>..hello world..</h1>
                <small>...
             </header>
              ....正文....
             <footer>
                 ...contact...privacy..
             </footer>
         </body>
      </html>
    
  • <link>,<script>标签:既可以写在<head>里也可以写在<body>里。不能直接在浏览器中显示。<link>标签加载外部资源,列如样式表等,script标签主要用于加载脚本,列如javascript。

      <html>
          <head>
              ...
              <link href="..xx.css">
              ...
          </head>
          <body>
              ...
              <script src="..yy.js">
              ...
          </body>
      </html>
    
  • <button>标签:按钮标签,是一个触发机制,一般需要和其他东西共同使用,列如和表单使用和javascript使用。

      <html>
          <body>
              ...
          <buttom>signup</button>
              ...
          </body>
      </html>
    
  • <abbr>标签:缩写(abbrevitation),用于显示缩写的内容的所有内容。

      <html>
          <body>
              <abbr tittle="hyper text markup language">html</abbr>is interesting
          </body>
      </html>
    
  • <code>,<pre>标签:用于包含代码,显示代码。<code>标签是行内元素,一般都是镶嵌在所在行里的,适合小段代码;<pre>标签适合用于大段代码。还可以设置代码的属性等。

      <html>
          <head>
              <style media="..">
                  code{
                      background: rgba(0,0,0,0);
                      border-radius: 11px;
                  }
              </style>
          </head>                
          <body>
              .....<code>a==2</code>
              ...
              <pre>
                  ...
                  ...
              </pre>
          </body>
      </html>
    
  • <input>标签:用于接收用户输入。<input>标签类型比较多:有:

       <input type="text">      默认值    
       <input type="password">  密码输入
       <input type="radio">     单选框输入
       <inout type="checkbox">  多选框
       <input type="file">      选择文件
       <input type="reset">     重置表单
      ...
    

    嗯。。。暂时先整理在这里,有空在网上找点小例子,有补充的再补充。。。