学习网站 :菜鸟教程 菜鸟教程
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
以CSDN为例,我用的是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="CSDN" 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>
📌
<table border=“1”>
<tr>**(行数–有几行就写几个<tr></tr>)**
<td></td>(列数)
</tr>