5、头部+CSS

(1)HTML<head>

使用<title>标签定义HTML文档的标题,<title>在 HTML/XHTML文档中是必须的。
定义了浏览器工具栏的标题
当网页添加到收藏夹时,显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

代码:

<!DOCTYPE html>     
<html>          
<head>
<meta charset="utf-8">
<title>这里可以改标题</title>  
</head>
<body>
<h1>Hello word!</h1>
</body>
</html>

效果:

(2)HTML<base>

使用<base>定义页面中所有链接默认的链接目标地址。

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web前端</title> 
    <base href="https://www.ictliuxiao.com" target="_blank">
</head>
<body>
    <a href="">默认链接</a>
</body>
</html>

效果:

(3)HTML<link>

<link>标签定义了文档与外部资源之间的关系。
<link>标签通常用于链接到样式表。俗称外链样式表。

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web前端</title> 
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
        <p>CSS的测试段落1</p>
        <a href="https://www.ictliuxiao.com">CSS的测试段落2,链接</a>
</body>
</html>

CSS代码:

p{
    font-size: 100px;           /*字体大小100px*/
    font-family: "微软雅黑";    /*字体为微软雅黑*/
    color: red;              /*颜色为红色*/
}

a{
    text-decoration: none;      /*链接去掉下划线*/
}

效果:

(4)HTML<style>

<style>标签定义了HTML文档的样式文件引用地址。
<style>元素中你也可以直接添加样式来渲染 HTML 文档。俗称内联样式表。

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web前端</title> 
    <style type="text/css">
    p{
    font-size: 100px;           /*字体大小100px*/
    font-family: "微软雅黑";    /*字体为微软雅黑*/
    color:aqua;              /*颜色为青色*/
    }

    a{
    text-decoration: none;      /*链接去掉下划线*/
    color: red;               /*颜色为红色*/
    }
    </style>
</head>
<body>
        <p>CSS的测试段落1</p>
        <a href="https://www.ictliuxiao.com">CSS的测试段落2,链接</a>
</body>
</html>

效果:

(5)HTML CSS

CSS 可以通过以下方式添加到HTML中,最好的方式是通过外部引用CSS文件。
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head>区域使用<style>元素 来包含CSS
外部引用 - 使用外部 CSS 文件

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web前端</title> 
</head>
<body style="background-color:yellow;">
    <h2 style="background-color:red;">这是一个标题</h2>
    <p style="background-color:green;">这是一个段落。</p>
</body>
</html>

效果: