HTML 学习笔记

HTML 基础

HTML 网页的组成由 <html> 标签包围，里面有文件头和文件主体。文件头可以写网站的标题，以及一些元数据，这些在文件头的元数据一一般是服务器加到 http 协议文件头的东西，比如 set-cookie 设置 cookie，refresh 刷新页面并重定向网页地址。而 body 里面主要就是网页文件主要显示的内容了。

<!DOCTYPE HTML>
<html>
    <head>
        <title>This is the website title!</title>
        <meta http-equiv=set-cookie content="Xorex is the best!">
        <meta http-equiv=refresh content="3;URL=https://xorex.space">
        <meta name=auther content="Xorex">
    </head>
    <body>
        Just wait 3 seconds.
        <script>
            alert("Welcome,after 3 seconds you will jump to my blog!");
        </script>
    </body>
</html>

可以在 body 标签中定义里面的页面基本属性：

backgroud= 背景图片文件名
bgcolor= 背景颜色
text= 文本默认颜色
link= 没有被访问的链接的原文字颜色
alink= 被激活的链接的原文字颜色 active link
vlink= 访问过的链接的原文字的颜色 visited link
topmargin= 信息内容顶边距离
leftmargin= 信息内容左边距离 margin 边距

bgsound 背景音乐

内含属性 src=音乐源文件 loop=循环次数（不指定无限循环）

HTML 注释

使用 

特殊字符

有些没法直接输入的字符，可以使用对应的数字代码或者代码名称来替代，比如：

特殊字符	数字代码	代码名称
&	`&`	`&` (amperstand)
<	`<`	`<` (Less than It)
>	`>`	`>` (Great than It)
空格	&`#160;`	` ` (No-Break Space)
“	&#34	`"` (Quot)
©	版权	`©`
®	注册商标	`®`

<base> 基准控制

放在 <head> 里面，用来给一些东西作为基准，比如链接，可以设置 <base href="https://Xorex.space" target=_blank > 这样以后写超链接的时候，就不需要写 target ，并且 href 只需要写域名后面的地址即可，比如 href=index.html

<iframe> 内联框架

用来实现漂浮的窗口，拥有属性：

src 框架的 html 代码地址

文本控制

字体控制标识符

添加到 <font size=XXX color=XXX face=XXX >This is the words!</font>

size 字号从 1-7 字号越大字体越大
color 使用 html 指定颜色名称或者颜色的十六进制值比如 #FFFFFF 一共是六位十六进制符号
face 为字体，英文字体有 Times New Roman 中文字体有宋体/楷体等等。

物理字符样式

比如下面的 b 为粗体（Bring Attention To），big 为变大，small 为变小，i 表示斜体文字（italic），tt 等宽字体（打印机字体 teletype text），u 下划线（underlined），s 删除线（strikethrough），strike 同样是删除线，sup 上标记（superscript ），sub 下标记（subscript），em 强调（emphasis），del 删除（delete），ins 插入（insert）

<P><B>此处为粗体显示文本</B>
<P><BIG>此处为大字体文本</BIG>
<P><SMALL>此处为小字体文本</SMALL>
<P><I>此处为斜体文本</I>
<P><TT>此处为等宽字体文本</TT>
<P><u>此处为下划线文本</u>
<P><S>此处为使用&lt;S&gt;标记设置的删除线文本</S>
<P><STRIKE>此处为使用&lt;STRIKE&gt;标记设置的删除线文本</STRIKE>
<P>此处为上标示例：x<SUP>2</SUP> + y<SUP>2</SUP> = R<SUP>2</SUP>
<P>此处为下标示例：H<SUB>2</SUB>SO<SUB>4</SUB>

此处为粗体显示文本

此处为大字体文本

此处为小字体文本

此处为斜体文本

此处为等宽字体文本

此处为下划线文本

~~此处为使用<S>标记设置的删除线文本~~

~~此处为使用<STRIKE>标记设置的删除线文本~~

此处为上标示例：x² + y² = R²

此处为下标示例：H₂SO₄

marquee 滚动文字

包含一些比较常用的属性：

width 和 height 滚动字幕的宽度和高度
bgcolor 滚动字幕的背景颜色
direction 滚动方向 left right up down
loop 滚动重复次数不设置为无限循环
behavior 设置如何滚动 scroll slide alternate。

旁注文字

使用 <ruby></ruby> 来包围需要被旁注的文字。

日期时间

利于爬虫提取时间的一中标签，表示里面是时间 <time>

拥有属性:

datetime 普通日期时间
pubdate 发表时间

文本分段

<p> 将文本分割成段落 paragraph
<br> 强制换行 break
<hr> （horizontal rule 水平尺）水平分割线内含有属性 color size noshade(没有值，表示去除分割线阴影) align(对齐方式 left right center)
<hn> 其中 n 为自定义数字，表示第 n 级标题，n 最大为 6。

