zoukankan      html  css  js  c++  java
  • html学习笔记

    Html的学习

                                                                                                                                    -------关于我为啥要学html:

             web方面很多东西都和html有一定的关系,在杂七杂八看了一堆东西之后,觉得还是要去打好基础,所以就决定去学习html,为以后的各种骚操作打基础

    html代码检查网站https://validator.w3.org

    在线学习网站http://www.w3school.com.cn

    网页模板:

          每个网页都包括html,head , title, meta和body元素

    <!DOCTYPE html>

    <html lang=”en”>                     lang用于指定文档书面语言的属性

    <head>                                     页头

    <title>文件的标题</title>

    <meta charset=”utf-8”>            meta显示网站特征,比如字符编码等

    </head>

    <body>                                     主体部分

    文件的主体

    </body>

    </html>

    2.1标题元素:

        标题分为h1到h6六级,<h1>最大,<h6>最小。这个标题是放在body内的,用于所写文章的标题。

    2.2段落:

        <p>和</p>之间的文本形成段落

           <br>表示换行(丢在哪都可以)例:<p>这个:<br>是实验</p>

           <hr>表示水平标尺(其实就是画一条长直线,一般不用)例:<p></p><hr>

           <blockquote>表示块引用元素(其实就是对文本进行缩进)例:<p>你好:</p><blockquote>我是<blockquote>

           短语元素指定容器标记之间的文本的上下文与含义(类似于word的加粗,加下划线等功能)详细操作可以百度

           有序列表和无序列表和描述列表:

    1. 有序列表(可以对列表的东西进行排序,但是必须用<ol>,否则就不行)

    <ol>

    <li>BLUE</li>

    <li>red</li>

    <li>WHITE</li>

                                       </ol>

    1. 无序列表(不对列表的元素进行排序,但是前面可以有个小圆点)

    用法和有序列表相同,但是无序列表的开头是<ul>

    1. 描述列表

    描述列表以<dl>标记开始,以</dl>结束;每个要描述的语句以<dt>开始

    以</dt>结束;每项描述的内容以<dd>标记开始,</dd>结束

           例子:

    <body>

    <h1>Heading level 1</h1>

    <dl>

           <dt>TCP</dt>

           <dd>TCP的内容</dd>

           <dt>IP</dt>

           <dd>IP的内容</dd>

    </dl>

    </body>

           关于特殊字符

                  可以参考这个网站http://www.w3school.com.cn/html/html_entities.asp

    2.11结构元素:

        除了常规性的div元素,html5还引入了许多语义上的结构元素来配置网页区域.

                 

    分为

    1. Div元素

    Div元素在网页中创建一个常规结构区域,块元素以<div>开始,以</div>结束

    1. Header元素

    Header元素的作用是包含网页文档或文档区域的标题,以<header>开始,以</header>结束.header通常包含一个或多个标题元素(<h1>到<h6>)

    1. Nav元素

    作用是建立一个导航链接区域。块显示元素,以<nav>开始,以</nav>结束

    1. Main元素

    作用是包含网页文档的主要内容。每个网页只因有一个main,以<main>开始,以</main>结束

    1. Footer元素

    作用是为网页或网页区域创建页脚,以<footer>开始,以</footer>结束

    例子:

    <!DOCTYPE  html>

    <html lang="en">

    <head>

        <title>Trillium Media Design</title>

        <meta charset="utf-8">

    </head>

    <body>

    <header>

      <h1>Heading level 1</h1>

    </header>

    <nav>     编码nav元素来包含主导航区域的文本

      <b>Home  &nbsp; Services &nbsp; Contact</b>            b表示加粗

    </nav>

    <main>

      <h2>New Media and Web Design</h2>

      <p>Trillium Media Design will bring your company&rsquo;s Web presence to the next level. We offer a comprehensive range of services.</p>

      <h2>Meeting Your Business Needs</h2>

      <p>123456789</p>

     <div>

           <strong>Casita Sedona Bed &amp; Breakfast</strong><br>

           612 Tortuga Lane<br>

           Sedona, AZ 86336<br>

      </div>

    </main>

    <footer>

       <small><i>456789</i></small>         i表示斜体

    </footer>

    </body>

    </html>

    2.13锚元素:

           锚元素的作用是定义超链接,它指向你想显示的一个网页或者文件。锚元素以<a>标记开始,以</a>j结束。两个标记之间是可以点击的链接文本或者图片。用href属性配置链接应用,即要访问(链接到)的文件的名称和位置。

           例子:<a href=” https://www.baidu.com/”>baidu</a>(然而用www.baidu.com就不行)

                  Href=”绝对链接”(绝对链接:协议名称http://和域名

           但是如果要链接到自己网站内部的网页时,可以使用相对链接(这种链接的href值不以http://开头,也不含域名,只需要包含想要显示的网页文件名(或者文件夹和文件名的组合))

           例如:为了从主页index.html链接到同一文件夹下的contact.html,就可以直接<a href=”contact.html”>Contact</a>

          

    新建文件夹保存多个网页

           访问的方法

           <nav>

      <b>

         <a href="index.html">Home</a> &nbsp;

         <a href="services.html">Services</a> &nbsp;

            <a href="contact.html">Contact</a>

      </b>

    </nav>

    电子·邮件链接:

        锚标记也可以用于创建电子邮件链接,和外部链接相似但是有两点不同:

    1. 它使用mailto:,而不是http://
    2. 它打开浏览器配置的默认邮件程序,将E-mail地址作为收件人

    例如,要创建指向help@webdevbasics.net的电子邮件链接,要按如下方法

            <a href=”mailto:help@webdevbasics.net”>help@webdevbasics.net</a>

    <li>E-mail:

    <a href="mailto:contact@trilliummediadesign.com">contact@trilliummediadesign.com</a>

    </li>

    HTML 参考手册- (HTML5 标准)

    关于标签列表

    1.按字母顺序排序 https://www.runoob.com/tags/html-reference.html

    2.按功能顺序排序https://www.runoob.com/tags/ref-byfunc.html

    HTML的基础学习到此结束

  • 相关阅读:
    Echart 动态生成series数据
    转换Excel格式
    .NET接收邮件下载邮件附件——openpop.net
    百度Echart 地图
    mobiscroll 日期问题
    jQuery自动完成插件flexselect
    HTML5 video 连续播放视频
    team foundation server 工具的使用
    实现主成分分析与白化
    白化(预处理步骤)【转】
  • 原文地址:https://www.cnblogs.com/printwangzhe/p/10846395.html
Copyright © 2011-2022 走看看