HTML元素总结

html元素

<p></p> :段落标记,会自动换行,常用于文本内容

例:<p>这是一个段落</p>

<h1> ~ <h6> :标题标记,会自动换行,字体由大到小

例:<h1>这是h1</h1>

<h2>这是h2</h2>

<h3>这是h3</h3>

<h4>这是h4</h4>

<h5>这是h5</h5>

<h6>这是h6</h6>

<br/> :换行标记

<nobr/>:强制不换行

<a></a>:链接,href属性指向链接地址,行内元素,不会自动换行

例:<a href="http://www.baidu.com">百度</a>

<a href="http://www.google.com">google</a>

<img> :图片元素,src指向图片地址,行内元素,不会自动换行

例:<img src="1.png"/>

<img src=2.png/>

<i></i>:斜体字标记,行内元素

<b></b>:粗体字标记,行内元素

<u></u>:下划线标记,行内元素

<s></s>:删除线标记,行内元素

<sub></sub>:下标标记,行内元素

<sup></sup>:上标标记,行内元素

<hr/>:分割线,单行标记

例:<i>这是i标记</i>

<b>这是b标记</b>

<s>这是s标记</s>

<u>这是u标记</u>

<sub>这是sub</sub>

<sup>这是pub</sup>

<hr/>

<div></div>:分区标记,块元素,会自动换行

<span></span>:分区标记,行内元素

表格:

<table>

<tr>

<td></td>

</tr>

</table>

<tr>:每一行

<td>:第一列

属性:

border:显示表格边框

cellspacing:单元格的外边距

cellpadding:单元格的内边距

align:表格内元素水平对齐方式

valign:表格内元素简直对齐方式

rowspan:合并行

colspan:合并列

例:

<table cellspacing="1px" cellpadding="1px" border="1px">

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

</table>

列表:

<ol></ol>:有序列表

<ul></ul>:无序列表

<li></li>:列表中子元素

例:

<ol>

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

</ol>

<ul>

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

</ul>

表单

<form></form>:表单元素

<input type="" value=""/>:输入框

属性:type="text/password/submit/button/radio/checkbox"

text:文本输入框

password:密码输入框,文本为密文

submit:提交按钮

button:普通按钮

radio:单选框

checkbox:复选框

checked:默认选中项

value:文本框提示,默认值

<textarea></textarea>:多行文本域

属性:cols :指定文本域的列数

rows:指定文件域的行数

例:

<form action="">

用户名:<input type="text" value="请输入用户名"/><br/>

密码: <input type="password" value="请输入密码"/><br/>

性别: <input type="radio" name="sex" value="man" checked/>男

<input type="radio" name="sex" value="woman"/>女

<br/>

爱好: <input type="checkbox" name="interest" value="1" checked/>蓝球

<input type="checkbox" name="interest" value="2"/>电影

<input type="checkbox" name="interest" value="3"/>音乐

<input type="checkbox" name="interest" value="4"/>散步

个人简介:<br/><textarea cols="30" rows="10">请输入个人信息<textarea><br/>

来自: <select>

<option>请选择</option>

<option>北京</option>

<option>上海</option>

</select>

<br/>

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

</form>

为控件分组

<fieldset>:为控件分组

<legend>:指定分组元素标题

例:

<fieldset>

<legend>地址信息</legend>

地址:<input type="text"/><br/>

邮编:<input type="text"/>

</fieldset>

<!-- 中间部分为注释 -->  :注释符号,中间部分在网页上不显示

特殊字符:

&nbsp;   :空格

&amp;   :&

&lt;        :<

&gt;       :>

时间: 2024-11-10 00:24:28

HTML元素总结的相关文章

【HTML5】summary交互元素

1.源码 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title>交互元素summary的使用</title> <style type="text/css"> body{ padding:5px; font-size:14px; } summary{ font-weight:bold; } </style>

【HTML5】用脚本控制交互元素details元素的使用

1.源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Con

jQuery父级以及同级元素查找的实例

父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(

移动端fixed的元素抖动的问题

工作中发现,给一个元素添加fixed属性,让它固定在窗口某个位置,直接加fposition:fixed属性就能实现这个效果: 在安卓手机上的效果都比较好,但是ios系统的个别浏览器兼容性就不好,如QQ浏览器.UC浏览器.360浏览器(这几个是ios最容易出问题的浏览器): 问题:当用户快速滑动页面的到时候,fixed的元素就会在窗口跳动或者抖动,非常影响用户体验 下面提供几个解决方案,仅供参考,如有更好更有效的解决办法,欢迎留言交流探讨! 方法一: 给body设置高度100% body,html

微信小程序布局之行内元素和块级元素

元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制. 块级元素特点总结: 1.总是在新行上开始 2.宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好等于父级元素的内容区域宽度,即父元素的width.当设定新的宽度,如果宽度是100%,并且padding.margin不为零,导致块级元素宽度溢出父元素 3.盒子模型的高度默认由内容决定 4.盒子模型中高度.宽度和内外边距都是可控制

页面滚动图片等元素动态加载插件jquery.scrollLoading.js

如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的就不用加载了.这样还可以在一定程度上节省服务器资源.该插件作者的网页将该插件的功能和使用方法描述的非常详细,这里把最一般最普遍的使用情况给大家展现一下. 插件作者:http://www.zhangxinxu.com/ 首先我们需要加载jQuery库和本插件js文件. (jquery.scrollLo

生成n个元素的全排列 C实现

近期在准备复习算法设计的考试,下边记录一些,看笔记时突然想到的解法. 问题是这种 用递归实现 n 个元素的全排列. 当时老师给出的解答是 假定第i个元素 ri 放在首位,于是 f(r1,r2,-,rn) = f(ri U {r1, r2,-.,rn}) = U (ri & f(r1,r2, -, rn)), 当时应该是听懂了,只是如今看到这个笔记.又醉了. (这货竟然是我上课记的笔记 .... . .. .) 后来自己细致想想,事实上非常简单的 一个问题, 利用回溯法,把问题看成是一个排列树.能

自定义元素(custom elements)

记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement,HTMLElement对象,所有自定义元素都是该对象的实例. var tabs=document.createElement("tabs"); console.log(tabs instanceof HTMLUnknownElement);//true console.log(tabs i

HTML中的表格、表单元素与框架的构建

表格 <table></table>表格 width: 宽度可用像素或百分比: height:高度可用像素或百分比: border:边框宽度: cellpadding:内容跟单元格边框的边距 常用0: cellspacing:单元格之间的间距  常用0: align: 对齐方式: bgcolor:背景色: <tr></tr> 行 align:一行内容的水平对齐方式: valign: 垂直对齐方式: <td></td> 单元格 <

给object数组进行排序(排序条件是每个元素对象的属性个数)

从汤姆大叔的博客里看到了6个基础题目:本篇是第3题 - 给object数组进行排序(排序条件是每个元素对象的属性个数) 解题关键: 1.Array.sort的用法 2.object的属性数量的统计 解点1:Array.sort的用法 Array.sort可以为数组指定一个排序规则,一般用如下格式进行指定,代码如下: var arr = [10,6,0,4]; console.log( arr.sort() ); //按字符排序 0,10,4,6 console.log( arr.sort( fu