HTML元素其路径1

用户1869955981204
153 阅读3分钟

第一个网页

Emmet插件：自动生成 HTML 代码片段

注释

注释为代码阅读者提帮助，注释不参数运行。

在HTML中，使用如下格式书写：

<!-- 注释 -->

元素

元素 = 起始标记（begin tag） + 结束标记（end tsg）+ 元素内容 + 元素属性

元素属性： 局部属性 ，全局属性

<!-- 有些元素没有结束标记，这种元素叫做空元素 -->
<meta charset="UTF-8">

标准的文档结构

<!-- 文档声明，告诉浏览器，当前文档使用的是HTML5标准 -->
<!DOCTYPE html>  

<!-- 
    html：根元素，一个页面最多只能有一个，并且是其他元素的父元素或者祖先元素。
    lang，language，全局属性，表示该元素内部的文字使用的是哪一种自然语言书写而成的。 中国大陆：cmn-hans
-->
<html lang="en">
    <!-- header：文档头，文档头内部的内容，不会显示在页面上。 -->
    <header>
        <!-- 
            meta：文档的元数据，附加信息
            charset：指定网页内容编码。
        -->
        <meta charset="UTF-8">
        <!-- 适配移动端 将网页的视口宽度设置为设备宽度 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 网页标题 -->
        <title>Document</title>
    </header>
    
    <!-- body：文档体，页面上要参与显示的元素，都应该放置在文档体中。 -->
    <body>
    
    </body>
</html>

语义化

什么是语义化

  1. 每一个html元素都有具体的含义

    a 元素:表示是一个超链接。

    h1 元素：表示的是标题。

    p 元素：表示的是段落。

  2. 所有元素与展示效果无关

    元素展示在页面中的效果，应该由css决定。

重要：选择什么元素，取决于内容的含义，而不是显示出的效果。

为什么需要语义化

  1. 为了搜索引擎优化（SEO）

    搜索引擎：百度，搜搜，Bing，Google。

    搜索引擎每隔一段时间就会从互联网中，抓取页面源代码

  2. 为了让浏览器理解网页

文本元素

html5中支持的元素：查询 html5元素周期表。

h

标题：header

h1 ~ h6 元素的统称。

简便写法： h*6>{级标题} 。

p

段落，paragraphs

lorem 乱数假文，没有任何含义的文字。 p*6>lorem lorem 后面跟 1 意思是只生产一个文件

span

没有语义，只用于设置元素的样式。

某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）；

pre

预格式化文本元素。

空白折叠：在源代码中的连续空白字符（空格，换行，制表符），在页面显示时会被折叠为一个空格。

例外：在pre元素中的内容，不会进行空白折叠。 在pre元素中的内容，会按照源代码格式，显示在页面上。

该元素通常用于在页面上显示代码。 他的本质是添加了一个 css 属性。 whit-space = pre；

<pre>

    dsgsdgsd
    dsfdsfs

    sdfdsfds     fdsfsdfsd

    var i = 2;

    if(i){
        console.log(i);
    }

</pre>

HTML实体

实体字符，HTML Entity

实体字符，通常用于在页面中显示一些特殊符号。

  1. &单词;
  2. &#数字；

参考文档   developer.mozilla.org/zh-CN/docs/…

小于符号：&lt;

大于符号：&gt;

空格符号：&nbsp;

版权符号：&copy;

&符号：&amp;

a元素

超链接

href属性

hyper reference：通常表示跳转地址。

  1. 跳转地址

  2. 跳转某个锚点（将 a 元素的 href 属性设置为元素的id）

    当 a 元素的 href 属性设置为 # 的时候，默认回到顶部。

  3. 功能性链接

    点击后触发某个功能

    • 执行js代码： javascript：

    • 发送邮件： mailto：

      要求用户安装邮件发送软件。

    • 拨打电话：tel：

      需要在手机端触发，或者电脑上安装软件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- href属性 javascript：后面书写js代码 -->
    <a href="javascript:alret('hello')">点击我</a>

    <a href="mailto:123456789@qq.com">发送邮件</a>

    <a href="tel:13800138000">拨打电话</a>
</body>

</html>

target属性

表示跳转窗口位置：

traget取值：

  • _self:在当前页面窗口中打开。

  • _blank:在新窗口中打开。

avatar
文章
阅读
粉丝