HTML常用元素

2021-10-13 23:58:31 阅读：135 来源： 互联网

HTML 常用元素

html

是HTML的根元素，一般会包含一个head然后跟一个body标签，建议设置lang属性，有助于其它工具理解文档主要是什么语言。

  示例
  <!DOCTYPE html>
  <html>
    <head>
      <title>Hello World</title>
    </head>
    <body>
    </body>
  </html>

head

人如其名就是一个头部标签，用它来包裹其它提供元数据的元素，head中的元素都不会显示在页面上。它一般会包含title,meta,base这三个元素，如果要加载样式和脚本也可以在里面写link,style和script标签。除非有更高级的协议提供标题，否则head中必须要有title标签提供标题。比如邮件中用了html编写内容，可以没有title标签。

  <!DOCTYPE HTML>
  <html LANG="EN">
    <head>
      <meta charset="UTF-8">
      <base href="https://www.example.com/">
      <title>An application with a long head</title>
      <link rel="STYLESHEET" href="default.css">
      <link rel="STYLESHEET ALTERNATE" href="big.css" title="Big Text">
      <script src="support.js"></SCRIPT>
      <meta name="APPLICATION-NAME" content="Long headed application">
    </head>
    <body>
    </body>
  </html>

title

会被其它上下文使用，例如在用户的历史、书签，或搜索结果中.一个html文档中只能有一个title元素，且要写在head元素里。

base

必填属性href用于规定页面中所有相对链接的基准URL，可选属性target用于指定在何处打开页面中的链接。一个html文档中只能有一个base元素，且要写在head元素里。

target="_self"：在本來的视窗打开链接
target="_blank"：在新的视窗打开链接
target="_parent"：在父视窗打开链接
target="_top"：以 top 模式打开链接

  <!DOCTYPE html>
  <html lang="en">
    <head>
        <title>This is an example for the base element</title>
        <base href="https://www.example.com/news/index.html" target="_blank">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
  </html>
  链接地址是 "https://www.example.com/news/archives.html"。

link

一般用来设置网站地址栏显示的logo、加载外部样式等等。这个标签学问很大，要阅读详细文档才能搞清楚
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

  <link href="/media/examples/link-element-example.css" rel="stylesheet">
  <link rel="icon" href="favicon.ico">

script元素用来嵌入脚本代码或者嵌入数据。常用的就是嵌入JavaScript代码。

  /** 直接写JS脚本 **/
  <script>alert('Hello World!');</script>

  /** 引入外部JS文件 **/
  <script src="javascript.js"></script>

script不设置type属性时默认当做javascript代码，script支持的type只有text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果type设置的不是上述支持的类型，则该元素所包含的内容会被当作数据块而不会被浏览器执行。利用这一点可以嵌入其它数据或代码，然后获取元素的innerHTML就拿到代码或数据了。

  <script type="x-shader/x-vertex" id="vertex-shader">
    #version 100
    void main() {
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      gl_PointSize = 64.0;
    }
  </script>
  <script type="text/json" id="json">
    {
      "a" : "1",
      "b" : "2"
    }
  </script>
  <script>
    var source = document.querySelector("#vertex-shader").innerHTML;
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader,source);
    gl.compileShader(vertexShader);

    var jsonData = JSON.parse(document.querySelector("#json").innerHTML);
  </script>

style

用来插入文档的显示样式。它只能放在head元素中，这个标签将在css章节中详细讲解。

body

body元素用来展示html文档的内容，一个文档中有且仅能有一个body元素。也就是说我们要展示给用户看到的内容都要放到body元素中

  <html>
    <head>
      <title>Document title</title>
    </head>
    <body>
      <p>This is a paragraph</p>
    </body>
  </html>

其它元素

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

标签：常用,title,元素,head,HTML,文档,gl
来源： https://blog.csdn.net/m0_54932824/article/details/120755038

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9