乐趣区

关于html:Week1Introduction-to-HTML5

根底的 HTML 常识

1. 首先以 <!doctype html> 申明结尾

如若不以此申明结尾,那么浏览器会以 quirky mode 解决,
对于 <!doctype html>
doctype 与 html 无论大小写均可,在保障 doctype 与 html 之间留有一个空格的前提下,html 前面能够打多个空格,演示以下状况:
<!DOCTYPE html>
<!Doctype HTML>
<!DocType html            >
均可

2. 次要构造

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>                 </title>
</head>
<body>

</body>
</html>

上面顺次解释:
对于 tag,html 由 tag 组成,所有 tag 均有开始标签,局部以 </tag> 完结,并非要求所有都有完结标签。
首先一个 html 文档蕴含 <head> 与 <body>,
1.<title> 与 </title> 之间能够填充任意字符,示意你网页的名字,即浏览器最上方的网页名字栏显示的内容
2.<meta> 的 charset=”utf-8″ 是指该网页编码为 utf-8,对于标签的属性,其属性值是以 单引号 或者 双引号 蕴含的
3.<body> 局部则显示网页的主界面

3.flow 与 phrase

次要讲 HTML5 讲以前的 block 元素与 inline 元素归类为 flow 与 phrase,常见的两个代表:
<div> 块级元素: 每个 <div> 均会换行
<span> 行内元素:元素全副显示在一行内,不换行
留神:在 <span> 外面蕴含 <div> 是谬误的,如 <span><div></div></span>

4.simantic-elements

为了便于人们的了解,许多标签具备 simantic 的含意,也就是依据标签名能大抵推断标签的作用,比方:
<head>
<body>
<section>
<article>
<footer>
等等

5.list

想要在网页中显示相似于清单的成果,例如:

能够应用 <tag>:

    My typical dinner shopping list:
    <ul>
      <li>Milk</li>
      <li>Donuts</li>
      <li>Cookies
        <ul>
          <li>Chocolate</li>
          <li>Sugar</li>
          <li>Peanut Butter</li>
        </ul>
      </li>
      <li>Pepto Bismol</li>
    </ul>

以 <ul> 开启一个清单,其中的子项是 <li> 形容,清单能够嵌套清单
除了应用 <ul> 与 <li> 外,还能够应用 <ol> 与 <li>

    <ol>
      <li>Open box</li>
      <li>Take out cookie</li>
      <li>Make a Double Oreo
        <ol>
          <li>Peel off the top part</li>
          <li>Place another cookie in the middle</li>
          <li>Put back the top part</li>
        </ol>
      </li>
      <li>Enjoy!</li>
    </ol>


<ol>,<li> 则有主动排序编号的成果

6.Entities Reference

如果想在网页中显示一些 <> 之类的,但不想被 HTML 当作源码编译,就得应用 entities reference,
比方以下含意等价:
<:&amplt;
&gt:&ampgt;
&:&ampamp;
相当于如果你想在你的网页上显示 <div>,而不是将 <div> 编译,能够写成 &amplt; div &ampgt;

&quto; 显示为 ” 引号,比拟有用的一个是 &ampnbsp;
nbsp 的意思是 no broken space,咱们晓得,当咱们把浏览器页面的宽度放大,段落间的一些单词就会换行,如果你想让某三个单词之间不换行,或是换行时依然在一起而不被宰割,在第一个单词与第二个单词之后加 &ampnbsp; 吧
victory&nbsp;nor&nbsp;defeat.

7. 链接跳转

标签 &lta&gt 能够实现连贯跳转,只需在 &lta href=” 你要跳转的链接 ”&gt,即可,能够是内部链接,也能够是外部链接,即.html 后缀的文件,与以后 html 文件在同一个文件夹下

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <h1 id="top">Links to Sections of The Same Page</h1>
  <section>
    <ul>
      <!-- Link to every section in the page -->
      <li><a href="#section1">#section1</a></li>
      <li><a href="#section2">#section2</a></li>
      <li><a href="#section3">#section3</a></li>
      <li><a href="#section4">#section4</a></li>
      <li><a href="#section5">#section5</a></li>
      <li><a href="#section6">#section6</a></li>
    </ul>

  </section>

  <section id="section1">

将一个 tag 的 id 指定为某个值,在 href 外面加上前缀 #,则可实现点击跳转到该局部,相似于目录导航

8. 图片显示

应用标签 <img src=” 图片链接,与上文中的跳转链接别无他样 ” width=” height=”>,展现图片时最好加上 width 与 height 属性,这样你能够提前告知浏览器你所要出现的图片大小,如果不设置 width 和 height,那么加载图片时会忽然跳进去,体验不好
<img> 是 inline element

退出移动版