一、什么是HTML

HTML是超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。

二、HTML文档的结构

HTML文档主要包括三大部分：文档声明部分、<head>头部部分、<body>主体部分。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>我的第一个网页</title>
  6.     </head>
  7.     <body>
  8.     </body>
  9. </html>

<!DOCTYPE html>  →这是HTML文档的声明部分，在html5中，已经被简化成了此样式。

需要注意的是：文档声明必须有！而且必须在文档页面的第一行！

三、HTML的基本标签

1.<head>头部部分

head标签内信息用于描述网页，即元数据（描述网页的基本信息）。

1.1meta标签

meta标签描述文档类型和编码、可以描述网页的关键字keywords和描述description。

meta标签常用属性：
    1.1.2 charset：设置文档的字符集编码格式
                    比如说Html5中设置字符集编码 <meta charset="UTF-8">
                             >>>常见的几种字符集编码格式：
                                    a.UTF-8 ：万国码，又称 Unicode8（此外还有Unicode16）。常用！
                                    b.GB-2312 ：国标码。
                                    c.GBK ：扩展的国标码。

1.1.2 http-equiv:将信息写给浏览器看，让浏览器按照这里面的要求执行，需要配合content属性使用。
                     （http-equiv属性只是表明需要设置那一部分，具体的设置内容，放到content属性中）。
                      可选属性值： Content-Type（文档类型） refresh（自动刷新）set-Cookie(设置浏览器cookie缓存) 。

1.1.3 name：使用方法同"http-equiv"将我们的信息写给搜索引擎看的。
                 常用且需要掌握的属性值：author（作者）keywords（关键字）description（网页描述）。

1.2title标签

网页的标题，即网页的选项卡上的文字

1.3link标签

链接网页与其他文件。

↓下面举个栗子↓

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <meta name="author" content="http://www.xxxxx.com"/>
  6.          <meta name="keywords" content="HTML5,网页,web前端开发"/>
  7.          <meta name="description" content="这是我的第一个网页"/>
  8.          <title>我的第一个网页</title>
  9.      　　 <link rel="icon" href="ivicon.png">
  10.      </head>
  11.      <body>
  12.      </body>
  13.  </html>

2.<body>主体部分

2.1 标签的分类

a.块级标签，显示为块，前后隔一行（自动换行）。
     b.行级标签 ，按行从左往右逐一显示。

2.2 常见的块级标签

a.标题标签：<h1></h1>......<h6></h6>   特点:h1最大，h6最小，自动加粗。

b.水平线标签：<hr/>

c.段落标签：<p></p>

d.换行标签：<br/>

e.引用标签：<blockquote></blockquote>
             重要的cite属性表明引用的来源，一般为网址，且网址不会在网页中展示
             浏览器一般显示为首行缩进

f.预格式标签：<pre></pre>
             浏览器默认显示样式：①显示为等宽字体
                                         ②代码中的换行，空格等元素可在浏览器中直接显示。

↓下面举个栗子↓

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>常见的块级标签</title>
  6.     </head>
  7.     <body>
  8.         <h1>h1标题标签</h1>
  9.         <h2>h2标题标签</h2>
  10.         <h3>h3标题标签</h3>
  11.         <h4>h4标题标签</h4>
  12.         <h5>h5标题标签</h5>
  13.         <h6>h6标题标签</h6>
  14.         <hr/>
  15.         <p>这是段落标签，=w= <br />这里是一段文字哟</p>
  16.         <p>只是第二段 <br />=w= look at me!!! </p>
  17.         <blockquote cite="此处一般为网址">
  18.             横眉冷对千夫指，俯首甘为孺子牛
  19.         </blockquote>
  20.         <pre>一二三四五
  21.                           一二三四五</pre>
  22.         </body>
  23. </html>

2.3 基于布局的块级标签

列表:无序列表、有序列表、定义列表（图文结合）。

a.有序列表
     <ol> （order list缩写）
     　　<li>...</li> 列表项可以有n多个
     　　<li>...</li>
     　　<li>...</li>
     </ol>

