HTML – W3Schools 学习笔记

有用链接:

HTML Attribute Reference (查看所有 Attributes)

HTML Paragraphs

里面 double/multiple space 最终会变成 1 space, 如果要 multiple 就用 space 的 encode value

比如要写出连续 5 个 space 的话

<p>hello &nbsp; &nbsp; world</p>

里面最终会被无视掉, 最终会无视掉, 要 new line 使用 或者使用 <pre> 元素.

HTML Text Formatting

Link to W3Schools

常用到的:

 Bold

 Italic

<ins> Underline

<del> Strikethrough

 highlight

 power 是

 是 important word

不常用到的:

HTML Quotation and Citation Elements

Link to W3Schools

<blockquote> long 引用, 前面会自带留白

<q> short 引用, 会自带 "

<abbr> Abbreviation, 通常配上 title 做 tooltip

<cite> for work title, 一个作品的 title, 比如一幅画, 诗, 歌曲等. 它会用 italy 呈现

<address> 用于写联系方式, 它会用 italy 呈现

HTML Colors

Link to W3Schools

rgb(0, 0, 0) 是黑

rgb(255, 255, 255) 是白

rgb(255, 0, 0) 是红

rgba 最后一个 a 叫 Alpha channel, 也就是调 opacity 用的, 值是 0.0 - 1.0 之前

#rrggbb (HEX) 和 rgb 是同一个概念, 只是它是用 16 进制表达, 2 者是可以互相 convert 的

Number(255).toString(16)

#000000 是黑

#ffffff 是白

#ff0000 是红

HTML Links

Link to W3Schools

target="_blank" 是开多一个 tab, _self 是跳转 (默认)

_parent 和 _top 是在 iframe 中才会用到.

href 也可以带去打电话和发 email

打电话是 href="tel:+60167737700"

href="#id" 可以跳到指定的 element

HTML Images

Link to W3Schools

width="100" 意思是 100px,

element.width 拿到的是 number, 如果是 100%, 那么会拿到 computed 后的 number.

用 style="100px" element.width 也是可以拿到 computed 后的 number

HTML Image Maps

Link to W3Schools

Image map 是在图片之上做一个可点击区域. 那么我们就可以让用户点击图片内不同的内容做出一些反应.

大概长这样

shape 是你要画的形状.

rect 是 rectangle 四角形, 34,44 是左上角的 X,Y, 270,350 是右下角的 X,Y. 它和我们常用的 crop 图方式不同哦, crop 图通常是左上角 X,Y 加上 Width, Height

circle 是圈, 337, 300 是中心点, 44 是半径 radius

poly 是连线

area 也可以绑定 click, hover 等等事件哦.

目前看上去它是不支持 responsive 的, 不过我们也可以通过 formula convert 一下 coordinate 应该就可以解决了吧.

HTML Tables

Link to W3Schools

结构

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Derrick Yam</td>
            <td>11</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>15</td>
        </tr>
    </tbody>
    <tr></tr>
    <tfoot>
        <tr>
            <td></td>
            <td>26</td>
        </tr>
    </tfoot>
</table>

默认 style th 是 bold, text aligh center

td stand for table data

<caption> table 标题

colspan 把 2 个 td merge to 1 个

<tr>
    <td colspan="2">Derrick Yam</td>
    <!-- <td>11</td> -->
</tr>

有一种在左边的 header, 常用于 key-value display

<table>
    <tr>
        <th>Name</th> <!--th 哦-->
        <td>Jill Smith</td>
    </tr>
    <tr>
        <th>Phone</th>
        <td>555-77854</td>
    </tr>
</table>