HTML与CSS

HTML

常见语法格式

html
告诉浏览器这是一个HTML文件,在部分浏览器没有这个部分也可以正常读取,但一般要求加上。

<html>
...
</html>
<!DOCTYPE html> 

!DOCTYPE是标准网页申明,表示支持HTML5。
head和body
它们分别表示网页的标题和内容。如下:

<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>
  </body>
</html>

head中可以放title、meta、style元素。
body本身可以添加一些控制表现的属性,比如:设置背景色和文本颜色。
title
表示网页的标题

<title>My Trip Around the USA on a Segway</title>

h1、h2
表示子标题,h1的字体大于h2的字体。

<h1>Segway'n USA</h1>

p
表示文段,它是内联形式的,不会自动换行。

 <p>
      Documenting my trip around the US on my very own Segway!
 </p>

列表ul、ol、dt
有序列表:

    <ol>
      <li>Walla Walla, WA</li> 
      <li>Magic City, ID</li> 
      <li>Bountiful, UT</li>
      <li>Last Chance, CO</li>
      <li>Truth or Consequences, NM</li>
      <li>Why, AZ</li> 
    </ol>

在这里插入图片描述
无序列表:

    <ul>
      <li>cellphone</li> 
      <li>iPod</li>
      <li>digital camera</li>
      <li>and a protein bar</li>
    </ul>

在这里插入图片描述
定义列表:

<dl>
  <dt>Burma Shave signs</dt>
  <dd>Roads signs common in the U.S.</dd>

  <dt>Route 66</dt>
  <dd>Most famous road in the U.S. highway system</dd>
</dl>

在这里插入图片描述
blockquote
块。它是非内联形式的,会在首部和尾部自动添加换行,并且会有缩进。和q类似但有所不同。
< br >表示添加一个换行,是一种void形式的不带内容的标记,因此它也可以把< br >< /br >简写为< br >。

    <blockquote>
      Passing cars, <br>
      When you can't see, <br>
      May get you, <br>
      A glimpse, <br>
      Of eternity. <br>
    </blockquote>

q
表示引用。浏览器会自动添加表示引用的双引号。它是内联元素。
em
使用这个元素来标记你想用不同方式展示的文本,比如你想强调一个要点。它是一种内联元素,和一样。
time
告诉浏览器这里包含了日期和时间。
strong
标记希望特别强调的文本。
pre
希望浏览器按你输入的方式原样显示文本时,使用这个元素来指定文本的格式。
a

<a href="http://wickedlysmart.com/buzz" title="describe" target="_blank">Caffeine</a>

<a>Caffeine</a>这个标记表示Caffeine点击可以跳转,跳转的目标是由href指向的内容来决定的,双引号不能省略,比如http://wickedlysmart.com/buzz表示http://wickedlysmart.com/域名下的buzz文件夹下的页面。buzz是指在服务区端的文件夹。其中的title表示当光标移向这个链接后会显示的文本描述(描述的对象是链接的目标地址)。target="_blank"表示在新窗口打开(默认为在原窗口打开)。
使用id链接元素
被链接处:<h2 id="chai">Chai Tea, $1.85</h2>
跳转处:<a href="index.html#chai">jump</a>
在跳转处点击jump,就可以打开index.html然后因为Chai Tea,¥1.85被id值chai所标记,所以页面会跳转到Chai Tea处(此时这句话会位于页面的最顶部),这种方式在页面内容非常复杂的情况下很有用。id的值区分大小写,所以在写的时候需要注意一致性。
img
添加一张图片,图片为内联元素,图片可以来自本地也可以来自网络。是void元素,因为html页面是纯文本,图片并不属于它的一部分。当一个页面嵌入多个图像的时候,多个图像会同时向服务器请求,速度很快。alt后的文字内容是在图片不能正常加载的情况下显示的,是对图片信息的描述。另外也可以在img中增加宽高的值来约束图片的大小。
来自本地文件夹:<img src="images/drinks.gif" alt="图片">
来自网络:<img src="http://www.starbuzzcoffee.com/images/corporate/ceo.jpg" alt="图片">
meta
如:<meta charset="utf-8">指定了使用utf-8编码,如果不使用它,中文汉字会乱码。
< meta > 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
style
如下在style中可以添加css样式。

    <style>
      p{
        color: maroon;
      }
    </style>

link
链接到外部信息,type表明了信息的类型,但是html5中我们可能不再需要它,rel指定了html文件与外部文件的关系,因为我们要链接到一个样式表,所以这里使用值“stylesheet”,href指向目标文件。link也没有结束标记,它是一个void元素。

<link type="text/css" rel="stylesheet" href="journal.css">

CSS

常见语法格式

对body设置css
使用方法如下:

        <style type="text/css">
              body {
                  background-color: #d2b48c;
                  margin-left:20%;
                  margin-right:20%;
                  border: 2px dotted black;
                  padding: 10px 10px 10px 10px;
                  font-family:sans-serif;
              }       
        </style>

这是css,这段内容添加在head中,type规定了它表示文本样式;#d2b48c(土黄色)表示背景颜色;margin-left和margin-right分别表示左右间距;border中的内容表示主体周围的边框是虚线,颜色为黑色;padding表示内边距;font-family表示的就是字体了。
对p进行设置css

    <style>
      p{
        color: maroon;
      }
    </style>

p这个规则将指定段落中字体的颜色。p元素的字体改变也会影响到其中的em和a元素的字体。如果希望其中的em元素显示为不同的字体,可以单独为它设置一条样式。
对h1和h2设置css
如下代码设置了h1和h2标题的字体和颜色。

    <style>
      h1,h2 {
        font-family: sans-serif;
        color: gray;
      }
    </style>

border-bottom
设置下边框样式,粗细为1,像素黑色,实线

border-bottom: 1px solid black;

这个样式和underline的区别是:它表示的下划线会延伸到边上,而underline表示的下划线只会出现在文字下方。
使用类(class)来区分段落
如下两段代码表示为某个段落设置greentea这个类,然后在css中为这个指定的段落设置颜色。

  <p class="greentea">
      ...
  </p>
p.greentea {
	color: green;
}

同理blockquote也可以使用它。

    <blockquote class="greentea">
      Test
    </blockquote>

当多个地方使用到了class="greentea"时,为了简化代码,可以在css文件中写如下代码:

.greentea {
	color: green;
}

多关联问题:一个段落可以关联多个class,比如<p class="green tea raspberry blueberry">,多个类之间使用空格分开。那么,这个段落的颜色就受到多个类的控制了。
选择问题:css中有多处设置一个段落颜色,会选择一个”最特定“的样式生效,如果不同样式的“同级”则选择最后出现的那个规则。
字体
如下指定了四种字体,实际使用哪一种其实是有优先级的,优先使用第一种字体,如果不支持就使用下一种,这是为了考虑到存在不同的平台,比如PC和Mac,最后一种字体sans-serif是默认字体,如果之前的都不可用,就会使用它。

body {
  font-family:     Verdana, Geneva, Arial, sans-serif;
  font-size:       small;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值