b.无序列表
     <ul> (unorder list)
     　　<li>...</li> n多个
     　　<li>...</li>
     　　<li>...</li>
     </ul>

c.定义描述列表
     <dl>
     　　<dt>一般只有一项</dt> （列表标题）（标题顶格显示）
     　　<dd>可以有很多项</dd> （列表描述项）（描述项相对标题缩进显示）
     　　<dd>。。。。。</dd>
     　　<dd>。。。。。</dd>
     </dl>

d.组合标签 显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。
     <figure>
     　　<img/> 图片
     　　<figcaption></figcaption> 图片的标题。
     </figure>

e.分区标签

<div></div>  可以包裹任何标签，也可以被包裹进任何标签。

↓下面举个栗子↓

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>基于布局的块级标签</title>
  6.     </head>
  7.     <body>
  8.         <ol>
  9.             <li>这是第一项</li>
  10.             <li>这是第二项</li>
  11.             <li>这是第三项</li>
  12.         </ol>
  13.         <ul>
  14.             <li>无序1</li>
  15.             <li>无序2</li>
  16.             <li>无序3</li>
  17.         </ul>
  18.         <dl>
  19.             <dt>这是定义列表的标题</dt>
  20.             <dd>这是描述项1</dd>
  21.             <dd>这是描述项2</dd>
  22.             <dd>这是描述项3</dd>
  23.         </dl>
  24.         <!--嵌套时，HTML标签一定不能交叉！！-->
  25.         <figure>
  26.             <img src="../img/ivicon.png"/>
  27.             <figcaption>这是图片标题</figcaption>
  28.         </figure>
  29.         <div style="width:100px ;height: 20px;background-color: blue;">这是一个div
  30.         </div>
  31.        </body>
  32. </html>

2.4 行级标签

行级标签主要有：<span>

<em><i>

<strong><b>

<q>

<small><big>

<img>

<a>

