HTML标识及基础元素学习培训总结

日期:2020-12-11 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

1.HTML中元素和标识
元素是由单独或1对标识界定的包括范畴。1个标识便是上下各自有1个小于号(<)和超过号(>)的标识符串。刚开始标识是指以不以斜杠(/)开始的标识,其内是1串容许的特性-值对。完毕标识则是以1个斜杠(/)开始的标识。如:
<body><!—刚开始标识-->
<font color=”read”>联接</font> <!—在其中color=”read”便是特性-值对。“联接”便是內容-->
</body><!—完毕标识-->

2.HTML元素的4种方式
空元素<br>
带有特性的空元素<hr color=”blue”>
带有內容的元素<title>联接</title>
带有內容和特性的元素<font color=”read”>联接</font>
综上事例

拷贝编码
编码以下:

<html>//起止标记。假如沒有访问器还可以分析
<head>//刚开始文本文档头
<title>
My name is cauthy!//刚开始文本文档的题目
</title>//完毕文本文档的题目
</head>//完毕文本文档的头顶部
<body color="red">//刚开始文本文档体
Hello World!//访问器显示信息的內容
</body>//完毕文本文档体
</html>//完毕HTML文本文档

注:在HTML中,特性和标识的尺寸写不相干。特性值能够加双引号,还可以不加。

3.与段落操纵有关的标识
<palign=”#”> 表明paragraph,功效:建立1个段。特性align表明段的对其方法,能够为leftright justify
<br>表明linebreak 功效:换行
<hrcolor=””>表明horizontal rule 功效:插进1条水平线,特性表明色调能够用read green还可以用16进制的数,如#ffoooo

拷贝编码
编码以下:

<html>
<head><title>静夜思</title></head>
<body>
<p align="center">
静夜思
<hr color="#ffoooo">
<p align="center">
床前明月光,疑是地面上霜。

举头望明月,低下头思家乡。
</body>
</html>//实际效果图

4.与文字显示信息有关的标识
<center>…</center>:使文字垂直居中显示信息
<hn align=””>…<hn>:用于指出文本文档的题目,n是从1到6的整数金额,1表明最大的题目,特性align表明题目的对齐方法,能够为center,left right
<fontsize=”n”color=””>…</font>:用于设定字体样式,size表明字体样式尺寸,n能够是从1到7的整数金额,数据越大,显示信息的字越大。
<b>…</b>:设定文字变成粗体
<i>…</i>:设定文字为斜体

拷贝编码
编码以下:

<html>
<head><title>静夜思</title></head>
<body>
<center>
<h1><fontcolor="red"><b><i>静夜思</i></b></font></h1>
李白
<hr color="#ffoooo">
<p>
<font color="blue"size=6>
床前明月光,疑是地面上霜。

举头望明月,低下头思家乡。</font>
</center>
</body>
</html>

5.怎样键入独特标识符
在HTML文本文档中,像不中断空格,回车等标记,HTML的保存字,1些在电脑键盘中不存在的标识符,都必须引入的方法才可以键入,在HTML中有两种引入种类:标识符引入和实体线引入。
标识符引入和实体线引入全是以1个&刚开始并以1个分号(;)完毕。假如用的是标识符引入,必须在&以后再加1个#,以后是所必须标识符的10进制编码或106进制编码(ISO 10646标识符集中化的标识符的编号)。假如用的是实体线引入,在&以后写上标识符的助记符。
在HTML中空格能够用全角的空格去键入。

6.HTML中的注解
<!--这是注解的內容-->

7.类表-创建数据序号的目录
应用<ol>和<li>标识建立带数据序号的目录。能够用type特性特定序号系统软件的种类,A(A,B,C),a(a,b,c),I(III III),i(i ii iii)1(1,2,3)缺省
在<ol>标识中应用start特性,设定起止的编号。
在<li>标识中应用value特性,更改目录内的序号次序。
应用<ul>和<li>标识建立带有新项目标记的目录。Ul中的type特性能够为,disc(实心的圆圈)square(实心的方块)circle(空心的圆圈)
应用<dl>和<dt>标识建立无标记的目录,应用<dd>标识更换<dt>建立缩进的目录。
在<dl>元素中另外应用<dt>和<dd>标识,创建术语目录。术语目录中的目录项由两一部分构成,术语和它的表明。术语由<dt>标识特定,表明由<dd>标识特定。

拷贝编码
编码以下:

<ol start="10"type="I">
<li>数学课
<livalue="20">语文
<li>物理学
</ol>
<ul type="circle">
<li>数学课
<li>语文
<li>物理学
</ul>
<dl >
<dt>数学课
<dd>语文
<dt>物理学
<dd>有机化学
</dl>

8.报表
报表是用<table border= n align=”” bgcolor=””>…</table>,在其中border为报表的宽度,缺省为0,便是无法显示报表的宽度。
<caption>…</caption>:用于界定报表的题目
<tralign=”” valign=”” >…</br>:特性align特定这1行水平方位的对其方法,能够为leftcenter right .valign特定竖直方位的对齐方法,能够为top,middle,bottom
<th>…</th>:用于定于表头
<td>…</td>:用于界定模块格

拷贝编码
编码以下:

<html>
<head><title>报表</title></head>
<body>
<table border="5"align="center" bgcolor="bule">
<caption>考試考试成绩</caption>
<tr align="center"valign="middle">
<th>语文</th>
<th>数学课</th>
<th>英语</th>
</tr>
<tr align="center"valign="middle" >
<td>80</td>
<td>70</td>
<td>60</td>
<tr align="center"valign="middle" >
<td>60</td>
<td>70</td>
<td>80</td>
</table>
</body>
</html>

9.表单的建立
<form method=”get or post ”action=”URL”>:特性method特定向服务器推送数据信息时应用的HTTP方式,能够是get或post方式。Get是缺省的方式,当选用get方式递交表单时,递交的数据信息被额外到URL(在特性action中特定)的尾端,做为URL的1一部分推送到服务器,比如,大家制订action为reg.asp,当递交表单后,在访问器的详细地址中,大家将看到,http://localhost:8080/reg.asp?user=zhangsan&pwd=1234
Post方式是将菜单中的信息内容做为1个数据信息块推送到服务器,不管选用哪种方式,数据信息的编号全是同样的,文件格式为:name1=value1&name2=value2
特性action制订对表单开展解决的脚本制作的详细地址,也便是说,表单递交到服务器后,交由谁来解决,在action中特定解决者的URL.
<inputtype=””name=””size=””value=””>:在其中type特定要建立的控制的种类。特性name用来特定控制的名字,解决表单的服务器端脚本制作能够得到以名字-值对所表明的表奇数据,运用名字,能够取下对应的值。Name特性在表单中其实不显示信息,特性size用来制订表单中控制的原始宽度。特性value制订控制的原始值。
单写作本键入控制(type=”text”) 递交按钮(type=”submit”)
重设按钮(type=”rest”) 动态口令键入控制(type=”password”)
单选按钮(type=”radio”) 复选框(type=”checkbox”) 掩藏控制(type=”hidden”)
建立多写作本键入<textarea name=”” rows=””cols=”” >…</textarea>
下面事例用报表操纵表单

拷贝编码
编码以下:

<html>
<head><title>表单</title></head>
<body>
<form method="get"action="reg.jsp">
<table border="0">
<tr valign="middle"></tr>
<td>客户名:</td>
<td><inputtype="text" size="20" name ="user"></td>
<tr align="left"valign="middle"></tr>
<td>登陆密码:</td>
<td><inputtype="password"></td>
<tr align="left"valign="middle"> </tr>
<td>兴趣爱好</td>
<td><inputtype="checkbox"name="interest" value="football">足球
<input type="checkbox"name="interest"value="basketball">篮球
</td>
<tr align="left"valign="middle"></tr>
<td>性別</td>
<td><inputtype="radio" name="sex"checked value="1">男
<input type="radio"name="sex" value="0">女
</td>
</select></td>
<tr align="left"valign="middle"></tr>
<tdvalign="top">本人简介:</td>
<td><textareaname="personal" rols="5" cols="20">本人简介</textarea>
</td>
<tr align="left"valign="middle"></tr>
<td></td>
<td><inputtype="hidden"value="001" name="id"></td>
<tr align="left"valign="middle"></tr>
<td></td>
<td><inputtype="reset" value="重设"><inputtype="submit" value="递交"></td>
</table>
</form>
</body>
</html>

10.超连接

拷贝编码
编码以下:

<a href =”URL”>…连接的文本</a>
<a href=”form.html”>当今的文件目录</a>
<ahref=../”form.html”>当今的文件目录的上1层文件目录</a>
<ahref=”E://form.html”>肯定相对路径</a>
<ahref=”http://www.baidu.com”>万维网详细地址</a>

11.嵌入图象

拷贝编码
编码以下:

<imag src=”URL” width=”” height=””>