【初入Web,浅识HTML】

2024/6/23/14:36

看了一个多小时的计算机操作系统视频,目前阶段是在内存管理篇,的后半部分,第一次接触,暂时有点看不下去。

所以现在为了转换心绪,不将思绪放在那一连串的概念理解等令我难以忍受的知识上,转而奔向一直以来便颇为想入门的web\css\html。

以《head-first-html&css》为参考学习用书


“Head First Lounge”
<html>
  <head>
      <title>Head First Lounge</title>
  </head>
  <body>
      <h1>Welcome to the Head First Lounge</h1>
      <img src="C:\Users\灼日\Desktop\Lenna.jpg">
      <p>
          Join us any evening for refreshing elixirs, conversation and maybe a game or 
          two of <em>Dance Dance Revolution</em>. Wireless access is aleays provided; 
          BYOWS (Bring your own Web server).
      </p>
      <h2>Directions</h2>
      <p>
          You'll find us right in the center of downtown Webville. Come join us!
      </p>
  </body>
</html> 

在这里插入图片描述

“Starbuzz Coffee”
<html>
    <head>
        <title>Starbuzz Coffee</title>
        <style type="text/css">			<!--使用CSS对body块的style样式进行调整-->
            body{
                background-color:#d2b48c;<!--设置背景色-->
                margin-left:20%;
                margin-right:20%;<!--设置左右外边距分别占页面的20%-->
                border:2px dotted black;<!--定义页面主体周围的边框是虚线,并设置颜色-->
                padding:10px 10px 10px 10px;<!--在页面主体周围创建一些内边距-->
                font-family:sans-serif;<!--定义文本使用字体-->
            }
        </style>
    </head>
    <body>
        <h1>
            Starbuzz Coffee Beverages
        </h1>
        <h2>
            House Blend, $1.49
        </h2>
        <p>
            A smooth, mild blend of coffees from Maxico, Bolivia and Guatemala.
        </p>
        <h2>
            Mocha Caffe Latte, $2.35
        </h2>
        <p>
            Espresso, steamed milk and chocolate syrup.
        </p>
        <h2>
            Cappuccino, $1.89
        </h2>
        <p>
            A mixture of espresso, steamed milk and milk foam.
        </p>
        <h2>
            Chai Tea, $1.85
        </h2>
        <p>
            A spicy drink made with black tea, spices, milk and honey.
        </p>
    </body>
</html>

在这里插入图片描述

“Head First the New and Improved Lounge”

“lounge.html”

<html>
    <head>
        <title>Head First Lounge</title>
    </head>
    <body>
        <h1>
            Welcome to the New and Improved Head First Lounge
        </h1>
        <img src="images/drinks.gif">	<!--在"lounge.html"文件所在目录向下查询images文件中的drinks.gif文件("lounge.html与images同属一个目录")-->
        <p>
            Join us any evening for refreshing<a href="beverages/elixir.html">elixirs</a>,
            conversation and maybe a game or two of<em>Dance Dance Revolution</em>.
            Wireless access is always provided;
            BYOWS(Bring your own web server).
        </p>
        <h2>
            Directions
        </h2>
        <p>
            YOu'll find us right in the center of downtown Webville.
            if you need help fing us, check out our<a href="about/directions.html">detailed directions</a>.
        </p>
    </body>
</html>

在这里插入图片描述

“elixir.html”

<html>
    <head>
        <title>Head First Lounge Elixirs</title>
    </head>
    <body>
        <h1>
            Our Elixirs
        </h1>
        <h2>
            Green Tea Cooler
        </h2>
        <p>
            <img src="../images/green.jpg">	<!--向上查询上一级目录中的images文件夹中的green.jpg文件-->
            Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
        </p>
        <h2>
            Raspberry ice Concentration
        </h2>
        <p>
            <img src="../images/lightblue.jpg">
            Combining raspberry juice with lemon grass, citrus peel and rosehips. this icy drink will make your mind feel clear and crisp.
        </p>
        <h2>
            Blueberry Bliss Elixir
        </h2>
        <p>
            <img src="../images/blue.jpg">
            Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
        </p>
        <h2>
            Cranberry Antioxidant Blast
        </h2>
        <p>
            <img src="../images/red.jpg">
            Wake up to the flavors of cranberry and hibiscus in this vitamin C rivh elixir.
        </p>
        <a href="../lounge.html">back to the lounge</a>
    </body>