↓行级标签的写法及注意事项如下↓

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>常见的行级标签</title>
  6.     </head>
  7.     <body>
  8.         <a name="top"></a>
  9.         <!--span（文本）-->
  10.         <span style="color: red;font-size: 36px;background-color: yellow;">这是span中的文字（作用：无实际意义，对于某些<span style="color: blueviolet;">特别的文字</span>进行样式修改时用此标签包裹）</span>
  11.  
  12.         <br />
  13.         <!--em（强调）-->
  14.         这是一句话，<em>重点</em>在这里
  15.         <!--两者都是斜体，但前者拥有更着重的语气，而后者不具备这一点-->
  16.  
  17.         <br />
  18.         <!--i（倾斜）-->
  19.         这是一句话，<i>重点</i>在这里
  20.  
  21.         <br />
  22.         <!--strong（强调）-->
  23.         这是一句话，<strong>重点</strong>在这里
  24.         <!--两者的区别同上-->
  25.  
  26.         <br />
  27.         <!--b（加粗）-->
  28.         这是一句话，<b>重点</b>在这里
  29.         <!--[注意] 1.强调程度来说：  strong>em；
  30.                    2.HTML5语言，要求标签尽可能的
  31.                        实现语义化。（strong与em所包含的b与i不具备的强调含义）
  32.            -->
  33.  
  34.         <br />
  35.         <!--q（短引用）显示为文字用引号包括-->
  36.         <q cite="">知识短引用中的文字</q>
  37.  
  38.            <br/>
  39.         <!--small（缩小字体）big（放大字体） 【两者可以多重嵌套,但不常用】-->
  40.         <small>这个<small>比上面的<small>小</small></small></small>
  41.         <br/>
  42.         <big>这个<big>比上面的<big>大</big></big></big>
  43.  
  44.         <br />
  45.         <!--img（图片）
  46.             1.src: 表示引用图片的地址
  47.               路径地址的写法：a.★相对路径：以当前文件为准去寻找图片地址。
  48.                                   与当前文件处于同一层的图片直接写图片及其后缀名；
  49.                                   图片在当前文件下一层：文件夹名/图片名
  50.                                   图片在当前文件上一层：../图片名
  51.                             b.绝对路径：严禁使用！！例如file:///D:/111.gif
  52.                             c.网络地址：网络上的图片链接。但是，一般不使用。
  53.             2.height width ： 图片的高度和宽度，可以用css样式(style="height: ;width: ;")所代替
  54.             3.title ：图片的标题，当鼠标之上后显示的文字。
  55.             4.alt:当图片无法加载的时候显示的文字。
  56.            *5.Align：图片两边文字所对应图片的位置。（top center bottom）
  57.         -->
  58.         <img src="此处为网络地址"/>
  59.         <!--以上为网络地址写法-->
  60.         <img src="此处为路径"/>
  61.         <!--以上为绝对路径写法-->
  62.         <img src="../img/ivicon.png"/>
  63.         <img src="ivicon.png" />
  64.         <img src="练习用图/ivicon.png" />
  65.         <!--以上为相对路径写法-->
  66.         <a name="weixin"><img src="练习用图/ivicon.png" style="height:100px ;width:100px ;"title="哈啊哈" alt="这里没显示"/></a>
  67.         <br />
  68.         <img src="QQ图片20170223092045.jpg"/ align="center">12333333333
  69.         <br />
  70.         <!--a（超链接）
  71.             1.href:超链接的路径(网络连接或者本地文件)，路径确定同img。
  72.             2.target:blank 新页面打开  self 自身跳转
  73.             3.title:同上
  74.             4.rel（了解）：指定当前文档与被连接文档的关系
  75.                 prev（前一片）
  76.                 next（后一篇）
  77.                    ★icon (被链接图片是当前文档的图标)
  78.                    ★stylesheet（被链接文档是当前文档的样式表）
  79.                 prefetch（预加载，当你在当前文档加载完成，利用空余时间，预加载即将链接文档）
  80.             5.锚链接：
  81.                 a.本页面锚链接   s1.设置锚点<a name="name"></a>
  82.                                s2.在超链接上使用 #name 跳转到对应锚点
  83.                 b.页面间锚链接
  84.                                在即将跳转的页面某位置设定锚点<a name="name"></a>
  85.                                在超链接的href属性中使用"页面地址.html#name"
  86.             6.功能性链接：
  87.                 mailto：邮箱地址    用于给指定邮箱发送文件
  88.                 tencen://message/?uin=qq号码  给指定qq发送消息
  89.  
  90.         -->
  91.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  92.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  93.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  94.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  95.         <a href="#weixin" target="_self">这是一个超链接，去看微信的</a>
  96.         <a href="练习1.html#qq" target="_self" title="aaaaa">这个是练习一，自身跳转的</a>
  97.         <a href="mailto:xxxxxxx@qq.com">这里发邮件</a>
  98.         <a href="tencen://message/?uin=xxxxxxx">这里发信息</a>
  99.         <a href="ivicon.png" target="_blank">picture</a>
  100.     </body>
  101. </html>

2.5 表格

2.5.1 表格的结构

表格元素：行 列 格
        表格 <table></table>
        表格的行 <tr></tr>
        每行中的列 <td></td>
        表格的表头 <th></th>（ 默认加粗，单元格居中。）

2.5.2 table的常见属性
     1.border 边框，其增大时，只增加外围框线，单元格边框始终为1像素
     2.cellspacing 单元格之间的间隙距离,当=0的时候，只会是单元格的
     间隙等于0，但不会合并边框线，此时表格中线为两个像
     素，若想使其合并，则★使用 style="border-collapse:collapse"★
     3.cellpadding 单元格里边的文字与边框线的距离(不常用)
     4.width height 宽度和高度
     5.align 表格的对齐方式
       【left right center】
       【注意事项：相当于让表格浮动，会影响其后的元素的原有排列方式】
     6.bgcolor 单元格的背景色，等同于style="background-color:;"
     7.background 单元格的背景图片,等同于style="background-image:;"
     且背景图会覆盖背景色
     8.bordercolor 边框的颜色

2.5.3 tr td（th）相关属性
     1.width height 单元格的宽度和高度
     2.bgcolor 单元格的背景颜色
     3.align (left right center)单元格中的文字水平对齐方式(text-align 文本居中)
     4.valign (top center bottom)单元格中的文字垂直对齐方式
     5.nowrap 单元格中文字不换行

