zoukankan      html  css  js  c++  java

  • HTML基础

    文档类型定义

    • 文档类型定义（Document Type Definition,DTD）
    <!DOCTYPE html>

    网页模板

    <!DOCTYPE html>
<html lang="en">
<head>
<title>网页标题放在这里</title>
<meta charset="utf-8">
</head>
<body>
...主体文本和更多是HTML标签放在这里
</body>
</html>

    head,title,meta和body元素

    • 页头区域
      • 包括网页标题，用于描述meta标记及对脚本和样式的引用
      • 包含在head 元素中，以 <head>标记开始，以</head> 标记结束
      • 至少包含一个title 元素和一个meta 元素
    • title元素
      • <title>和</title>之间文本是网页的标题，收藏和打印网页会显示标题
      • 搜索引擎会根据标题文本判断关键字相关性
    • meta元素
      • 描述网页特征。如字符编码
      • meta标记独立使用
        <meta charset="utf-8">
    • 主体区域
      • 配置网页内容
      • 以<body> 开始，</body>结束

    第一个网页

    <!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>

    标题元素

    • 标题(heading)元素从h1到h6字号逐渐减少
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Heading Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

    image

    段落元素

    • 段落元素组织句子或文本。<p>和</p>之间的文本显示成段落
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Heading Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<P>
This is a sampleparagraph.Heading tags can help to make your pages more accessible and usable.It is good coding practice to use heading tags to outline the structure of your web page content.
</P>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

    image

    换行元素

    • 换行元素<br>使浏览器跳到下一行显示下一个元素或文本
    • 换行标记单独使用，称void元素
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Heading Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<P>
This is a sampleparagraph.<br>Heading tags can help to make your pages more accessible and usable.It is good coding practice to use heading tags to outline the structure of your web page content.
</P>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

    image

    块引用元素

    • <blockquote>和</blockquote>之间为引文块内容,左右两边都缩进
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Blockquote Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>The Power of the Web</h1>
<p>According to Tim Berners-Lee,the inventor of tje World Web,at http://www.w3.org/WAI/:</p>
<blockquote>
The power of the Web is in its universality.Access by everyone regardless of disability is an essential aspect.
</blockquote>
</body>
</html>

    image

    短语原始元素

    元素 例子 用法
    <abbr> WIPO 标识文本是缩写。配置title属性
    <b> 加粗文本 样式采用加粗字体
    <cite> 引用文本 标识文本是引用或参考，通常倾斜显示
    <code> 代码文本 通常使用等宽字体
    <dfn> 定义文本 标识文本通常是词汇或专业术语定义，倾斜显示
    <em> 强调文本 使文本强调或突出，通常倾斜显示
    <i> 倾斜文本 样式采用倾斜字体
    <kbd> 输入文本 标识用户输入的文本，等宽字体显示
    <mark> 记号文本 文本高亮显示
    <samp> sample文本 标识是程序的示例输出，等宽字体显示
    <small> 小文本 用消字号显示的免责声明等
    <strong> 强调文本 使文本强调或突出，加粗显示
    <sub> 下标文本 在基线以下用效稳步显示的下标
    <sup> 上标文本 在基线以上用效稳步显示的上标
    <var> 变量文本 标识并显示变量或程序输出，倾斜显示
    • 所有短语元素都是容器标记，有开始结束标记
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Blockquote Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>The Power of the Web</h1>
<p>According to Tim Berners-Lee,the inventor of tje World Web,at http://www.w3.org/WAI/:</p>
<blockquote>
The power of the Web is in its universality.<em>Access by everyone </em>regardless of disability is an essential aspect.
</blockquote>
</body>
</html>

    image

    有序列表

    • 以<ol>标记开始，</ol>标记结束
    • 每个列表以<li>开始，</li>标记结束
    <!DOCTYPE html>
