html 代码汇总（更新中）——供查阅html代码用

（此文章是本人对html的学习笔记，仅供资料查询和参考，不可商用）
参考书籍《html&css设计与构建网站》

一、简单的结构（详细看书）

二、文本

2.1标题

<h1>main heading</h1>
<h2>level2 heading</h2>

2.2段落

<p>
eg:<p>a paragraph

2.3粗体和斜体

<b>粗体文字</b>粗体
<i>斜体文字</i> 斜体

2.4上标和下标

<sup></sup>上标 eg:<p>4<sup>th</sup>变成4th
<sub></sub>下标<p>co<sub></sub>2 CO2 这种形象

2.5空白

空白解释：当浏览器遇到两个及以上连续空格的时候，会默认将其转化为一个空格。称为：白色空间折叠.

2.6换行符和水平线

前面的文字<br />后面的文字自动换行
<hr />这代码会变成一条水平线

三、列表

3.1有序列表

<ol></ol>创建有序列表
<li></li>列表中每个项目都被置于起始标签<li>和结束标签</li>之间

3.2无序列表

<ul></ul>创建无序列表
用<li></li>来完成内容的填充
其和有序列表的区别便是有序列表前会有数字标记每行的序号

3.3定义列表

<dl></dl>创建定义列表，其中会看到<dt>和<dd>
<dt</dl>用来包含被定义的术语
<dd></dd>用来包含定义

3.4嵌套列表

可在<li>元素中放入另一个列表来创建字列表
例子：

    <li>Mousses</li>
    <li>Pastries
        <ul>
            <li>Croissant</li>
            <li>Mille-feuille</li>
            <li>Palmier</li>
            <li>Profiterole</li>
        </ul>
    </li>
    <li>Tarts</li>
</ul>

四、链接

4.1指向其他网站的链接

网页中链接是通过<a>元素来建立，<a>元素拥有重要特性——href,href特性的值设定了链接的目标，即网站用户单击链接时所到达的页面地址。
当网站用户单击位于链接起始标签<a>和结束标签</a>之间的内容，就会打开href特性所设定的网页
<a href="http://www.baidu.com">baidu</a>
页面会显示baidu字样的文字，点击就会去访问百度网页。

4.2指向同一网站中的其他页面的链接

    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about-us.html">About</a></li>
        <li><a href="movies.html">Movies</a></li>
        <li><a href="contact">Contact</a></li>
    </ul>
</p>

这是指向文件夹中的html文件，如果没有就会报错。

衍生：

相对url

<a href="review.html">Reviews</a> //相同文件夹
<a href="music/listing.html">Listing</a> //子文件夹
<a href="movies/dvd/reviews.html">Reviews</a> //孙子文件夹
<a href="../index.html">Home</a> //父文件夹
<a href="../../index.html">Home</a> //祖父文件夹

新窗口打开新连接

利用target特性值,值为_blank

<a href="https://www.baidu.com" target="_blank">baidu(open in new window)</a>

五、图像

5.1添加图像

<img src="images/example.jpg">

特性：

atl：这个特性是对图像进行文本说明，是对图像的描述

title：光标悬浮在图像上会显示title特性的内容
height：以像素为单位来指定图像的高度
wide：以像素为单位来指定图像的宽度

5.2在代码插入图像位置

5.2.1.先插入图片，换行后再出现文字

<img src="image/bird.gif" alt="Bird" width="100" height="100"/>
<p>
    文字内容
</p>

5.2.1

5.2.2.插入图片之后，跟着图片显示文字

<p>
<img src="image/bird.gif" alt="Bird" width="100" height="100"/>文字内容
</p>

5.2.2

5.2.3.在文字中间插入图片

<p>
    文字前半部分<img src="image/bird.gif" alt="Bird" width="100" height="100"/>文字后半部分
</p>

5.2.3

5.3旧代码

5.3.1图像的水平对齐

align:通常用来表名页面的其他部分怎样环绕在图像的周围
特性值：
left:将图像做对齐（使文本环绕在图像的右边）
right将图像右对齐（使文本环绕在图像的左边）

5.3.2图像的垂直对齐

top:将周围文本的第一行与图像的顶端对齐
middle:将周围文本的第一行与图像的中间对齐
bottom：将周围文本的第一行与图像的底端对齐

六、表格

6.1基本表格结构
<table>:创建表格，表格内容逐行编写
<tr>:用起始标签
<td>:表格中的每个单元格表示
<th>:和<td>元素的用法一样，但它作用是表示列或者行的标题(th代表table heading)

6.2
6.2 .1跨列

直接示例就行

<table>
    <tr>
        <th>
            <th>9am</th>
            <th>10am</th>
            <th>11am</th>
            <th>12am</th>
        </th>
        <tr>
            <th>Monday</th>
            <td colspan="2">Geogrphy</td>
            <td>Art</td>
        </tr>
        <tr>
            <th>Tuesday</th>
            <td colspan="3">Gym</td>
            <td>Home Ec</td>
        </tr>
    </tr>
</table>>

