Html学习笔记（二）

时间 2020-01-06

标签 html 学习笔记栏目 HTML 繁體版

原文原文链接

Html头部

HTML `<link>`元素

<link> 标签订义了文档与外部资源之间的关系。css

<link> 标签一般用于连接到样式表:html

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

HTML `<style>` 元素

<style> 标签订义了HTML文档的样式文件引用地址。
在<style> 元素中也能够直接添加样式来渲染 HTML 文档。浏览器

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML`<meta>`元素

meta标签描述了一些基本的元数据。布局

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。搜索引擎

META 元素一般用于指定网页的描述，关键词，文件的最后修改时间，做者，和其余元数据。spa

元数据可使用于浏览器（如何显示内容或从新加载页面），搜索引擎（关键词），或其余Web服务。code

<meta> 通常放置于<head>区域htm

HTML head 元素

标签	描述
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面连接标签的默认连接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的脚本文件
`<style>`	定义了HTML文档的样式文件

记住了哈。blog

Html CSS

style元素

这里有个实例：索引

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>经常使用网址</title>
        <style type="text/css">
            p{
                color:blue;
            }
        </style>
    </head>

<body>
    <a href="https://www.baidu.com">
    <img border="2" src="https://pic.downk.cc/item/5e0de0b076085c3289681048.png" width="425" height="300"/></a>
    <p>这是一个段落，主人尚未想好写什么</p>
</body>

</html>

效果图：

CSS 能够经过如下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部<head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是经过外部引用CSS文件.

P.S. 说句题外话
style属性:
text-decoration决定文本有没有下滑线
background-color决定背景颜色
text-align:center可使文本居中对齐

内联样式

当特殊的样式须要应用到个别元素时，就可使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性能够包含任何 CSS 属性。如下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

内部样式表

当单个文件须要特别样式时，就可使用内部样式表。你能够在<head> 部分经过 <style>标签订义。

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式须要被应用到不少页面的时候，外部样式表将是理想的选择。使用外部样式表，你就能够经过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="地址">
</head>

图片

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。

你知道的，我是不会学表格的。

HTML `<div>` 和`<span>`

HTML 能够经过 <div> 和<span>将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，一般会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时一般不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML `<div>` 元素

HTML <div> 元素是块级元素，它可用于组合其余 HTML 元素的容器。

<div> 元素没有特定的含义。除此以外，因为它属于块级元素，浏览器会在其先后显示折行。

若是与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另外一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table> 元素的做用是显示表格化的数据。

HTML `<span>` 元素

HTML <span> 元素是内联元素，可用做文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签	描述
`<div>`	定义了文档的区域，块级 (block-level)
`<span>`	用来组合文档中的行内元素，内联元素(inline)