zoukankan      html  css  js  c++  java
  • HTML语言学习笔记(会更新)

    HTML语言学习笔记(会更新


    一个html文件是由一系列的元素和标签组成的。

    标签:

    1.<html></html>
    表示该文件为超文本标记语言(HTML)编写的。成对出现,位于文件的最前面和最后面。
    2.<head></head>&<body></body>
    表示文件头和文件主体,成对出现。
    (1)文件头是规定该文件标题和一些属性的,例如标题、编码方式、URL等,不出现在网页中,若为无需提供相关信息可省略。
    (2)文件主体,及在网页中显示的内容。
    3.<title></title>
    HTML文件的名称,在浏览器中显示在窗口中,一般嵌套在<head></head>中。
    4.<strong></strong>
    加粗
    5.<em></em>
    斜体
    6.<br /> & &nbsp;
    前者换行,相当于回车,后者空格。
    7.<p></p>
    段落
    8.<span></span>
    这是一个可以灵活运用的标签,例如如果对于文字进行处理,先用<span>目标</span>把目标括起来,再对其设置CSS(设置它的表现样式)。
    9.<q></q>&<blockquote></blockquote>
    引用标签,前者为较短文本的引用,后者是较长文本的引用,其核心在与它所表达的“引用”的意思。
    10.<hr />
    用于分隔的横线。
    11.<address><address>
    将联系地址信息在网页中展示出来,如公司的地址。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。默认字体为斜体,也可以通过 CSS样式来修改它的样式。
    12.<code></code>&<pre></pre>
    前者为显示一行编程代码,后者为多行变成代码的显示。不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。
    13.<ul></ul>/<ol></ol>&<li></li>
    ul-li是没有前后顺序的信息列表,ol-li有前后顺序的信息列表。
    14.<div></div>
    将一些独立的逻辑部分划分出来。逻辑部分是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,如<div  id="版块名称">…</div>
    15.<table></table>
    table标签中的几个重要的部分:table、tbody、tr、th、td
    (1)<table>…</table>:整个表格以<table>标记开始、</table>标记结束。
    (2)<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
    (3)<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
    (4)<td>…</td>:表格的一个单元格,一行中包含几对<td></td>,说明一行中就有几列。
    (5)<th>…</th>:表格的头部的一个单元格,表格表头。
    (6)表格中列的个数,取决于一行中数据单元格的个数。
    (7)摘要:<table summary="表格简介文本">。摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
    (8)<caption></caption>: 用以描述表格内容,标题的显示位置:表格上方。
    上述代码在浏览器中显示的默认的样式为:

    例子:

    <html>   
    <head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <title>认识table表标签</title>   
    </head>    
    <body>    
    <table>    
      <tbody>    
        <tr>    
          <th>班级</th>    
          <th>学生数</th>    
          <th>平均成绩</th>    
        </tr>    
        <tr>    
          <td>一班</td>    
          <td>30</td>    
          <td>89</td>    
        </tr>    
        <tr>    
          <td>二班</td>    
          <td>35</td>    
          <td>85</td>    
        </tr>    
    <tr>    
    <td>三班</td>    
    <td>32</td>    
    <td>80</td>    
    </tr>    
      </tbody>    
    </table>    
    </body>    
    </html>    
    

    效果如下图:

    16.<a></a>
    使用<a>标签可实现超链接。其语法为:

    <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
    

    即单击“链接显示文本”文字,网页链接到“http://目标网址”这个网页,鼠标滑过链接文字时会显示"鼠标滑过显示的文本">。
    P.S. <title>属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)。
    <a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。故而在<a>中加入target="_blank"来使得链接在新的网页打开。例如:<a href="目标网址" target="_blank">click here!</a>

  • 相关阅读:
    Spring Boot缓存实战 Redis 设置有效时间和自动刷新缓存
    快速排序
    JDK,JRE,JVM区别与联系
    RocketMQ
    IO、NIO、AIO 内部原理分析
    java设计模式-回调、事件监听器、观察者模式
    Spring源码相关
    java单例模式几种实现方式
    RabbitMQ学习笔记二:Java使用RabbitMQ
    RabbitMQ学习笔记一:本地Windows环境安装RabbitMQ Server
  • 原文地址:https://www.cnblogs.com/blackay03/p/6209036.html
Copyright © 2011-2022 走看看