【注意】当表格属性与行列属性相冲突时，以行列属性为准
                         （近者优先！！！）
table中的align控制表格在整个浏览器中的显示位置！
单元格中的align控制其中文字在单元格中的对齐方式！
表格的align属性并不影响单元格内文字的水平对齐方式！
tr的align属性可以控制一行中所有单元格的水平对齐方式！

2.5.4 表格的跨行和跨列
        跨行：colspan="n列" N行对应删除右边N-1行。
        跨列：rowspan="n行" N列对应删除右边N-1列。

↓下面举个栗子↓

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>表格</title>
  6.     </head>
  7.     <body>
  8.         <table width="500" height="200" border="5" style="border-collapse:collapse" cellpadding="20" align="center" bgcolor="aqua" bordercolor="red">
  9.         <caption>我是表格的标题</caption>
  10.         <tr>
  11.         <th width="150" bgcolor="bisque"align="left"valign="top"nowrap="nowrap">表头1</th>
  12.         <th colspan="3">表头2</th>
  13.         </tr>
  14.         <tr>
  15.             <td rowspan="2">1-1</td>
  16.             <td>1-2</td>
  17.             <td>1-3</td>
  18.             <td>1-4</td>
  19.         </tr>
  20.         <tr>
  21.             <td>2-2</td>
  22.             <td>2-3</td>
  23.             <td>2-4</td>
  24.         </tr>
  25.     </table>
  26.     </body>
  27. </html>

2.6 文本级语义

↓写法及注意事项如下↓

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>文本级语义</title>
  6.     </head>
  7.     <body>
  8.         <s>this is wrong</s>
  9.         <br />
  10.         <cite>this is cite</cite>
  11.         <br />
  12.         <pre><code>这里面是计算机代码，但不会保留代码格式，需配合pre标签使用</code></pre>
  13.         <br />
  14.         <bdo dir="rtl">千万不要倒过来念</bdo>
  15.         <!--rtl从右往左 ；ltr从左往右-->
  16.         <br />
  17.         请输入<kbd><span style="color: red;">红色文字部分</span></kbd>退出系统
  18.         <!--表示需要用户输入的内容，浏览器显示为等宽字体-->
  19.         <br />
  20.         文本<sup>这是上标文本</sup>
  21.         <br />
  22.         文本<sub>这是上标文本</sub>
  23.         <br />
  24.         &copy;这是版权符号
  25.         <br />
  26.         <u>下划线</u>
  27.         <br />
  28.         <time datetime="0214">这是time标签  12:12</time>
  29.         <br />
  30.         <mark>这是mark标签，高亮或标记文本，浏览器显示为黄色背景</mark>
  31.         <br />
  32.         <date>这是Date标签</date>
  33.  
  34.     </body>
  35. </html>

2.7 表单

2.7.1 表单 form
         一般情况下与table一起使用，但两者互不影响
2.7.2 重要属性（缺一不可）：
        action="表单提交地址"（各种后台语言）<空白则提交本页面>
        method="提交方法"（两个属性值：post[比较安全] get）
  get post的区别：

get： http://127.0.0.1:8020/HTML5%3d1701wk/HTML基本标签/D4-练习9.html?username=wk&password=12345
  post：http://127.0.0.1:8020/HTML5%3d1701wk/HTML基本标签/D4-练习9.html

1.get： 使用url传参：http://服务器地址？name1=value1&name2=value2
（？表示传递参数，？后面采用name=value的形式传递，多个参数之间用&链接）
  ① url传参不安全，所有信息都可以在地址栏看到，并且可以通过地址栏随意传递其他数据，很容易被攻击数据库。
  ② url传参数据量有限，只能传递少量数据。
  2.post: 使用http请求传递数据。url地址栏不可见，比较安全，且传递数据量没有限制。

All in all：一般用post！