文本对齐

<div> (division) 将多段文本整合为一个节，这个节可以利用 <div> 中的 align 属性，设置一致的对齐方式， align拥有可选项： left right center justify（两端对齐）此标签作用是将 html 代码分块管理。
<center></center> 将包括里面的内容居中对齐

文本格式保留

使用 <pre> 标签可以想使用 Python 中的 ‘’’ 效果一样，完全保留在标签内的排版。

组合文本

使用 <span>XXXX<span> 用于标记的文字 XXXX 一些特别的表现，需要结合样式来确定具体的效果。

列表样式

使用 <ol></ol> 来创建一个列表样式，ol：ordered list，<ol> 标签里面使用 <li> 来表示列表的一个元素。

ol 包含的属性：

type 设置标记第几个的符号可选 1 A a I i（后两个为大小写罗马数字）
start 设置数字的起始值

<ol type="I">

    <li>This is the first!</li>
    <li>This is the second!</li>
    <li>This is the third!</li>
</ol>

列表可嵌套，只需要在 <li></li> 标签之间再新建一个列表即可。

使用<ul> 标签可以搞一个无序列表 unordered list，使用 <li> 作为单个标记，用法效果和 md 里面的 - 符号相同。

使用 <dl> discribe list 搞一个描述列表，里面有 <dt> discribe title 来自定义当前列表的标题。使用 <dd> discribe data 来跟在标题后面，表示属于其的内容。

可以搞嵌套列表

图像与超链接

Web 图像基础

矢量图和位图的区别。。。

gif ：颜色少于256位，允许透明，可以是图片或者动画
jpeg/jpg：颜色艳丽体积小，不支持透明和动画
png：可以用于矢量图，允许半透明

图像标记符 <img>

这个标签拥有属性：

src 添加图像的 URL
dynsrc 添加视频的 URL
alt (alternative) 图像加载不出来的时候显示的文字
align 对齐方式，可选 left right top middle bottom
height 高度
width 宽度
hspace 水平方向空白大小
vspace 垂直方向空白大小

视频标记符 <video>

HTML5 支持三种视频格式： mp4、WebM 和 Ogg

标签 <video> 拥有下列属性：

src 值 URL 为视频地址
autoplay 值 autoplay
loop 值 loop
muted 值 muted 设置为默认静音
width
height

可以内嵌多个 <source src=”” type=”video/mp4” > 来代替标签内的 src 实现多个视频源备选。

音频标记符 <audio>

用法和上面的 <video> 差不多。

可以内嵌多个 <source src=”” type=”audio/mp3” > 来代替标签内的 src 实现多个音频源备选。

多媒体文件 <embed>

embed 嵌入，这个标签用来加入除了视频和音频以外的多媒体文件，比如 Flash ，用法和上面的一样。

单独一块内容 <figure>

用来声明单独的一块内容来显示东西，<figcaption> 用于放在 <figure> 标签里面用来用来介绍下面一块单独内容为什么东西。

超链接标识符 <a>XXX</a>

可以在可以显示的任意地方使用：<a href=https://xorex.space>这是我的博客</a>

h ref ：Hypertext reference

上面 XXX 的地方除了可以写文字，也可以插入一个图片。

当然这个 href 可以是同一个页面的一个标签，直接跳转到标签所在的位置。标签的声明方法：

<a name="mark1"> 然后把 href 的值改为标签的名字 #mark1 即可。

超链接拥有的属性：

href 输入链接
target 何处打开目标 _self 当前窗口默认，_blank 新窗口

表格

表格的内容定义在 <table></table> 之间，一行一行定义的，每一行使用 <tr></tr> 之间定义这一行的内容，对于第一行来说，里面每一列的元素使用标签 <th></th> 来定义每一列的标题 head。第二行及其后面第一个使用<th></th>来表示这一行的标题head，后面的则使用标签 <td></td> 来表示每一列的具体数据。其中 tr：table row ，th：table head，td：table data。

举个例子：

姓名	上午	中午	晚上
Xorex	打游戏	睡觉	打游戏
Megumi	看动漫	睡觉	看动漫
Yukino	学习	睡觉	学习

<table border=1 >
    <tr>
        <th>姓名</th><th>上午</th><th>下午</th>
    </tr>
    <tr>
        <th>Xorex</th><td>打游戏</td><td>睡觉</td><td>打游戏</td>
    </tr>
    <tr>
        <th>Megumi</th><td>看动漫</td><td>睡觉</td><td>看动漫</td>
    </tr>
    <tr>
    <th>Yukino</th><td>学习</td><td>睡觉</td><td>学习</td>
    </tr>
</table>

标签<Table>属性