<html lang="utf-8">
    <title>有序列表</title>
    <body>
        <h1>My Favorite Colors</h1>
        <ol>
            <li>Blue</li>
            <li>Teal</li>
            <li>Red</li>
        </ol>
    </body>
</html>

    image

    type属性，start属性和reversed属性

    值 序号
    1 数字（默认）
    A 大写字母
    a 小写字母
    I 罗马数字
    i 小罗马数字
    • type属性改变序号类型。如：<ol type="A">创建按大写字母排序的有序列表。
    • start属性指定序号起始值
    • reversed属性（reversed="reversed"）可指定降序排序

    无序列表

    • 以<ul>标记开始,</ul>标记结束
    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Heading and List</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>My Favorite Colors</h1>
        <ul>
            <li>Blue</li>
            <li>Teal</li>
            <li>Red</li>
        </ul>
    </body>
</html>

    image

    描述列表

    • 描述列表用于组织术语及其定义
    • 一般用于组织常见问题（FAQ）及其答案
    • 描述列表以<dl>标记开始，</dl>标记结束。描述术语以<dt>标记开始，</dt>标记结束。描述内容以<dd>开始，</dd>结束。
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Description List</title>
<meta charset="utf-8">
</head>
<body>
    <h1> Sample Description List</h1>
    <dl>
        <dt>TCP</dt>
        <dd>Transmission Control Protocol is a method (protocool) used along with the Internet Protocol (IP) to send data in the form of message 
            units, called packets,between computers over the Internet.</dd>
        <dt>IP</dt>
        <dd>About IP Description.</dd>
        <dt>FTP</dt>
        <dd>About FTP Description.</dd>
        <dt>HTTP</dt>
        <dd>About HTTP Description.</dd>
    </dl>
</body>
</html>

    image

    特殊字符

    字符 实体名称 代码
    " 引号 &quot;
    ' 撇号 &#39;
    © 版权符 &copy;
    & &符号 &amp;
    空格 不间断空格 &nbsp;
    —— 长破折号 &mdash;
    | 竖线 &#124; 
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Web Design Steps</title>
<meta charset="utf-8">
</head>
<body>
    <h1> Web Design Steps</h1>
    <ul>
        <li><strong>Determine the Intended Audience</strong>
        <br>The colors,images,fonts,and layout should be tailored to 
        the <em>preference of your audience.</em> The type od site content 
        (reading level,amount of animation,etc.) should be approprite for 
        your chosen audience.</li>
    </ul>
    <ul>
        <li><strong>Determins the Goals of the Site</strong>
        <br>Some common goals of web sites are:to be informative,to create a personal home page, to establish a corporate web presence,and to do business in e-commerce.</li>
    </ul>
    <p><small>Copyright &copy; 2020 Your name. All Rights Reserved.</small></p>
</body>
</html>

    image

    结构元素

    div元素

    • div元素适合定义包含其他块显示元素（标题、段落、无序列表以及其他div元素）
    • 以<div>开始，</div>结束

    header元素

    • 作用包含网页文档或文档区域（如section和article）标题
    • 以<header>开始，</header>结束。
    • 作用是建立一个导航链接区域。
    • 以<nav>开始，</nav>结束

    main元素

    • 作用包含网页文档的主要内容，每个网页只应有一个main元素
    • 以<main>开始，<、main>结束

    footer元素

    • 作用是为网页或网页区域创建页脚
    • 以<footer>开始，</footer>结束
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
</head>
<body>
<header>
    <h1>Trillium Media Design</h1>
</header>
<nav>
    <b>Home &nbsp; Services &nbsp; Contact</b>
</nav>
<main>
    <h2>New Media and Web Design</h2>
    <p>Trillium Media Design will bring your company's  Web presence to the next level.We offer a comprehensive rangs of services.
    </p>
    <h2>Metting Your Business Needs</h2>
    <p>Our expert designers are creative and eager to work with you.</p>
</main>
<footer>
    <small><i>Copyright &copy; 2020 Your Name Here</i></small>