2.7.3 input常用属性：
      1.type ：表示input输入框的类型.
      2.name ：input输入框的别名，一般情况下，必填。因为传递数据时使用name=value的形式传递。
      3.value：input输入框的默认值。
      4.placeholder：input的提示内容，当输入框有value的时候提示内容消失。
      5.tabindex="n"（了解）：控制点击tab键时的跳转顺序，从最小的开始，逐步往大的数值跳转，获得焦点。

2.7.4 input特殊属性：
     1.checked="checked"默认选中。
     2.disabled="disabled"设置控制不能使用，用在按钮上不能点击，用在输入框上不能修改。
                                   而且如果输入框disabled，则输入框信息不能往后台传递。
     3.hidden="hidden"隐藏域传值。常用于配合disabled或根据其他需要使用隐藏域传值。

2.7.5 input-type属性详解：
     1.text：文本输入框。
     2.password：密码输入框，输入内容是显示小黑点。
     3.radio：单选按钮。
              ① name和value属性必须同时存在，提交时，提交的是value的属性值。
              ② radio凭借name属性区分是否为同一组，name相同为同组，同组中只能选择一个。
              ③ checked="checked"（或者只写checked）表示默认选择的选项。
        checkbox：复选按钮。（radio只能选一个，checkbox能选多个）
     4.reset：重置表单数据。将表单数据重置为初始状态。
     5.file：文件上传按钮。现在不常用，常用JS来做。
     6.submit：提交按钮，提交表单数据。
     7.image:图形提交按钮。功能同submit，可以提交数据。
     8.button：普通按钮，没有任何功能。

2.7.6 下拉框控件select（单选/多选）:
      1.写法 ：
        <select>
        <option>可以有n多个</option>
        </select>
     2.name属性应该写在<select></select>上,所有选项只有一个name。
     3.option常用属性：
      ① value：当没有value时，传输的是<option></option>内的文字，当value存在时，传输的是value的值。
      ② title：鼠标之上后显示的文字。
      ③ selected=selected:默认选中。
     4.multiple设置select为多选。（一般不用，体验太差。ctrl+鼠标进行多选。）
     5.optgroup：用于将option标签进行分组，用lable表示分组名。（不常用）

2.7.7 textarea文本域：
      1.写法
      <textarea></textarea>
      2.常见属性：
      ①cols="" rows=""行列（不常用）
        style="width:;height:;"(常用)
      ②readonly="readonly"不允许编辑。
      ③style="resize：none;"固定宽高，设置为其不允许修改：
      ④style="overflow：;"设置当文字超出区域是如何处理，并不是textarea的专属，div亦可。
               常用属性值：hidden超出区域的文字隐藏无法显示；
               scroll无论文字多少均会出现纵横滚动条；
               auto自动，根据文字多少自动决定是否出现滚动条；
               也可以通过overflow-x -y分别设置水平垂直方向的显示方式。

2.7.8 其他属性(不常用)：
         <fieldset> [给form表单加上外框]
         <legend>此处是标题</legend>
         </fieldset> [注意：如果想让标题嵌入到边框中，需将标题标签写入到边框标签里面。]
                          [一个表单可以有多个边框组合。]

2.7.9 HTML5智能表单
      1.H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，
即可通过表单进行提交。
      2.type新增属性，详见表格。
      3.input元素新增属性：
           Autocomplete：自动完成功能——记录用户之前输入的内容，并在下次输入时自动提示完成输入。
                                【注意】属性值只有两个：on off
                                 可以在form表单上使用，对整张表单的所有空间进行自动完成的开关。
                                 也可以在input上使用，对特定输入框进行修改。
                                 绝大部分浏览器，默认开启。
          Autofocus：自动获得焦点
                          【注意】只能设置一个input元素，自动获得焦点。
          Form：所属表单：通过form表单的id，确定此input输入哪张表单。
          Required：必填 设置input必填，否则阻止提交。
          Pattern：使用正则表达式验证input的模式（详见后续）
          Placeholder：提示内容，当有value时，取消提示。

