「学习笔记」HTML Review

  1. 1. HTML Note
    1. 1.1. HTML响应式设计

HTML Note

img标签的alt/src属性,代表$\text{alternative}$和$\text{source}$。顺带一提,还有widthheight属性。
下面的图片是找不到的,所以会显示alt后的Alternative
以下代码<img src="/qwq.img" alt="Alternative">将会显示为: Alternative

br标签的意思自然是$\text{breakline}$,pre标签是保留原本文字,比如说以下代码

1
2
3
4
5
6
<p>
q
w
<br/>
q?
</p>


1
2
3
4
5
6
7
<pre>
q
w
<br/>
q
?
</pre>

将会表示为:


q
w


q?

q
w

q ?

pre标签内除$\text{elements}$外的形式将会被保留。















































TagDescription
<b>Defines bold text
<em>Defines emphasized text 
<i>Defines italic text
<small>Defines smaller text
<strong>Defines important text
<sub>Defines subscripted text
<sup>Defines superscripted text
<ins>Defines inserted text
<del>Defines deleted text
<mark>Defines marked/highlighted text

总之,都是首字母就是了,背起来也不复杂。

让我们尝试定义一个可爱的小按钮?
<a style="border: 2px solid white; padding: 2px; border-radius: 4px; text-decoration: none; color: white;" href="#">Button</a>
Button
可惜$\text{stackedit}$貌似不支持自定义$\text{css}$。

a标签中有一个target属性,值为_blank_self_parent_top

$\text{CSS}$的background-image属性也可以用于很多标签,比如说p:
<p style="background-image: url('text.img')">test</p>

接下来是表格属性。
在前文的代码里我们已经见过表格属性了,接下来我们来熟悉它:

1
2
3
4
5
6
7
8
<table>
<tr>
<th>qwq1</th>
</tr>
<tr>
<td>qwq</td>
</tr>
</table>

这是一个简单的表格
但是,当我们加上一些神奇的魔法

1
2
3
4
5
6
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>

$\text{collapse}:$ 坍缩
就是把多根border组合成一根。
剩下的属性就简单介绍了
colspanrowspan,横向合并和纵向合并。
如果要让表格稍微分开点,th, td { padding: 2px; }即可。

ulol在制作表格式区块时很有用。
比如说制作导航栏,我们用ul来实现。至于横向,我们可以用li { float: left; }来控制。纵向则是li { float: inline; }
oltype属性有很多,这里不细细列举了。


  1. Coffee

  2. Tea

  3. Milk


  1. Coffee

  2. Tea

  3. Milk


  1. Coffee

  2. Tea

  3. Milk


  1. Coffee

  2. Tea

  3. Milk

下面是一些看起来没卵用实际上很有用的container
主要用于$\text{CSS}$,$\text{JavaScript}$配置时。
divspan

class属性主要归类用,并且可以如此定义:
<div class="name age"></div>
相比来说,id是类似身份证号的东西,特征是“唯一”。

但是id有个很牛逼的地方,可以进行跳转?!

比如说,我在这篇文档开头加上这么一行代码。

实际上已经加了。
<h1 id="_title">HTML Note</h1>,如果你点击下面的a标签,将会回到顶部。<a href="#_title">回到顶部</a>
回到顶部

iframe标签很有意思了。
<iframe src="https://oi.yuyuko.cc" width="100%"></iframe>
比如说这是我的博客…

加入script标签表示js代码。

HTML响应式设计

首先,$\text{CSS}$的max-width属性可以用于响应式设计,比如:

同时,viewport
<p style="font-size:10vw;">Hello World</p>vw表示viewport height,也表示当前浏览器的高度。

测试图片