</html>

我什么要干这种事啊!

我为什么要重复抄这种我已经理解的,没有太大技术含量的工作啊!

为了敲键盘更熟练一点吗?或许是有一点,但这没必要啊,没必要放在这啊,都是码字,为什么不能码一些更有价值的东西呢!

码一些更能跟时间价值匹配上的东西啊!

唉!真的是服了!气的我对屏幕直竖中指!

“direction.html”

<html>
  <head>
    <title>Head First Lounge Directions</title>
  </head>
  <body>
    <h1>Directions</h1>
    <p>Take the 305 S exit to Webville - go 0.4 mi</p>
    <p>Continue on 305 - go 12 mi</p>
    <p>Turn right at Structure Ave N - go 0.6 mi</p>
    <p>Turn right and head toward Structure Ave N - go 0.0 mi</p>
    <p>Turn right at Structure Ave N - go 0.7 mi</p>
    <p>Continue on Structure Ave S - go 0.2 mi</p>
    <p>Turn right at SW Presentation Way - go 0.0 mi</p>

    <a href="../lounge.html">back to the lounge</a>
  </body>
</html>

复制粘贴多快啊!哎呦喂!

“My Trip Around the USA on a Segway”
<html>
    <head>
        <title>My Trip Around the USA on a Segway</title>
    </head>
    <body>
        <h1>
            Segway'n USA
        </h1>
        <p>
            Documenting my trip around the US on my very own Segway!
        </p>
        <h2>
            August 20, 2012
        </h2>
        <img src="images/segway2.jpg">
        <p>
            Well I made it 1200 miles already, and Ipassed through some interesting places on the way: 
        </p>
        <ol>
             <li>Walla Walla, WA</li>
            <li>Magic City, ID</li>
            <li>Bountiful, UT</li>
            <li>Last Chance, CO</li>
            <li>Why, AZ</li> 
            <li>Truth or Consequences, NM</li>
        </ol>					<!--<ol>有序列表;<li>子项-->
        <h2>
            July 14, 2012
        </h2>
        <p>
            I saw some Burma Shave style signs on the side of the road today:
        </p>
        <blockquote>
            Passing cars,<br>
            when you can't see,<br>
            May get you,<br> 
            A glimpse,<br> 
            Of eterinty.<br>
        </blockquote>			<!--<blockquote>块引用;<br>分行符-->
        <p>
        I definitely won't be passing any cars.
        </p>
        <h2>
            June 2, 2012
        </h2>
        <img src="images/segway1.jpg">
        <p>
            My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me:
        </p>
        <ul>
            <li>cell phone</li>
            <li>Ipod</li>
            <li>digital camera</li>
            <li>and a protrin bar</li>
        </ul>			<!--<ul>无序列表-->
        <p>
            Just the essentials. As Lao Tzu would have said, <q>A journey of a thousand miles begins with one Sefway.</q>		<!--<q>引用符号,即引号-->
        </p>
    </body>
</html>

在这里插入图片描述

部分代码语义
<em>斜体

<strong>加粗

<a>建立链接

<q>短引用

<code>显示计算机程序代码

<time>告诉浏览器内容为日期或时间

<ul>无序列表

<p>段落

<ol>有序列表

<li>列表子项

<pre>指定文本格式

<br>换行

<img>图像

<blockquote>长引用

想再说些什么,但,今天就这样吧。

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值