↓下面举个栗子↓

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>表单</title>
  6.     </head>
  7.     <body>
  8.         <input type="color" name="1" form="1">
  9.         <form action="" method="get" id="1">
  10.             <table >
  11.                 <tr>
  12.                     <td>用户名</td>
  13.                     <td><input type="text" name="username" placeholder="请输入用户名" hidden="hidden"disabled="disabled"value="11111"/></td>
  14.                 </tr>
  15.                 <tr>
  16.                     <td>密码</td>
  17.                     <td><input type="password" name="password" placeholder="请输入密码"/></td>
  18.                 </tr>
  19.                 <tr>
  20.                     <td><input type="submit" value="注册"/></td>
  21.                 </tr>
  22.                 <tr>
  23.                     <td><input type="reset" value="清空"/></td>
  24.                     <td><input type="file" name="value"/></td>
  25.                 </tr>
  26.                 <tr>
  27.                     <td><input type="button" value="这个按钮没啥用！"/></td>
  28.                 </tr>
  29.                 <tr>
  30.                     <td>头像</td>
  31.                     <td><input type="image" src="练习用图/ivicon.png"/></td>
  32.                 </tr>
  33.                 <tr>
  34.                     <td>性别</td>
  35.                     <td><input type="radio" name="sex" value="man" checked="checked"/>男
  36.                     <input type="radio" name="sex" value="women" />女</td>
  37.                 </tr>
  38.                 <tr>
  39.                     <td>爱好</td>
  40.                     <td><input type="checkbox" name="hobby" value="sleep" />睡觉
  41.                     <input type="checkbox" name="hobby" value="eat" />吃饭
  42.                     <input type="checkbox" name="hobby" value="play" />打豆豆</td>
  43.                 </tr>
  44.                 <tr>
  45.                     <td>城市</td>
  46.                     <td>
  47.                         <select name="city">
  48.                             <option value="1" title="11111111111">青岛</option>
  49.                             <option value="2" title="11111111111">烟台</option>
  50.                             <option value="3" title="11111111111">济南</option>
  51.                             <option value="4" title="11111111111">潍坊</option>
  52.                         </select>
  53.                     </td>
  54.                 </tr>
  55.                 <tr>
  56.                     <td>城市</td>
  57.                     <td>
  58.                         <select name="city">
  59.                             <optgroup label="山东省">
  60.                             <option value="1" title="11111111111">青岛</option>
  61.                             <option value="2" title="11111111111">烟台</option>
  62.                             <option value="3" title="11111111111">济南</option>
  63.                             <option value="4" title="11111111111">潍坊</option>
  64.                             </optgroup>
  65.                             <optgroup label="还是山东省">
  66.                             <option value="1" title="11111111111">青岛</option>
  67.                             <option value="2" title="11111111111">烟台</option>
  68.                             <option value="3" title="11111111111">济南</option>
  69.                             <option value="4" title="11111111111">潍坊</option>
  70.                             </optgroup>
  71.  
  72.                         </select>
  73.                     </td>
  74.                 </tr>
  75.                 <tr>
  76.                     <td colspan="2">
  77.                         <textarea style="width: 100px;height: 150px;resize: none;" readonly="readonly">
  78.                             这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！
  79.                         </textarea>
  80.                     </td>
  81.                 </tr>
  82.             </table>
  83.         </form>
  84.     </body>
  85. </html>

四、写在后面的话

这篇文章是小K第一次发博文，文章里可能还有许多不恰当的地方，希望各位大神能够帮忙指正，小K现在这里谢谢各位大手啦~

顺便提一下，小K都是用HBuild写的，安利给大家这个软件，感觉对于初次接触的萌新们来说，这是很好上手的一款软件~

最后提一下，浩哥好帅~