</footer>
</body>
</html>

    image

    <!DOCTYPE html>
<html lang="en">
<head>
<title>Casita Sedona</title>
<meta charset="utf-8">
</head>
<body>
<header>
    <h1>Cas ita Sedona Bed &amp; Breakfast</h1>
</header>
<nav>
    <b>Home &nbsp; Rooms &nbsp; Events &nbsp; Contact</b>
</nav>
<main>
    <h2>Stay in the Heart of Sedona</h2>
    <p>At Casita Sedona Bed &amp; Breakfast you'll be close to art galleries,shops,restaurants,
        hiking trails,and tours.Ride the free trolley to shops and galleries.</p>
    <h3>Luxurious Rooms</h3>
    <p>Stay in a well-appointed room at Casita Sedona with your own fireplace,king-size bed,and balcony overlooking the red rocks.
    </p>
    <div>
        <strong>Casita Sedona Bed &amp; Breakfast</strong><br>
        612 Tortuga Lane<br>
        Sedona,AZ 86336<br>
        928-555-5555
    </div>
</main>
<footer>
    <br><small><i>Copyright &copy; 2020 Your Name Here</i></small>
</footer>
</body>
</html>

    image

    section元素

    • 包含文档“区域”，如章节或主题
    • 以<section>开始，</section>结束，可包含header,footer,section,article,aside,figure,div等内容配置元素。

    article元素

    • 包含一个独立条目，如博客文章、评论或电子杂志文章。
    • 以<article>开始，</article>结束。可包含header,footer,section,asdie,figure,div等内容配置元素。

    aside元素

    • 代表旁注或其他补充内容。以<aside>开始，</aside>结束，可包含header,footer,aside,figure,div等内容配置元素。

    time元素

    • 代表日期或时间。适合标注内容（网页或博客）的创建日期
    • 属于内联元素。以<time>开始，</time>结束，可选datetime属性。
    • 日期用YYYY-MM-DD，时间用HH:MM （24小时制）。
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Bistro Blog</title>
<meta charset="utf-8">
</head>
<body>
  <header>
    <h1>Lighthouse Bistro</h1>
  </header> 
  <nav>
    <b>
    Home &nbsp; 
    Menu &nbsp; 
    Blog &nbsp; 
    Contact
  </b> 
   </nav> 
  <main>
    <aside>
      <p><i>Watch for the March Madness Wrap next month!</i></p>
    </aside>
    <section>
      <h2>Bistro Blog</h2>
      <article>
        <head><h3>Valentine Wrap</h3></head>
        <time datetime="2020-02-01">February 1,2020</time>
        <p>The February special sandwith is the Valentine Wrap &mdash;heart-healthy organic chicken with roasted red peppers on a whole wheat wrap.</p>
      </article>
      <article>
        <header><h3>New Coffee of the Day Promotion</h3></header>
        <time datetime="2020-01-12">January 12,2020</time>
        <p>Enjoy the best coffee on the coast in the comfort of your home.We will feature a different flavor of our gourment,locally roasted coffee each day with free bistro tastings and a discount on one-pound bags.
        </p>
      </article>
    </section>
  </main> 
  <footer>Copyright &copy; 2020</footer>
</body>
</html>

    image

    超链接

    a元素

    • 作用是定义超链接，指向另一个网页或文件
    • 锚元素以<a>开始，</a>结束。标记之间可点击超链接文本或图片

    href属性

    • href属性配置连接引用，即要访问（链接到）的文件名称和位置
    <a href="https://baidu.com">百度一下</a>

    <!DOCTYPE html>
