前端复习一 | TK-Person

文章目录

1. 最可怕的不是你没学会，而是你不管你有没有学会，你都忘了……学而时习之不亦悦乎！
2. 1.HTML基本结构：
3. 2.标签
4. 3.列表

最可怕的不是你没学会，而是你不管你有没有学会，你都忘了……学而时习之不亦悦乎！

1.HTML基本结构：

 <!doctype html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title></title>
        </head>
        <body>
        </body>
    </html>
(1) <!doctype html>是html5的标准声明，用来告诉浏览器请用html5的解析方式来解析此文档。
(2) HTML文件均以<html>开始</html>结束，<head>头部：包括文档的编码格式、标题等</head>
<body>主体：浏览器可视区域可见的内容</body>
(3)HTML文档对大小写不敏感，但是建议使用小写
(4)注释方式：<!--注释代码-->

2.标签

标题标签:h1~h6

标题标签分为:
```
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```
h1标签一般喜欢用在logo、网站标题或者头条新闻上，需要自己选个合适的标签。h2主要出现在页面的主体内容的文章标题和栏目标题上，可与h3搭配使用。h3一般主打页面的边侧栏。h4是它的辅助，出现频率不高。
h1~h6默认字体属性：font-weight:blod;有默认margin值。
段落标签:p

定义段落，是块级标签。有默认margin。一般在css中p{margin:0; padding:0}就可以清除默认样式带来的空白问题。
链接标签:a
```
<a href="#" title="" target=""></a>
```

a标签是一个经常用到的标签，他有三个属性。

* href可以是一个完整的链接地址，如“http://www.baidu.com”；

    * 可以是“#”，点击后页面跳到最顶端；
    * 可以是“javascript:;”或者“javascript:void(0);”,鼠标移上去有小手，但点击过后不会跳到页面顶端。

* title可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。这里有个小技巧，如果希望注释多行显示，可以使用 作为换行符。

大家可以将鼠标移上去试一试！

    <a href="http://www.taobao.com" title = "淘宝
        的中文购物站点">淘宝网站</a>

淘宝网站

    <a href="http://www.taobao.com" title = "淘宝的
    &#10;中文购物站点">淘宝网站</a>

<a href="http://www.taobao.com" title = "淘宝的
&#10;中文购物站点">淘宝网站</a>

* target属性规定了在何处打开超链接的文档。(以下摘抄自：

http://www.cnblogs.com/Tally/archive/2013/02/19/2916475.html)

 有 4 个保留的目标名称用作特殊的文档重定向操作：
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的a标签是默认目标，它
使得目标文档载入并显示在相同的框架或者窗口中作为源文
档。这个目标是多余且不必要的，除非和文档标题标签中的
 target属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架
的框架集。如果这个引用是在窗口或者在顶级框架中，那么
它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top
 目标将会清除所有被包含的框架并将文档载入整个浏览器
 窗口。

em标签和strong标签

两者都是表示强调，但strong在语义上表示强烈的强调。可以
看一下他们的区别：

我是em标签

我是strong标签

div标签和span标签

div标签可以把文档分割为独立的、不同的部分。它是一个块级
```
元素。

<div style="background-color:#00FF00">
      <p>This is a paragraph.</p>
</div>
```
This is a paragraph.

span标签用来组合文档中的行内元素。没有固定的格式表现，需要对它进行css样式设置。

some text.some other text.

img标签

img用来插入图片，它有三个属性：

* src：可以是一个网上的图片路径，也可以是本地的图片路
  径。
* title：鼠标滑过图片时显示的文本
* alt：指定图像的描述性文本，当图像不可见时（下载不成功
  时），可看到该属性指定的文本；

一个在中国出名的外国人

需要注意的是，img在加载不出来时，会有默认的图片border

q、blockquote、br、hr、address、code、pre标签
- q 短文本引用比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么”标签是你所需要的“。
```
<p>Here comes a short quotation: <q>This is a short quotation</q></p>
```
  Here comes a short quotation: This is a short quotation
  
  请注意，浏览器在引用的周围插入了引号。
  - blockquote 长文本引用
```
   <blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
```
    This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
    
    请注意，浏览器在blockquote 元素前后添加了换行，并增加了外边距。
```
<hr/>
<address>样式为斜体</address>
```
    运行结果：
    
    样式为斜体
    
    code 在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用code标签了
```
<code>
    var i = 0;
    i++;
    alert i;
</code>
```
    运行结果：
```
var i = 0;
i++;
alert i;
```
    pre 预格式化的文本要插入多行代码时不能使用code标签，如果是多行代码，可以使用pre标签
```
<pre>
    var i = 0;
    i++;
    alert i;
</pre>
```
    运行结果：
```
    var i = 0;
    i++;
    alert i;
```

3.列表

无论是ol、ul、dl都是组合标签，不可以自己在li的同级添加其他标签，只能在li内部添加其他标签。有默认的margin、padding、list-style-type。

有序列表ol li
```
<ol>
    <li></li>
    <li></li>
</ol>
```
无序列表ul li
```
<ul>
    <li></li>
    <li></li>
</ul>
```

自定义列表 dl dt dd

<dl>
    <dt>水果：</dt>
    <dd>橘子、香蕉、苹果</dd>
    <dt>动物：</dt>
    <dd>大象、猴子、青蛙</dd>
</dl>

自定义列表又叫字典列表，多用于宝贝描述