小K的H5之旅-HTML的基本结构与基本标签的更多相关文章

  1. 小K的H5之旅-HTML5与CSS3部分新属性浅见

    一.HTML部分 1.HTML5新特点 向下兼容.用户至上.化繁为简.无插件范式.访问通用性.引入语义.引入原生媒体支持.引入可编程内容 2.HTML5标签语法 可以省略的元素:空元素语法的元素{br ...

  2. 小K的H5之旅-实战篇（一）

    一.前言 本K在经过两个星期的html和css学习之后,第一次去尝试完成一个网站主页的制作.在四天之后,本K也终于完成了杰瑞教育主页的html和css部分,至于部分涉及js的部分,因为本K还没有学习过 ...

  3. 小K的H5之旅-CSS基础（一）

    一.什么是CSS W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说是CSS.CSS全称Cascadi ...

  4. 【BZOJ】3436: 小K的农场

    3436: 小K的农场 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 938  Solved: 417[Submit][Status][Discuss ...

  5. BZOJ3436 小K的农场

    Description 背景 小K是个特么喜欢玩MC的孩纸... 描述 小K在MC里面建立很多很多的农场,总共n个,以至于他自己都忘记了每个农场中种植作物的具体数量了,他只记得 一些含糊的信息(共m个 ...

  6. 洛谷P1993 小 K 的农场

    题目描述 小 K 在 Minecraft 里面建立很多很多的农场,总共 n 个,以至于他自己都忘记了每个 农场中种植作物的具体数量了,他只记得一些含糊的信息(共 m 个),以下列三种形式描 述: 农场 ...

  7. 2014.7.7 模拟赛【小K的农场】

    3.小K的农场(farm.pas/cpp/c) [题目描述] 小K在MC里面建立很多很多的农场,总共n个,以至于他自己都忘记了每个农场中种植作物的具体数量了,他只记得一些含糊的信息(共m个),以下列三 ...

  8. [51nod1457]小K vs. 竹子

    小K的花园种着n颗竹子(竹子是一种茎部中空并且长得又高又快的热带植物).此时,花园中第i颗竹子的高度是hi米,并且在每天结束的时候它生长ai米. 实际上,小K十分讨厌这些竹子.他曾经试图去砍光它们,但 ...

  9. 【BZOJ3436】小K的农场（差分约束）

    [BZOJ3436]小K的农场(差分约束) 题面 由于BZOJ巨慢无比,使用洛谷美滋滋 题解 傻逼差分约束题, 您要是不知道什么是差分约束 您就可以按下\(Ctrl+W\)了 #include< ...

随机推荐

  1. ValueStack

    1.把list集合压入栈顶 /** * * 查找所有的用户 * @return */ public String findAll() { List<User> allUser = user ...

  2. Java中的socket通信

    socket又称套接字,应用程序通常通过"套接字"向网络发出请求或应答网络请求 建立过程:服务器监听-客户端发出请求-建立链接-通信 特点:1.基于tcp链接,数据传输有保障,2. ...

  3. Docker 组件如何协作？- 每天5分钟玩转容器技术（8）

    还记得我们运行的第一个容器吗?现在通过它来体会一下 Docker 各个组件是如何协作的. 容器启动过程如下: Docker 客户端执行 docker run 命令. Docker daemon 发现本 ...

  4. NodeJS 中npm包管理工具

    NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从 ...

  5. [ext4]09 磁盘布局 - superblock备份机制

    如果sparse_super特性flag被设置(即开启了sparse_super特性),那么super_block和组描述符的副本只会保存在group索引为0或3.5.7的整数幂. 如果没有设置spa ...

  6. myeclipse离线安装PyDev

    MyEclipse装好了,用来开发java web的,一直可以用,前几天用python写爬虫,也是在myeclipse下,离线安装的包.打开后配置了一下就可以了. 这里用的是PyDev2.8.2    ...

  7. POJ 3311---Hie with the Pie（状压DP）

    题目链接 Description The Pizazz Pizzeria prides itself in delivering pizzas to its customers as fast as ...

  8. O（mn）实现LCIS

    序: LCIS即求两序列的最长公共不下降子序列.思路于LCS基本一致. 用dp[i][j]记录当前最大值. 代码实现: /* About: LCIS O(mn) Auther: kongse_qi D ...

  9. python object takes no parameters

    class Song(object): def __init__(self,lyrics): self.lyrics = lyrics def sing_me_a_song(self): for li ...

  10. centos下搭建redis集群

    必备的工具: redis-3.0.0.tar redis-3.0.0.gem   (ruby和redis接口) 分析:     首先,集群数需要基数,这里搭建一个简单的redis集群(6个redis实 ...