可以看一下包含单词“Geography”的单元格，可以看见单元格中的consplan的特性值为2，这表明单元格跨两列。在第三行中，“Gym”所在的单元格跨行2列。

6.2.2跨行
直接示例

<table>
    <tr>
        <th></th>
        <th>ABC</th>
        <th>BBC</th>
        <th>CNN</th>
    </tr>
    <tr>
        <th>6pm-7pm</th>
        <td rowspan="2">Movie</td>
        <td>Comedy</td>
        <td>News</td>
    </tr>
    <tr>
        <th>7pm-8pm</th>
        <th>Sports</th>
        <th>Current Affairs</th>
    </tr>
</table>

用rowspan特性来表明单元格多要跨越的行数。
ABC在6点到8点之间播出电影，然而BBC和CNN频道在同样的时间段都播出两套节目（每套节目秩序一个小时）。
看一下最后一个<tr>元素，尽管在下面的结果途中显示为4列，但它仅包含3个元素中的Movie单元格使用了rowspan特性，使得这个单元格乡下延伸并占据了在其下面的单元格。

6.2.3 长表格
<thead>：表格的标题放在
<tbody>：表格的主体部分
<tfoot：表格的脚注
示例：

<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Income</th>
            <th>Expenditure</th>
        </tr>
    </thead>
        <tbody>
            <tr>
                <th>1st Janauary</th>
                <td>250</td>
                <td>36</td>
            </tr>
            <th>2nd January</th>
            <td>285</td>
            <td>48</td>
        <!-- additional rows as above -->
        <tr>
            <th>31st January</th>
            <td>129</td>
            <td>64</td>
        </tr>
        <tfoot>
            <tr>
                <td></td>
                <td>7824</td>
                <td>1241</td>
            </tr>
        </tfoot>
</table>

6.3旧代码
6.3.1.宽度和间隔

<table width="400" cellpadding="10" cellpadding="5"> <!-- cellpading是增加的表格内边距-->
    <tr>
        <th width="150"></th>
        <th>WithDraw</th>
        <th>Credit</th>
    </tr>
    <tr>
        <th>January</th>
        <th>250.00</th>
        <td>660.50</td>
        <td>410.00</td>
    </tr>
    <tr>
        <th>February</th>
        <th>135.55</th>
        <th>895.20</th>
        <td>1170.15</td>
    </tr>
</table>

width特性用于其实标签<table>，它用来指明表格的宽度，还用于起始标签<th><td>用来指定特定单元格的宽度。cellpadding特性为表哥

6.3.2 边框和背景

<table border="2" bgcolor="#efefef"> <!-- cellpading是增加的表格内边距-->
   <tr>
       <th width="150"></th>
       <th>Withdrawn</th>
       <th>Credit</th>
       <th width="150" bgcolor="#cccccc">Balance</th>
   </tr>
   <tr>
       <th>January</th>
       <th>250.00</th>
       <td>660.50</td>
       <td bgcolor="#cccccc">410.50</td>
   </tr>
   <tr>
       <th>February</th>
       <td>135.55</td>
       <td>895.20</td>
       <td bgcolor="#cccccc">1170.15</td>
   </tr>
</table>

示例表格

<!DOCTYPE html>
<html>
<head>
    <title>Tables</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th scope="col">Home starter hosting</th>
                <th scope="col">Premium business hosting</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Disk space</th>
                <td>250MB</td>
                <td>lgb</td>
            </tr>
            <tr>
                <th scope="row">Bandwidth</th>
                <td>5gb per month</td>
                <td>50gb per month</td>
            </tr>
            <!--more rows like the two above here-->
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td colspan="2">Sign up now and save 10%!</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

第五章的小结

1.<table>元素用来向网页中添加表格
2.表格是逐行绘制的。行是由<tr>元素创建的
3.每行中都有一定数量的由<td>元素（表格式标题是使用<th>元素）表示的单元格
4.可利用rowspan和colspan特性来使表格中的单元格跨越多行或者多列
5.对于长表格，课将表格分为<thead>、<tbody>、<tfoot>三部分

七、表单

7.1、表单结构

7.1.1 表单结构

<form action="http://www.baidu.com/index.php" method="get">
    <p>
        this is where the form control will apper
    </p>
</form>>

<form>:表单控件位于此元素中，每个<form>元素需要设置action、method、id特性
action:每个<form>元素都需要一个action特性，其特性值是服务器上一个页面的url，这个页面用来在用户提交表单的时候接受表单中的信息。

7.1.2 单行文本框

<form action="http://www.example.com/login.php">
    <p>
        Username:
        <input type="text" name="Username" size="15" maxlength="30"/>
    </p>
</form>

7.1.3 密码框

<form action="www.example.com/login.php">
    <p>Username:
        <input type="text" name="username" size="15" maxlength="30">
    </p>
    <p>Password:
        <input type="password" name="password" size="15" maxlength="30" />
    </p>
</form>

type="password",当type为此特性的时候，写入的文本会被自动替换为点。name特性表名密码框的名称，它将与用户输入的密码一同发送到服务器。另有size,maxlength。

