Html学习笔记(一)

Html学习笔记

Html入门

声明:

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
    </body>
</html>

Html不是编程语言,而是一种标记语言。
只有在body里面的才能在网页中显示!

Html元素

<p></p> 段落
<a></a> 链接
<hr> 标签在 HTML 页面中创建水平线。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br/> ,是关闭空元素的正确方法。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
使用小写标签!!!


Html属性

下面列出了适用于大多数 HTML 元素的属性:

属性 描述
class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式(inline style)
title 描述了元素的额外信息 (作为工具条使用)

注意!

标题中size越小标题越大,文字中size越大字越大


<!-- 这是一个段落 -->
<p>这是一个段落</p>

浏览器会自动地在段落的前后添加空行。(</p>是块级元素)
如果希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签。

html源代码中的排版将被忽略!


新增元素:

<i>斜体文本</i>
<sub>下标</sub>
<sup>上标</sup>

``` ```

链接-target属性

_blank会使链接在新的页面显示。

链接-id属性

id属性可用于创建在一个HTML文档书签标记。
书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips")":
<a href="#tips">访问有用的提示部分</a>
或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":

<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

(似乎还没偶搞懂……)

图片-border属性

边框的厚度
搞搞就可以了。

图片-src属性

表示图片的地址。

base标签

这个卵东西其实没有什么用,提前设置了所有img的相对地址。
其实就相当于base里面设置的+img里面的地址。

base里面还可以放target。
实例(这里直接拿别人的搞搞):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hahaha</title> 
<base href="www.baidu.com/img" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "www.baidu.com/img/logo.png"
<br><br>
<a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

stop at html头部

posted @ 2020-01-03 22:41  Areds  阅读(...)  评论(...编辑  收藏