【HTML笔记】样式--CSS、图像、表格

最新推荐文章于 2024-10-09 18:14:47 发布

现在还是小趴菜

最新推荐文章于 2024-10-09 18:14:47 发布

阅读量255

点赞数 1

文章标签： html

本文链接：https://blog.youkuaiyun.com/m0_47102213/article/details/105670437

版权

学习网站：菜鸟教程菜鸟教程

HTML样式 CSS

💖CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS字体、字体颜色、大小</title>
</head>
<body>
<h1 style="font-family:Verdana;">这是一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">
这是一个段落
</p>
<h2 style="text-align:center;">居中对齐的标题</h2>
</body>
</html>

🌹在<body>部分中。用<style>来包含CSS元素
🌹font-family:字体
🌹color:字体颜色
🌹font-size:字体大小在这里插入图片描述

HTML图像

📍<img> —图像标签

📍<src> —源属性

在 HTML 中，图像由标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：
<img src=“url” alt=“some_text”>

📌图片的URL

以优快云为例，我用的是chorme浏览器，直接右键点击图片然后点击复制图片地址就可以得到图片的URL啦
在这里插入图片描述

<!doctype html>
<html>
<head>
<mate charset="utf-8">
<title>图像</title>
</head>
<body>
<p>
一个图像:
<img src="https://csdnimg.cn/cdn/content-toolbar/csdn-logo.png?v=20200416.1" alt="优快云" width="80" height="50">
</p>
<p>
一个动图：
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587268750387&di=60f70fccb6281b0b0daeab7e445ffb8b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180622%2F43203592e0e4467f8a1ea5abb73ed947.gif " alt="加油！" width="200" height="95">
</p>
</body>
</html>

动图确实是动图，因为接截屏的原因是静态的

alt 属性 – 当浏览器显示不出图片的时候会显示alt替换文本

设置图像的高度与宽度

width="304" height="228"

🌹属性与属性之间没有逗号或其他的符号

HTML表格

<!doctype html>
<html>
<head>
<mata charset="utf-8">
<title>表格</title>
</head>
<body>

<p>
每个表格从一个table标签开始。
每个表格行从tr标签开始。
每个表格的数据从td标签开始。
</p>

<h4>一列：</h4>
<table border="1">
<tr>
    <td>100</td>
</tr>
</table>

<h4>一行四列:</h4>
<table border="1">
<tr>
    <td>春</td>
    <td>暖</td>
    <td>花</td>
    <td>开</td>
</tr>
</table>

<h5>盲写，没照着例程</h5>
<table border="1">
<tr>
    <td>hello</td>
    <td>,</td>
    <td>world</td>
    <td>!</td>
</tr>
<tr>
    <td>My </td>
    <td>name</td>
    <td>is</td>
    <td>蒟蒻</td>
</tr>
</body>
</html>