HTML与CSS

最新推荐文章于 2022-10-21 15:24:28 发布

原创最新推荐文章于 2022-10-21 15:24:28 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS

前端开发专栏收录该内容

1 篇文章

订阅专栏

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;
}