PPC的C/C++和人工智能学习笔记
每一篇学习笔记,都只是为了更好地掌握和理解

Web前端(2)_HTML(2)

继续学习HTML。

 

HTML标签一般可以分为两种,一种是内联标签,一种是块级标签

比如<h1></h1>,<p></p>,<div><div/>就是块级标签,至少会占一行。

<a></a>,<span></span>只占用行内一小部分(内联标签),所以可以一行写多个这样的标签。

其中<div><span>是完全通过css来控制的,其中div是块级的,span是内联的,但是也没有绝对的事情,比如div可以通过css来改造成内联标签。

我们可以用chrome的审查元素功能(F12)来观察一个标签是内联的还是块级的,当我们选择该标签的时候,假如显示至少是一行的就是块级标签,假如只显示局部就是内联标签。

 

标签,标签是可以嵌套包含的。

标签的属性:

id,name,style属性,每个标签都有的,其中id属性不能重复。

href,target属性是a标签特有的。

 

<p></p> 表示段落。段落和段落之间有间距。

<br/> 表示换行。

<hr /> 横向分割线。

<div style=”width:200px; border:1px solid red;”></div> 定义div宽度200px,红色边框1px

<body style=”word-break: break-all;”></body> 定义整个body所有字都自动换行

 

A标签:

<a href=”http://www.vsppc.com” target=”_blank”>vsppc.com</a> 在新页面打开外部链接

<a href=”about.html”>about</a> 在当前页面打开内部链接

<a href=”#T1″>看第2章内容</a> 跳转到页面内指定的id(跳转到第2章的id T1)

<div style=”height:2000px; background-color:red;”>第1章</div>

<div id=”T1″ style=”height:2000px; background-color:green;”>第2章</div>

 

Img标签

<img src=”ppc.jpg” title=”ppc的图片” style=”height:100px; width:100px;” />图片(显示的文件,显示的提示)

<h1></h1> … <h6></h6>标题从大到小,块级标签。

 

Select标签:size属性不写,默认是1,就是下拉;加上该属性就是列表框。Multiple表示可以多选,默认是单选。

<select size=”5″ multiple=”multiple”> <option>北京</option> <option>上海</option> <option>天津</option> </select>

Select的分组显示:

<select>

<optgroup label=”江苏省”>

<option value=”1″>南京</option> 一般在option中定义value属性

<option value=”2″>苏州</option>

</optgroup>

<optgroup label=”浙江省”>

<option value=”3″>杭州</option>

<option value=”4″ selected=”selected”>金华</option> selected属性,表示默认该条被选中。

</optgroup>

</select>

 

Input标签:

<input type=”checkbox” /> 复选框,方型

<input type=”radio” />    单选框,圆型

<input type=”text” />   文本框

<input type=”password” /> 密码框

<input type=”button”  value=”btn”/> 按钮

<input type=”submit” value=”sub” /> 递交按钮

<input type=”file” /> 选择文件

 

<input type=”checkbox” checked=”checked”/> 默认选中

Input的value属性是保持的默认值。

男:<input type=”radio” name=”gender” />

女:<input type=”radio” name=”gender” />

Radio属性,必须在input标签的name属性相同时才会出现互斥(就是只能选1个)。

Button和submit都不在 <form>标签下的时候,是一样的。

<form action=”login.php”>

<input type=”text” name=”host”/> 需要向后台传送数据时,必须加上name属性

<input type=”button” value=”递交1″/> 在有form的情况下,这里是不会递交的

<input type=”submit” value=”递交2″/> 在有form的情况下,这里会递交。

</form>

 

Input的type属性是file时,enctype=”multipart/form-data” method=”post”,这些属性写在<form>里面。

 

fieldset标签:

<fieldset>

<legend>健康信息</legend>

身高:<input type=”text” />

体重:<input type=”text” />

</fieldset>

把多个其他标签框起来,并可写标题(上面的”健康信息”)。

 

Textarea标签:

<textarea>默认输出数据</textarea> 多行输入。

 

Label标签:

让用户在用鼠标等操作一个文本的时候,会自动地操作与之对应的其他东西,比如复选框啥的。

<label for=”cb1″>是否已婚:</label>   <input id=”cb1″ type=”checkbox”/> 这样,在点击是否已婚的时候,也会选中或不选中后面的复选框。

 

Ul,ol,dl列表标签:

<ul><li>111</li><li>222</li><li>333</li></ul> 前面带实心黑圆点的列表。

<ol> 是带数字序号的列表;

<dl>

<dt>标题1</dt>

<dd>标题1的内容</dd>

