BookMark
HTML5 & CSS3 Fundamentals: Development for Absolute Beginners | Microsoft Learn
Code
<!DOCTYPE html>
<html lang="en-US">
<head>
<title> video </title>
<link rel="icon" type="image/x-icon" href="file:///E:/software/nginx-1.20.1/html/iconontitle.jpg">
<style>
table,td {
border: 2px solid black;
border-collapse: collapse;
border-radius: 20px;
}
td{
background-color: #96D4D4;
}
p {
font-size:150%;
color:red
} <!-- 当前html文件中的所有p都将采用这种格式，如果自行指定则使用自行指定的 -->
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
<link rel="stylesheet" href="./styles.css">
<!-- 如果看上了某个网站的css样式，可以通过link的方式直接连接使用，不过还是推荐拷贝下来慢慢调整
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
-->
</head>
<body style="background-image:url('file:///E:/software/nginx-1.20.1/html/bg.jpg');">
<h1 style="background-color:red;border:10px solid DodgerBlue;">一级标题，背景色为红色</h1>
<p style="color:red"> 段落：红色字体</p><br><br><hr>
<a href = "https://www.baidu.com" title="title attribute is a tooltip"> 百度 </a><br><br><hr>
<a href = "#bookmark-1" title="jump to bookmark-1"> 点击跳转到bookmark-1 </a><br><br><hr>
<a href = "file:///E:/software/nginx-1.20.1/html/1.mp4" title="title attribute is a tooltip" target="_self"> 1.mp4 open at current page </a><br><br><hr>
<a href = "file:///E:/software/nginx-1.20.1/html/1.mp4" title="title attribute is a tooltip" target="_blank"> 1.mp4 open at new window or new tab </a><br><br><hr>
<a href = "file:///E:/software/nginx-1.20.1/html/1.mp4" title="title attribute is a tooltip" target="_parent"> 1.mp4 open at parent frame </a><br><br><hr>
<a href = "file:///E:/software/nginx-1.20.1/html/1.mp4" title="title attribute is a tooltip" target="_top"> 1.mp4 open at full body of window </a><br><br><hr>
<a href = "file:///E:/software/nginx-1.20.1/html/1.mp4" target="_blank">
<img src = "file:///E:/software/nginx-1.20.1/html/2022.jpg" width="200";height="200"> 点击图片跳转到一个视频 </img>
</a><br><br><hr>
<img src = "file:///E:/software/nginx-1.20.1/html/2022.jpg" alt="如果图片无法显示，那么显示这一行文本" width="800" height="400" title="title attribute is a tooltip" usemap="#map-1"> </img><br><br><hr>
<map name="map-1">
<area shape="rect" coords="0,0,400,400" href="file:///E:/software/nginx-1.20.1/html/2022-l.jpg" title="click jump to 2022-l.jpg">
<area shape="rect" coords="400,0,800,400" href="file:///E:/software/nginx-1.20.1/html/2022-r.jpg" title="click jump to 2022-r.jpg">
</map>
<a href = "file:///E:/software/nginx-1.20.1/html/2022.jpg" title="title attribute is a tooltip"> 绝对路径的文件访问， 即file:///E:/software/nginx-1.20.1/html/2022.jpg </a><br><br><hr>
<a href = "./2022.jpg" title="title attribute is a tooltip"> 当前html文件所在目录下的2022.jpg，即 ./2022.jpg </a><br><br><hr>
<p title='tooltip如果想要"",只需要用单引号包裹title属性的value即可，反之亦然'> 鼠标悬浮上来看tooltip </p><br><br><hr>
<p title='一个自然段，即p element，会自动合并连续 空 格，删除换行符
，比如这行字就包含了很多换行和连续空格，不信可以悬浮看tooltip'>一个自然段，即p element，会自动合并连续 空 格，删除换行符
，比如这行字就包含了很多换行和连续空格，不信可以悬浮看tooltip</p><br><br><hr>
<p>如果想要在自然段内换行怎么办？？？用 br element , 比</br>如 .</br>.</br>. </p><br><br><hr>
<p style="font-size:350%" id="bookmark-1">这里是一个书签位置</p><br><br><hr>
<pre style="text-align:center;font-size:200%">
pre是不会合并空格和删除换行的p (居中，字体放大200%)：
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
</pre><br><br><hr>
<pre style="font-size:200%">
这是一段包含各种特殊字体样式的文字：<br>
<b>b element用来加粗</b>
<strong>strong element用来表示重要</strong>
<i>i element 是斜体</i>
<em>em element用来表示强调</em>
<mark>mark element是高亮</mark>
<small>small element表示小一点的字体</small>
<del>del element是删除线</del>
<ins>ins 是下划线</ins>
<pre>基准<sub>sub是文字下沉</sub></pre>
<pre>基准<sup>sup是文字上浮</sup></pre>
</pre><br><br><hr>
<!-- 这一段不怎么常用 -->
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote><br><br><hr>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p><br><br><hr>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p><br><br><hr>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address><br><br><hr>
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p><br><br><hr>
<bdo dir="rtl">This text will be written from right to left</bdo><br><br><hr>
<!-- 这一段不怎么常用 -->
<p style="border:2px solid red;padding:50px;color:black">这一个段落是有边框的，文字和边框会有50像素的距离</p><br><br><hr>
<p style="border:2px solid red;margin:100px;color:black">这一个段落会向内收缩100像素的距离</p><br><br><hr>
<h6 style="font-size:60px;"> 六级标题 （拥有60px字体大小的） </h6><br><br><hr>
<p><img src="file:///E:/software/nginx-1.20.1/html/2022.jpg" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p><br><br><hr>
<p><img src="file:///E:/software/nginx-1.20.1/html/2022.jpg" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p><br><br><hr>
<!-- tr : table row td : table data -->
<table title="table element是按照一行一行进行录入的">
<tr>
<td><image src="file:///E:/software/nginx-1.20.1/html/imgholder.jpg"></td>
<td><image src="file:///E:/software/nginx-1.20.1/html/imgholder.jpg"></td>
<td><image src="file:///E:/software/nginx-1.20.1/html/imgholder.jpg"></td>
</tr>
<tr>
<td style="width:300px"><image src="file:///E:/software/nginx-1.20.1/html/imgholder.jpg"></td>
<td><image src="file:///E:/software/nginx-1.20.1/html/imgholder.jpg"></td>
<td><image src="file:///E:/software/nginx-1.20.1/html/imgholder.jpg"></td>
</tr>
<tr>
<th>https://www.w3schools.com/html/html_tables.asp</th>
</tr>
</table><br><br><hr>
</body>
</html>
扫一扫
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