7.1.4 文本域

<form action="http://www.baidu.com">
    <p>
        what did you think of this gig </p>
    <textarea name="comment" cols="20" rows="4">Enter your comments……</textarea>
</form>

<textarea>元素是用来创建多行文本框。其元素为非空元素，因此它包含其实标签和结束标签。页面加载是，在其实标签<textarea>和结束标签</textarea>之间出现的所有文本经显示在相应的文本框中。

7.1.5单选按钮

<form action="http://www.exampple.com">
    <p>
        Pelese select your favorite gengre:
        <br />
    <input type="rado" name="gengre" value="rock" checked="checked" /> Rock
    <input type="radio" name="gengre" value="pop" checked="checked" /> Pop
    <input type="radio" name="gengre" value="jazz" checked="checked" />Jazz
    </p>
</form>

type="radio" 单选按钮只让用户从一个系列选项中选择其中一个

7.1.6 复选框

<form action="http://www.example.com/profile.php">
    <p>please select your favorite music service(s):
        <br />
    <input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes
    <input type="checkbox" name="service" value="lastfm" /> Last.fm
    <input type="checkbox" name="service" value="spotify" /> Spotify
    </p>
</form>

type="checkbox"允许用户在回答一个问题时选择（和取消选择）一个或多个选项

7.1.7 下拉列表框

<form action="http://www.example.com/profile.php">
            <p>Do you play any of the following instruments? (You can select more than one option by holding down control on a PC or command key on a Mac while selecting different options.)</p>
            <select name="instruments" size="3" multiple="multiple">
                <option value="guitar" selected="selected">Guitar</option>
                <option value="drums">Drums</option>
                <option value="keyboard" selected="selected">Keyboard</option>
                <option value="bass">Bass</option>
            </select>
        </form>

<select>用来创建下拉列表框，它包含两个或者两个以上的<option>元素。

7.1.8 多选框

<html>
    <head>
        <title>Multiple Select Box</title>
    </head>
    <body>
        <form action="http://www.example.com/profile.php">
            <p>Do you play any of the following instruments? (You can select more than one option by holding down control on a PC or command key on a Mac while selecting different options.)</p>
            <select name="instruments" size="3" multiple="multiple">
                <option value="guitar" selected="selected">Guitar</option>
                <option value="drums">Drums</option>
                <option value="keyboard" selected="selected">Keyboard</option>
                <option value="bass">Bass</option>
            </select>
        </form>
    </body>
</html>

multiple特性允许用户从这一列表中选择多个选项

7.1.9文件上传域

<form action="http://www.example.com/upload.php" method="post">
    <p>Upload your song in mp3 format</p>
    <input type="file" name="user-song"><br/>
    <input type="submit" name="Upload">
</form>

type="file"这种类型的input会创建一个附有browse按钮的类似文本框的控件

7.1.10 提交按钮

<form action="http://www.example.com/subscribe.php">
            <p>Subscribe to our email list:</p>
            <input type="text" name="email" />
            <input type="submit" name="subscribe" value="Subscribe" />
        </form>

type="submit"提交按钮用来将表单发送到服务器。

7.1.11图像按钮

<form action="http://www.example.org/subscribe.php">  
    <p>Subscribe to our email list:</p>  
    <input type="text" name="email" />  
    <input type="image" src="[images/subscribe.jpg](http://www.htmlandcssbook.com/code-samples/chapter-07/images/subscribe.jpg)" width="100" height="20" />  
</form>

type="image" 将图像使之成为提交按钮

7.1.12按钮和隐藏控件

<form action="http://www.example.com/add.php">
            <button><img src="images/add.gif" alt="add" width="10" height="10" /> Add</button>
            <input type="hidden" name="bookmark" value="lyrics" />
        </form>

type="hidden"这个实例中展示了一个隐藏表单控件

7.1.13 标签表单控件

<label>Age: <input type="text" name="age"/></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender" value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>

<label>元素代替简单的文本，for特性用来生命标签控件标注的是哪个表单控件

7.1.14组合表单元素

<fieldset>
    <legend>Contact details</legend>
    <label>Email:<br />
    <input type="text" name="email" /></label><br />
    <label>Mobile:<br />
    <input type="text" name="mobile" /></label><br />
    <label>Telephone:<br />
    <input type="text" name="telephone" /></label>
</fieldset>

<fieldset>元素中相关的表单控件可分为一组，显示fieldset的时候会附带一条边缘线。<legend>元素可以直接跟在起始标签<fieldset>的后面并且包含一个标题。

7.2HTML5

7.2.1表单验证

最后编辑于：2019.02.24 12:06:18

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 219,366评论 6赞 508
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,521评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 165,689评论 0赞 356
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,925评论 1赞 295
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,942评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,727评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,447评论 3赞 420
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,349评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,820评论 1赞 317
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,990评论 3赞 337
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,127评论 1赞 351
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,812评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,471评论 3赞 331
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,017评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,142评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,388评论 3赞 373
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,066评论 2赞 355