咱们一起来聊一聊HTML基础

本文链接：https://blog.csdn.net/qq_43370892/article/details/105546942

HTML基础_2

css样式：

这部分主要聊一聊css样式的一些知识

css样式：

        <style type="text/css">
        h1 {color: red}
        p {color: blue}
        </style>
        </head>
        
        <body>
        <h1>header 1</h1>
        <p>A paragraph.</p>
        </body>

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部表样式：

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

内部表样式：

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 style 标签定义内部样式表

<head>
   <style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
   </style>
</head>

内联样式：

    <p style="color: red; margin-left: 20px">
         This is a paragraph
    </p>

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。
设置为 targrt="_blank"
下面的这行会在新窗口打开文档：

<a href="http://www.baidu.com.cn/" target="_blank">Visit W3School!</a>

替换文本属性（Alt）

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

  <img src="boat.gif" alt="Big Boat">

设置背景图片

<body background="/i/eg_background.jpg"></body>

文字中排列图像

请注意，bottom 对齐方式是默认的对齐方式
align 属性设置为 “left”。图像将浮动到文本的左侧。
align 属性设置为 “right”。图像将浮动到文本的右侧。

 <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

通过改变 img 标签的 “height” 和 “width” 属性的值，您可以放大或缩小图像。

 <img src="/i/eg_mouse.jpg" width="50" height="50">

图片也可以嵌套为连接使用。

div是一个块级元素

作用的样式可以以块为单位

HTML <span> 元素是行内元素，能够用作文本的容器。
设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

  <style>
            span.red {color:red;}
  </style>
      ...
        <body>
             <h1>My <span class="red">Important</span> Heading</h1>
        </body>