<dd>标题1的内容</dd>

<dt>标题2</dt>

<dd>标题2的内容</dd>

<dd>标题2的内容</dd>

</dl>

 

Table标签:

<table border=”1″> <!– border边框属性–>

<!–表头数据 会加粗显示–>

<thead>

<tr> <!–表头中的列用的是 th –>

<th>第1列</th><th>第2列</th>

</tr>

</thead>

 

<!–表格数据–>

<tbody>

<tr> <!–表体中列用的是 td–>

<td>数据行1-1</td><td>数据行1-2</td>

</tr>

</tbody>

</table>

单元格合并,横向单元格合并:<td colspan=”2″>数据1,数据2</td> 我们用colspan属性来指定它占几列,rowspan属性来指定它占几行,如此可以随意合并。

 

HTML特殊字符编码大全:往网页中输入特殊字符,需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。

´    &acute;    ©    &copy;    >    &gt;    µ    &micro;    ®    &reg;

&    &amp;    °    &deg;    ¡    &iexcl;    &nbsp;    »    &raquo;

¦    &brvbar;    ÷    &divide;    ¿    &iquest;    ¬    &not;    §    &sect;

•    &bull;    ½    &frac12;    «    &laquo;    ¶    &para;    ¨    &uml;

¸    &cedil;    ¼    &frac14;    <    &lt;    ±    &plusmn;    ×    &times;

¢    &cent;    ¾    &frac34;    ¯    &macr;    “    &quot;    ™    &trade;

€    &euro;    £    &pound;    ¥    &yen;

„    &bdquo;    …    &hellip;    ·    &middot;    ›    &rsaquo;    ª    &ordf;

ˆ    &circ;    “    &ldquo;    —    &mdash;    ’    &rsquo;    º    &ordm;

†    &dagger;    ‹    &lsaquo;    –    &ndash;    ‚    &sbquo;    ”    &rdquo;

‡    &Dagger;    ‘    &lsquo;    ‰    &permil;    &shy;    ˜    &tilde;

≈    &asymp;    ⁄    &frasl;    ←    &larr;    ∂    &part;    ♠    &spades;

∩    &cap;    ≥    &ge;    ≤    &le;    ″    &Prime;    ∑    &sum;

♣    &clubs;    ↔    &harr;    ◊    &loz;    ′    &prime;    ↑    &uarr;

↓    &darr;    ♥    &hearts;    −    &minus;    ∏    &prod;    ‍    &zwj;

♦    &diams;    ∞    &infin;    ≠    &ne;    √    &radic;    ‌    &zwnj;

≡    &equiv;    ∫    &int;    ‾    &oline;    →    &rarr;

α    &alpha;    η    &eta;    μ    &mu;    π    &pi;    θ    &theta;

β    &beta;    γ    &gamma;    ν    &nu;    ψ    &psi;    υ    &upsilon;

χ    &chi;    ι    &iota;    ω    &omega;    ρ    &rho;    ξ    &xi;

δ    &delta;    κ    &kappa;    ο    &omicron;    σ    &sigma;    ζ    &zeta;

ε    &epsilon;    λ    &lambda;    φ    &phi;    τ    &tau;

Α    &Alpha;    Η    &Eta;    Μ    &Mu;    Π    &Pi;    Θ    &Theta;

Β    &Beta;    Γ    &Gamma;    Ν    &Nu;    Ψ    &Psi;    Υ    &Upsilon;

Χ    &Chi;    Ι    &Iota;    Ω    &Omega;    Ρ    &Rho;    Ξ    &Xi;

Δ    &Delta;    Κ    &Kappa;    Ο    &Omicron;    Σ    &Sigma;    Ζ    &Zeta;

Ε    &Epsilon;    Λ    &Lambda;    Φ    &Phi;    Τ    &Tau;    ς    &sigmaf;

 

HTML常用特殊字符:只要你认识了 HTML 标记,你便会知道特殊字符的用处。

HTML 原代码    显示结果    描述

&lt;    <    小于号或显示标记

&gt;    >    大于号或显示标记

&amp;    &    可用于显示其它特殊字符

&quot;    “    引号

&reg;    ®    已注册

&copy;    ©    版权

&trade;    ™    商标

&ensp;    半个空白位

&emsp;    一个空白位

&nbsp;    不断行的空白

 

 

(2017-05-03 www.vsppc.com)

学习笔记未经允许不得转载:PPC的C/C++和人工智能学习笔记 » Web前端(2)_HTML(2)

分享到:更多 ()

评论 抢沙发

评论前必须登录!