width 表格宽度
border 是否显示边框，0 表示没有边框 1表示拥有边框
align 控制表格的对齐方式，可以是 left right center
bgcolor 设置表格背景颜色
background 设置背景图片

标签 <caption> 用于给表格添加标题等说明文字

align 可选择 left right center

标签 <tr> 定义表格的一行

align 行中数据水平的对齐方式 left right center
valign 行中数据垂直的对齐方式 top middle bottom
bgcolor 一行的背景颜色

标签 <td> 定义表格的一个单独的数据

align 可选 left right center
valign 可选 top middle bottom
width height 宽度和高度
rowspan 单元格合并格数 span(跨度，持续) 向右合并
colspan 单元格合并的列数可以内嵌多个 <source src=”” type=”audio/mp3” > 来代替标签内的 src 实现多个音频源备选。向下合并

标签 <colgroup> 对某一列进行统一标记

可以使用 <td> 的所有属性，按照此标签个数，是第几个就是对第几列的控制。

标签 <thead> <tbody> <tfoot> 对一行行数据进行标注

要求三个同时出现，并且包含所有的元素。

表单

表单的格式： <form name="" method="" action=""></from>

name 表示表单的名称
method 表示提交方法可以是 get 或者 post
action 表示将信息交给处理对象，比如 index.php

<input> 标记，可以用来定义文本框，提交按钮，复选框等

type 表示此表单的类型，有文本框：text，密码框：password，提交按钮：submit，重置按钮：reset，单选按钮：radio，图像提交按钮：image，隐藏输入字段：hidden，上传文件：file，多选框：checkbox，多行文本框：textarea，选项菜单：select。
name 此表单的名称
size 单行文本框的长度
maxlength 文本框最大输入字数
value 若为文本框，则为默认值。若为选择按钮，则为被选中后传入服务器的值。若为按钮，则为按钮上的文字。
checked 表示默认选中的选项
readonly 赋值为 “readonly” 的时候，此文本框无法被修改。

input 新增表单控件

url 会自动验证数据是否为 url
email 会自动验证
时期或时间可选择 date month week time detetime datetime-local
数字，可选 number（类似 <select> 选择）或者 range（拖动条）

<filedset> 分组

<form>
    <fieldset>
        <legend>用户登录</legend>  
        <input>
        <input>
        ...
    </fieldset>
    <fieldset>
        <legend>用户注册</legend>
        <input>
        <input>
        ...
    </fieldset>
</form>

就像上面把各种 <input> 表单分组，一个是用户登录，一个是用户注册，命名使用 <legend> （说明）来命名，和 <input> 并列。

表单的各种实现

比如文本框：

1	<input type=text name=Introduction maxlength=250 value="Input in there." size=20 readonly=readonly >

比如密码框：

1	<input type=password name=password maxlength=16 size=20>

比如按钮：

1
2
3

<input type=submit name="Submit the ID and password." value="Login">
<input type=reset name="Reset the datas." value="Reset">
<input type=buttom name="Show example." value-"Show example" onclick=Example.js>

比如单选框：

<input type=radio name=Sex value=Man>男
<input type=radio name=Sex value=Woman>女
<br>
<input type=radio name=death value=0>死亡
<input type=radio name=death value=1>存活

比如多选框：

<input type=checkbox name=ways value=web>Web
<input type=checkbox name=ways value=revrse>逆向
<input type=checkbox name=ways value=crypto>密码学
<input type=checkbox name=ways value=pwn>二进制安全
<br>

比如文件框：

1	<input type=file name=user_file >

比如隐藏框（并不会被显示出来，一般用来搞验证的 token）

1	<input type=hidden name=id value=123123123>

多行文本框：

1	<textarea rows=10 cols=200 name=self_introduction>在这里输入个人简介吧！</textarea>

选择列表

选择列表在标签 <select></select> 中添加，它拥有以下属性：

size 指定下拉菜单显示的菜单项目数量。
multiple=multiple 可以按住 ctrl 或者 shift 多选。

选择列表需要配合 <option></option> 标签使用，属性如下：

value 被选中后返回到服务器的值
selected=selected 默认被选择

比如建立一个语言选择列表：

<select size=1>
    <option value=C++>C++</option>
    <option value=Java>Java</option>
    <option value=C#>C#</option>
    <option value=Python>Python</option>
    <option value=Pascal>Pascal</option>
</select>

数据选择列表：<datalist>

这个东西的使用场景是要填写一个答案固定几种的文本框，然后给文本框编写待选数据使用的，所以这个标签需要绑定一个文本框才可以使用：

<input type=text size=40 list=URL name=URL>
<datalist id=URL>
    <option value=https://google.com>
    <option value=https://xorex.space>
    <option value=https://tempest.space>
</datalist>