html常用标签
一、页面的头部标记 1.标题标记<title> 用于给网页命名，当设置这个属性之后，我们能直观的在浏览器上看到网页的名字。 2.元信息标记<meta> meta标签的属性 http-equiv 类似http的头部协议，以键值对的形式出现，“键”由http-equiv设置项目，“值”由content属性设置 name 以键值对的形式出现，“键”由name设置项目，“值”由content属性设置 content根据http-equiv和name来设置对应的值 字符编码的设置 语法：<mate http-equiv="content-type" content="text/html;charset=字符集"> 常见字符集是GB2132,表示为国际汉字码，在实际应用中也常常使用utf-8编码 刷新页面 语法：<mate http-equiv="refresh" content="刷新时间"> 设置为refresh(刷新)，content用于设置刷新时间，单位是秒。 页面跳转 语法：<meta http-equiv="refresh" content="刷新时间;url=目的地址"> 设置为refresh（刷新），content用于设置刷新时间，单位是秒，在刷新的时候跳转到目的地址所在的页面 设置关键字 语法：<meta name="keywords" content="关键字1;关键字2;关键字3;..."> keywords表示“关键字”设置项目，content用于设置具体的关键字，但是在实际情况中，如果输入太多的关键字，可能会在网页搜索的时候被忽略，所以在设置关键字时要注意在这方面的精简。 设定页面描述信息 语法：<meta name="discription" content="页面描述语言"> discription表示“描述”设置项目，content用于设置具体的描述语言 3.<link> 4.<style> 5.<script>二、页面的主体标记<body>
封装页面的主体内容，使用<body>可以设置页面正文颜色与背景颜色，页面背景图片，页面边距，网页链接颜色（未访问的连接颜色，正在访问的连接颜色，已经访问过的连接颜色）等。 1.文字与段落标记 文字标记： 文字内容 普通文字可以直接通过键盘键入或拷贝的方式进行输入到<body>标签中 空格在<body>标签中，不论我们键入多少个空格，在网页显示时都默认显示一个空格，所以为了在浏览器中显示多个空格，可以使用空格对应的一个字符代码 语法： 除了空格还有许多特殊文字无法直接输入，也可以通过使用对应的字符实体来表示 在网页中有一些内容我们只希望给编程的人员看到，不想它在浏览器中显示出来可以使用注释 语法：<!-- 注释内容 --> 文字字体 默认情况下，中文网页中的文字是以黑色，宋体，3号字的效果来显示的。可以用<font>来更改文字的显示效果 语法：<font size="" color="" face=""> size设置文字大小，color设置文字颜色，face设置文字字体 2.标题字标记 语法：<h1~6 align="对齐方式"></h1~6> 给文字添加标题语义，数字越大，字体越大。可以再其中设置文字对其方式，默认是左对齐。 3.文字的装饰标记 使用较少 4.段落标记 语法：<p>段落内容</p> <p>段落内容 <p>的双标记会与上下文产生一空行的间距，单标记只会与上文产生一空行的间距，可设置对其方式 5.换行标记 语法：<br/> 给一段文字强制性换行，两个连续的<br/>相当于<p>的单标记 6.预格式化标记 语法：<pre></pre> 让文字与原来设置好的效果一样，可以将空格保留下来 7.居中标记 语法：<center></center> 让文字居中 8.缩排标记 语法：<blockquot>缩进文字</blockquot> 让文字产生一定的缩进 9.水平线标记 语法：<hr/> 单标记，在标记处产生一条水平线，可以进行宽度，高度，水平对其方式，阴影效果，颜色进行设置 10.列表标记 将相关内容按照整齐划一的方式排列 11.有序列表 语法：<ol> <li>列表内容</li> ... </ol> 默认情况下，有序列表的前导符是阿拉伯数字，可以通过type设置改变前导符 12.无序列表 项目列表： 语法：<ul> <li>列表内容</li> ... </ul> 默认情况下，无序列表的前导符是实心圆点，可以通过type设置改变前导符 定义列表: 语法：<dl> <dt>名词</dt> <dd>解释</dd> ... </dl> 对名词进行解释，是一种具有两个层次的列表，名词为层次一，解释为层次二 13.嵌套列表 指一个列表项的定义中嵌套了另一个列表的定义 14.图片标记 插入图片 语法：<img src=""> src表示插入图片的路径，一般使用相对路径 设置图片大小 语法：<img src="" height="" width=""> 通过高宽来设置图片的大小 设置图片与周围对象的边距 语法：<img src="" hspace="" vspace=""> 通过设置图片与周围对象的水平距离和垂直距离来设置边距 设置图片提示文本 语法：<img src="" alt=""> 在图片还未加载好或无法加载时，对图片进行解释说明 设置图片的对齐方式 语法：<img src="" align=""> 设置图片与周围对象的对齐方式 设置图片的边框 语法：<img src="" border=""> 给图片设置边框三、超链接 超链接标记 语法：<a href="目标端点">源端点</a> 源端点可以是文字，也可以是图片，鼠标点击以后跳转到目标端点处 超链接目标端口 默认情况下在当前窗口打开，有时为了某种目的，希望超链接页面在其他窗口，如新开一个窗口中打开，此时在我们创建超链接时就必须修改它的目标窗口，目标窗口的修改可以通过target来进行修改 超链接的连接路径 绝对路径 相对路径 超链接的类型 根据目标短点的内容 内部链接 在同一个网站内部，不同网页的链接，通常使用相对路径 外部链接 在不同的网站中，通常使用绝对路径 书签链接 目标端点为网页中的某个书签的链接 步骤：1.创建书签 语法：<a name="书签名"></a> <a>标记中的内容可有可无，书签名不能有空格 2.创建书签链接 语法:<a href="#书签名">源端点</a> 脚本链接 指使用脚本作链接目标端点的链接，通过脚本可以实现HTML语言实现不了的功能 文件下载链接 创建文件下载，只要在链接地址处输入文件路径即可，当用户点击链接时，浏览器会自动判断文件类型，做出不同情况的处理 根据原端点的内容 文本链接 源端点为文本的链接 图像链接 源端点为图片的链接 图像映射 一幅图片中的多个链接 语法：<img src="img_url" usemap="#map_name"> <map name="map_name"> <area shape="rect" coords="x1,y1,x2,y2" href="链接地址1"> <area shape="circle" coords="x,y,r" href="链接地址2"> <area shape="poly" coords="x1,y1,x2,y2,x3,y3..." href="链接地址3"> ... </map> rect表示矩形，circle表示圆形，poly表示多边形四、表格 语法：<table> <tr> <th></th> <td></td> ... </tr> ... </table> 使用<th>创建表头 在表格标记<table>中可以设置表格宽度width，高度height，边框线border，对齐方式align，背景颜色bgcolor，背景图片background，表格标题caption，单元格间距cellspacing和边距cellpadding等表格属性 在<tr>标记中可以设置对齐方式align，行单元格背景颜色bgcolor，行边框颜色bordercolor，单元格的垂直对齐方式valign 在<td><th>标记中可以设置以上各种属性及单元格跨行操作rowspan，单元格跨列操作colspan五、表单 表单标记<form> 语法：<form name="" method="" action=""> ... </form> 还有onsubmit(用于指定处理表单的脚本函数)，enctype(设置MIME类型，默认值为application/x-www-form-urlencoded。需要上传文件到服务器时，应将该属性设置为multipart/form-data get与post的区别输入标记<input>
设置表单元素 文本text，按钮button，密码password，单选框radio，复选框checkbox,文件file，隐藏hidden，提交按钮submit，重置函数reset，图像域image 选择列表标记<select> 列表： 语法：<select name="列表名称" size="显示的选项数目" multiple="multiple"> <option value="选项值" selected="selected">选项一</option> ... </select> multiple设置列表中的项目可多选 下拉列表 一次只能选择一个列表选项，且一次稚嫩显示一个列表选项的选择列表 语法：<select name="列表名称" > <option value="选项值" >选项一</option> ... </select> 文本域标记<textarea> 语法：<textarea name="文本区域名称" rows="行数" cols="字符数"> ... </textarea> rows设置的是当前可见行数，如果内容的行数超过这个值，则会出现垂直滚动条