<html lang="en">
<head>
<title>Anchor Example</title>
<meta charset="utf-8">
</head>
<body>
<a href="https:www.baidu.com">百度一下</a>
</body>
</html>

    image

    绝对链接

    • 绝对链接指定资源在Web上的绝对位置。
    • 用绝对链接来链接其他网站上的资源，href值包含协议名称http:// 和域名

    相对链接

    • 链接到自己内部网页时可以使用相对链接
    • href值不以http:// 开头，不含域名，只包含所需显示网页的文件名
    <a href="Contact.html">Contact me</a>

    站点地图

    • 描述网站结构
    超链接示例
    • index.html
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
</head>
<body>
<header>
    <h1>Trillium Media Design</h1>
</header>
<nav>
    <b><a href="index.html">Home</a> &nbsp; 
        <a href="services.html">Services</a> &nbsp; 
        <a href="contact.html">Contact</a></b>
</nav>
<main>
    <h2>New Media and Web Design</h2>
    <p>Trillium Media Design will bring your company's  Web presence to the next level.We offer a comprehensive rangs of services.
    </p>
    <h2>Metting Your Business Needs</h2>
    <p>Our expert designers are creative and eager to work with you.</p>
</main>
<footer>
    <small><i>Copyright &copy; 2020 Your Name Here</i></small>
</footer>
</body>
</html>
    • services.html
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
</head>
<body>
<header>
    <h1>Trillium Media Design-Services</h1>
</header>
<nav>
    <b><a href="index.html">Home</a> &nbsp; 
        <a href="services.html">Services</a> &nbsp; 
        <a href="contact.html">Contact</a></b>
</nav>
<main>
    <h2>Our Services Meet Your Business Needs</h2>
    <dl>
        <dt><strong>Website Design</strong></dt>
        <dd>Whether your needs are lagrs or small,Trillium can get
            you on the web!
        </dd>
        <dt><strong>E-Commerce Soultions</strong></dt>
        <dd>Trillium offers quick entry into the e-commerce marketplace.</dd>
        <dt><strong>Search Engine OPtimization</strong></dt>
        <dd>Most people find new sites using search engines.Trillium can get your website noticed.</dd>
    </dl>
</main>
<footer>
    <small><i>Copyright &copy; 2020 Your Name Here</i></small>
</footer>
</body>
</html>
    • contact.html
    <!DOCTYPE html>
<html lang="en">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
</head>
<body>
<header>
    <h1>Trillium Media Design - Contact</h1>
</header>
<nav>
    <b><a href="index.html">Home</a> &nbsp; 
        <a href="services.html">Services</a> &nbsp; 
        <a href="contact.html">Contact</a></b>
</nav>
<main>
    <h2>Contact Trillium Media Design Today</h2>
    <ul>
        <li>E-mail:contact@trilliummediadesign.com</li>
        <li>Phone:555-555-5555</li>
    </ul>
</main>
<footer>
    <small><i>Copyright &copy; 2020 Your Name Here</i></small>
</footer>
</body>
</html>

    image

    target属性

    • 在锚标记中用target属性配置target="_blank"在新浏览器窗口或新标签页中打开网页
    <a href="htts://www.baidu.com" target="_blank">百度一下</a>

    将整个块作为锚

    • 允许将一个或多个元素（包括块显示的。如div、h1等）配置成链接

    电子邮件链接

    • 使用mailto: ,而不是http://
    • 会自动打开默认邮件程序和对应E-mail地址作为收件人
    <a href="mailto:mydatascientis@gmail.com">mydatascientis@gmail.com</a>
  • 相关阅读:
    hdu1180奇怪的楼梯……bfs迷阵……wa该16二级，我太渣滓
    Android新闻案例clientserver达到，完全自己的新闻节目平台
    xcode代码统计行
    linux每个路由表的系统研究
    Oracle 学习笔记 18 -- 存储函数和存储过程(PL/SQL子程序)
    《网络编程》ioctl 操作
    Android framework召回（3）binder使用和IBinder BpRefbase IInterface INTERFACE 之间的关系
    使用关节型
    leetcode 218: The Skyline Problem
    删除依赖命令
  • 原文地址：https://www.cnblogs.com/yushihua/p/14902637.html
Copyright © 2011-2022 走看看