零基础建站培训介绍

当前位置:

html 标签基本语法

html 标签基本语法有以下几个特点:

刚刚接触超文本,遇到的最大的障碍就是一些用“<”和“>”括起来的句子,我们称它为标签,是用来分割和标记文本的元素,以形成文本的布局、文字的格式及五彩缤纷的画面。

1. 单标签

某些标记称为“单标签”,因为它只需单独使用就能完整地表达意思,这类标记的语法是:

< 标签名称>

最常用的单标签是<BR>, 它表示换行。

2.双标签

另一类标记称为“双标签”,它由“始标签”和“尾标签”两部分构成,必须成对使用,其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能,而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠(/)即成为尾标记。这类标记的语法是:

<标签> 内 容</ 标签>

其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示,就将此段文字放在一<EM> </EM>标记中:

<EM>第一:</EM>

3.标签属性

许多单标记和双标记的始标记内可以包含一些属性, 其语法是:

< 标签名字 属性1 属性2 属性3 … >

各属性之间无先后次序,属性也可省略(即取默认值),例如单标记<HR>表示在文档当前位置画一条水平线(horizontal line),一般是从窗口中当前行的最左端一直画到最右端。带一些属性:


<HR SIZE=3 ALIGN=LEFT WIDTH="75%">

中SIZE属性定义线的粗细,属性值取整数,缺为1;ALIGN属性表示对齐方式,可取LEFT(左对齐缺省值),CENTER(居中),RIGHT(右对齐);

WIDTH 属性定义线的长度,可取相对值,(由一对 " "号括起来的百分数,表示相对于充满整个窗口的百分比),也可取绝对值(用整数表示的屏幕像素点的个数,如WIDTH=300),缺省值是"100%"。

基本结构标签
html页面也叫html文档

<!DOCTYPE html>:文档类型声明标签,用于声明html版本的,必须写在文档第一行位置
<html></html>:页面中最大的标签,我们称为根标签
<head></head>:文档的头部,在head标签中必须设置titile标签
<titile></titile>:文档的标题,设置文档标题
<body></body>:HTML文档主体,页面的内容基本上都包含在body标签中
<style></style>:CSS样式主体,CSS样式内容都在style标签中
<html lang="ch-CN">:用于定义网页字体
<mate charset="utf-8">:定义页面字符集
通用属性:class 任意标签使用,定义用.类名{属性:属性值}
私有属性:id 唯一属性,只能调用,定义用#id名{属性:属性值}

常用标签

<h1></h1>--<h6></h6>:标题标签,是head的缩写,h1-h6是提升标题的重要性的。重要性由1-6逐步递减。1字体最大,6字体最小。
<p></p>:段落标签,把文字分成段落,段落标签会根据浏览器大小自动换行
<br />:换行标签,强制文字换行

文本格式化标签:
<strong></strong>或<b></b>:文字加粗
<em></em>或<i></i>:斜体文字
<del></del>或<s></s>:删除线
<ins></ins>或<u></u>:下划线
<div></div>:没用语义用来布局网页的,只是一个用来装内容的大盒子标签,一个标签单独占一行
<span></span>:没用语义用来布局网页的,只是一个用来装内容的盒子标签,一行可有多个
<img src="图片url" alt="图片信息" titile="图片信息"/>:图片标签,是个单标签。src是图片的保存路径(必须属性);alt是当图片加载失败时以文字提示图片信息;titile当鼠标放在图片上时提示图片信息;width设置图片宽度;height设置图片长度;border设置边框粗细。
<a href="要跳转的url" target="目标窗口弹出方式">文本或图片</a>:超链接标签,用于跳转别的页面,herf是跳转页面url(必须属性);target用于指定打开新页面的方式,_self是当前页面打开(默认),_blank在新窗口打开。

表格标签:
<table></table>:用于定义一个表格
<thead></thead>:表格结构标签之一,表示表格的头部区域
<tbody></tbody>:表格结构标签之一,表示表格的主体区域
<th></th>:定义表头单元格。与td的区别,表头单元格中文字会居中并加粗显示
<tr></tr>:定义表格中的行,必须包含在'<table></table>'标签中
<td>单元格内的数据</td>:定义表格中的单元格,必须包含在'<tr></tr>'标签中。
rowspan="合并单元格的数量":跨行合并单元格
colspan="合并单元格的数量":跨列合并单元格
注意:单元格合并需先确定合并的方向,再目标单元格中添加合并属性,合并完成后删除合并后多余单元格的代码。

列表标签:
<li>列表项</li>:定义列表中的项,列表项可以是任何内容,包括其他标签
无序
<ul></ul>:定义一个无序列表,只能存放'<li>列表项</li>'标签
有序
<ol></ol>:定义一个有序列表,只能存放'<li>列表项</li>'标签
自定义
<dl></dl>:定义一个自定义列表,只能存放'<dt>列表项</dt>'标签和'<dd>列表项</dd>'标签
<dt>主题列表项</dt>:自定义列表的主题列表项
<dd>主题列表项的解释项</dd>:主题列表项的内容的解释项

表单标签:
<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>:定义一个表单域。把表单域中所有表单元素信息提交给服务器。action用于指定接收处理表单数据的服务器程序的url地址;method表单的提交方式get/post;name用于指定表单的名称,以区分其他表单域。
<input type="属性值" name="表单名称" value="表单元素值" checked="checked" id="自定义">:定义一个输入的表单元素,是一个单标签。name属性单选和复选都必须一致,checked="checked"定义默认选定状态。
type值
text 定义文本框
password 定义密码框
radio 定义单选按钮
checkbox 定义复选按钮
submit 定义提交按钮
button 定义可点击按钮(与JavaScript脚本搭配使用)
reset 重置表单按钮
file 定义输入字段和”浏览“按钮,提供文件上传
image 图像形式的提交按钮
hidden 定义隐藏的输入字段
<label for="input的id名"></label>:与input搭配使用,增加用户体验
<select></select>:定义一个下拉表单列表,至少有一个<option>选项</option>选项
<option>选项1</option>:定义一个下拉表单列表的选项,必须包含在<select></select>中。
<textarea></textarea>:定义一个文本域

特殊字符:
&nbsp; 空格
&lt; <
&gt; >
&amp; 和号&
&yen; ¥人民币符号
&copy; 版权符号
&reg; 注册商标符号
&deg; 摄氏度符号
&plusmu; 正负号
&times; 乘号
&divide; 除号
&sup2; 平方
&sup3; 立方

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注