html常用标签

1、em/strong/span

　　<span>　　　　　 正常字体内容，设置与普通字体不同的样式

　　<em>　　　　　　斜体，表示强调语义

　　<strong>　　　 　 加粗字体，表示强调语义

　　例子：

　　　　<p>第一段</p>
　　　　<p><span>第二段<span></p>
　　　　<p><em>第三段</em></p>
　　　　<p><strong>第四段</strong></p>

 　　　　　　

 

2、q/blockquote

　　<q>　　　　　　   引用一句话，给这句话加双引号

　　<blockquote>　　  缩进样式

　　例子：

　　　　<p><q>感情有着极大的鼓舞力量</q><p>
　　　　<p><blockquote>感情有着极大的鼓舞力量</blockquote></p>

　　　　　　

 3、br/&nbsp

　　　　<br>　　　　  换行

　　　　&nbsp　　　   空格，html代码中输入多个空格或回车，在浏览器中只占一个空格位置，要想输入多个空格，可以使用多个 

　　　　例子：

 

　　　　<p>一行白鹭上青
　　　　　　天</p>
　　　　<p>一行白鹭上青    天</p>
　　　　<p>一行白鹭上青&nbsp&nbsp&nbsp&nbsp天</p>
　　　　<p>两岸猿声啼不住</p>
　　　　<br>
　　　　<p>风萧萧兮易水寒</p>

　　　　　　

4、hr　　　　水平横线

　　　　例子：

　　　　<p>风萧萧兮易水寒</p>
　　　　<hr />
　　　　<p>壮士一去兮不复还</p>

　　　　　　

5、address　　　　一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签　　

　　　　例子：

　　　　<p>公司地址：<address>广东省深圳市科技园</address></p>

　　　　　　

 6、ul　　　　没有前后顺序的信息列表

　　　　例子：　　

　　　　<ul>
　　　　　　<li>第一个</li>
　　　　　　<li>第二个</li>
　　　　　　<li>第三个</li>
　　　　</ul>

　　　　

7、ol　　　　有序列表

 　　　　例子：

　　　　<ol>
　　　　　　<li>有序1</li>
　　　　　　<li>有序2</li>
　　　　　　<li>有序3</li>
　　　　</ol>

　　　　　　

　　　　注：有序与无序的差别：（1）有序列表有start属性 ，最大序号为999 ；无序列表无start属性（2）有序列表前面有序号（序号形式由type属性值决定），无序列表前面没序号,只有圆点（圆点样式由type属性值决定）

 

8、表格元素

　　（1）table：　　 整个表格以<table>标记开始、</table>标记结束。

　　（2）tbody：　　如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

　　（3）thead：　　定义表格的表头。该标签用于组合 HTML 表格的表头内容。

　　（4）tr：　　表格的一行，所以有几对tr 表格就有几行。

　　（5）th：　　表格的头部的一个单元格，表格表头。

　　（6）td：　　表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

　　（7）caption   表格标题

　　　　例子：

　　　　<table>
　　　　　　<thead>
　　　　　　　　<tr>
　　　　　　　　　　<td>第一</td>
　　　　　　　　　　<td>第二</td>
　　　　　　　　</tr>
　　　　　　</thead>
　　　　　　<tbody>
　　　　　　　　<tr>
　　　　　　　　　　<th>表头一</th>
　　　　　　　　　　<th>表头二</th>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td>数据一</td>
　　　　　　　　　　<td>数据二</td>
　　　　　　　　</tr>
　　　　　　</tbody>
　　　　</table>

　　　　　　

 

　　　　可以看到这个表格是没有边框的，那么可以设置一下table的css：<table style="border: 1px solid blue">，效果如下：

　　　　　　

 9、<a>

　　　　<a>　　超链接，默认在当前窗口打开；target="_blank"：在新窗口打开。

　　　　　　<a href="目标网址" title="鼠标放在上面显示的文本">链接显示的文本</>

　　　　　　<a href="目标网址" title="鼠标放在上面显示的文本" target="_blank">链接显示的文本</a>

　　　　　例子：

　　　　　　<a href="http://www.baidu.com" title="百度">给我一首歌的时间</a>
　　　　　　<a href="http://www.baidu.com" title="百度一下" target="_blank">给我一首歌的时间</a>

　　　　　　

10、img

　　　　<img src="图片的地址" title="鼠标放在图片上显示的文本" alt="图片加载失败时显示的文本">

　　　　例子：

　　　　<img src="/info/upimg/allimg/181206/0I20UG4-0.jpg" title="我的图片" alt="图片加载失败">

　　　　　　

11、form表单

　　　　<form>　　以<form>开始，以</form>结束；

　　　　<action>　 说明浏览器输入的数据要传送到的地方

　　　　<method>   数据传送方式，post或者get

　　　　例子：

　　　　<form method="post" action="html.jsp">
　　　　　　<label for="username">用户名：<input type="text" name="username" id="username"/></label>
　　　　　　<label for="password">密码：<input type="password" name="password" id="password"/></label>
　　　　　　<input type="submit" value="确定" name="submit" />
　　　　　　<input type="reset" value="重置" name="reset" />
　　　　</form>

　　　　 

 

12、textarea文本域

　　　　<textarea cols="列数" rows="行数">默认值<textarea>

　　　　注：col和row可以使用height和width替代

 　　　　　　

 

13、单选框与复选框

　　　　<input type="radio/checkbox" value="值" name="名称">

　　　　　　（1）radio　　单选框

　　　　　　（2）checkbox　　多选框

　　　　　　（3）value　　　　提交到服务器的数据

　　　　　　（4）name　　　　控件名字，作为单选框时该值要一致

 　　　　　　

14、select下拉框

　　　　<option value="提交给服务器的值" selected="selected">显示的值</option>　　　　

　　　　selected="selected"表示下拉框默认选择该选项

　　　　multiple="multiple"表示下拉框可以进行多选

　　　　例子：　

　　　　<form action="html.jsp" method="post">
　　　　　　<span>请选择你所在的地区：</span>
　　　　　　<select multiple="multiple">
　　　　　　<option value="广东">广东</option>
　　　　　　<option value="北京" selected="selected">北京</option>
　　　　　　　　<option value="上海">上海</option>
　　　　　　　　<option value="天津">天津</option>
　　　　　　</select>
　　　　</form>

　　　　　　

　　　　　　

15、使用提交按钮，提交数据

　　　　<input type="submit" value="提交" />

　　　　注：type为submit时，才会有提交按钮，value则是按钮显示的值

　　　　例子：

　　　　<form action="html.jsp" method="post">
　　　　　　<span>性别：<span>
　　　　　　<input type="text" />
　　　　　　<input type="submit" value="提交" />
　　　　</form>

　　　　　　

 16、表单重置按钮reset

　　　　<input type="reset" value="重置" />

　　　　例子：　

　　　　<form method="post" action="html.jsp">

　　　　　　<label for="phone">电话号码:<input type="text" id="phone"/></label>
　　　　　　<label for="name">姓名:<input type="text" id="name"/></label>
　　　　　　<input type="reset" value="重置" />

　　　　</form>

　　　　　　

　　　　点击重置按钮后：

　　　　　　

17、label标签

　　　　label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

　　　　例子：

　　　　<label>你对什么运动感兴趣</label><br>
　　　　<label for="run">慢跑<input type="checkbox" id="run" /></label>
　　　　<label for="pa">登山<input type="checkbox" id="pa" /></label>
　　　　<label for="boss">篮球<input type="checkbox" id="boss" /></label>

 　　　　　　

 

 

　　　　

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有