您的位置：首页 > 产品设计 > UI/UE

HTML--文本标签/marquee/bgsound/列表标签/超链接标签/img 图像标签/转义字符/表格标签/表单提交/框架标签

2017-06-14 23:28 1146 查看

HTML入门

1.软件结构分类：

C-S结构（Client-Server 客户端-服务器端）

典型应用：

QQ

特点：

（1）必须安装特定的客户端程序

（2）服务器软件升级，客户端的软件同步升级

B-S结构（Broswer-Server 浏览器-服务器端）

典型应用：

163网站，华育官网，游戏官网

特点：

（1）不需要特定的客户（只需要浏览器软件）

（2）服务器软件升级，浏览器客户端不需要升级

2.网站：

服务器端的网站都是基于bs结构的，这个软件俗称叫“网站”。网站是由网页组成，一个网页就是由HTML页面组成，HTML是一门网页制作的语言。

3.HTML语言：

html是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。

html语言由标记组成。学习html语言，掌握一些常用的标记即可。

基本标签的讲解

1.基本标签的讲解：

<html>
–html开始标签

<head>  -- 文件头（用户在浏览器的主体是看不到的）
</head>


<body>    --文件体（用户在浏览器的主体看得到）
</body>


</html>
–html结束标签

2 . head文件头：作用：告诉浏览器如何解释该html页面。

<html>
<head>
<!-- html注释  -->
<!-- 作用：告诉浏览器如何解释该html页面 -->
<!-- 标题 ：在窗口的标题栏看到-->
<title>这是标题</title>
<!-- 告诉浏览器使用什么码表解释html文件 -->
<!--
html标签分类：
有标签体标签：有开始，有结束标签、 <title></title>
没有标签体标签 ： 也叫空标签 <meat  />
-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>


<!-- 关键词：keywords
搜索引擎： 百度    输入  java培训
网页的排名  推广 SEO
SEO优化
关键词是网页排名的一个因素。

100% 权重  50%  33.3.%  （3-5个合适）
-->
<meta name="keywords" content="java培训,net培训,php培训" />

<meta name="description" content="这是一家专门做IT职业培训的公司"/>
</head>
<body>
</body>
</html>


3 . 文本标签(body里面的标签)：

（1）基本的：

*标题(h1~h6) align：设置位置

<h1 align="center">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="center">标题3</h3>
<h4 align="center">标题4</h4>
<h5 align="center">标题5</h5>
<h6 align="center">标题6</h6>


效果如下：



*水平线(hr) color：线的颜色

<hr color="#669999" />


*换行(br)

*标签规定粗体文本(b)

*将文本以斜体显示(i)

*将文本以下划线显示(u)

<b>我是b标签</b><br />
<i>我是i标签</i><br />
<u>我是u标签</u><br />


效果如下：



*段落(p)

<p>
这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
</p>
<p>
这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落。
</p>


效果如下：



*段落缩进(blockquote)(主要用于解释或者强调)

<p>
这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。
</p>
<p>
这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落，这是第二个段落。
</p><blockquote>
段落缩进，用于解释说明或者强调。段落缩进，用于解释说明或者强调。段落缩进，用于解释说明或者强调。段落缩进，用于解释说明或者强调。段落缩进，用于解释说明或者强调。段落缩进，用于解释说明或者强调。
</blockquote>


效果如下：



*上下标(sup和sub)(一般用于公式)y=x2 H2O CaCo3

y=x<sup>2</sup><br />
H<sub>2</sub>O<br />
CaCO<sub>3</sub><br />


效果如下：



*原样输出(pre)(希望网页上的东西和代码里面写的样式完全一样的时候(写一首诗)

好雨知时节，当春乃发生。

随风潜入夜，润物细无声。

野径云俱黑，江船火独明。

晓看红湿处，花重锦官城。

<pre>
好雨知时节，当春乃发生。
随风潜入夜，润物细无声。
野径云俱黑，江船火独明。
晓看红湿处，花重锦官城。
</pre>


效果如下：



（2）marquee：

behavior属性值（alternata:来回滚动 scroll:重复滚动 slide:不重复滚动 ）

bgcolor:字幕背景颜色

direction:设置字幕的滚动方向down（从上向下滚动） right（从左向右滚动） left（从右向左滚动） up（从下向上滚动）

<marquee behavior="slide" bgcolor="#66FFFF" direction="left">我是滚动的</marquee>


效果如下：



（3）bgsound：

src:需要播放的音乐路径

loop=-1(无限循环)

autostart=”true”自动播放

<bgsound  src="" loop="-1" />


（4）列表标签：

*有序列表ol li（type属性更改序号类型）

<ol type="1">
<li>章子怡</li>
<li>刘亦菲</li>
<li>贾玲</li>
</ol>


效果如下：



*无序列表ul li（用于条目的罗列，type属性更改序号类型）

<ul type="circle">
<li>章子怡</li>
<li>刘亦菲</li>
<li>贾玲</li>
</ul>


效果如下：



*项目列表标签(dl dt dd)（一般用于有层次结构的列表）

<dl>
<dt>财务总监</dt>
<dd>财务专员1</dd>
<dd>财务专员2</dd>
<dd>财务专员3</dd>

<dt>技术总监</dt>
<dd>程序员1</dd>
<dd>程序员2</dd>
<dd>程序员3</dd>

</dl>


效果如下：



*下拉选项：
<select/><option/>


<select>
<option>陕西</option>
<option>四川</option>
<option>广东</option>
</select>


效果如下：



*行内标签(span) (html中用的非常少，css中用的非常多)

*块标签
(html中用的非常少，css中用的非常多)

4 . 超链接标签：

（1）
<!-- a
超链接标签：

常用的属性：

href 表示链接到的地址（文件）

target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开

（2）协议执行资源的基本流程（超链接的原理）：

使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。

http协议的详细执行流程，图解：



（3）发布个人网站的流程：

1）域名

2）服务器

3）服务器ip和域名进行绑定

4）将网站发布到服务器

（4）常见的协议：

file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议
http:// http协议（执行流程） 通常连接到域名或IP地址(画图讲解http协议执行流程)

thunder:// 迅雷下载软件的协议

mailto:发送邮件协议

（5）超链接作用：

1）链接到资源

2）作为锚点使用

打锚点： 
<a name="锚点名称"></a>


去到锚点： 
<a href="#锚点名称">内容</a>


<!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="Content-Type" content="text/html; charset=utf-8" />
<title>超链接标签</title>
</head>

<body>
<a name="top"></a>
<a href="03.html文本标签.html#list" target="_blank">超链接</a><br/>（在其他页面的位置打上锚点）
<a href="../1.jpg">链接到图片</a><br/>
<a href="http://www.baidu.com">链接到百度</a><br/>
<a href="http://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(普通通道)</a><br/>
<a href="thunder://www.moive.com/fuzhouzhe.avi">高清《复仇者联盟2》(迅雷通道)</a><br/>
<br/><a href="#ch01">去到第一章</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="ch01"></a>
第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容<br/>
<a href="#top">返回顶部</a>

</body>
</html>


效果如下：



（6）img 图像标签

常用属性：

src : 表示图片源位置

width: 图片宽度

height: 图片高度

alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效

title: 提示文本。当鼠标放到图片上面出现。

地图（热点区域）：map

热点： area，设置图片上可以被点击的区域。

<img src="starry sky.jpg" alt="这是一张星空的图片" width="600" height="400" border="0" usemap="#Map" title="星空"/>
<map name="Map" id="Map">
<area shape="rect" coords="100,170,300,71" href="Untitled-1.html"
target="_blank" />
<area shape="circle" coords="400,220,110" href="Untitled-1.html" target="_blank" />
</map>


效果如下：



当鼠标点击下图阴影部分区域的时候（鼠标键盘变成一个小手），会链接到超链接。



（7）转义字符:

在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话，那么就需要进行转义。

常见的转义字符：

特殊字符 转义字符(以&开头，以;结尾)

需求:在浏览器中显示：

<h1>标题</h1>
<          <   letter than
>          >   greater than
&          &




需求：在浏览器中输入 华育 国际

空格

王老吉加上商标和版权：

版权 ： 
©
效果：©

商标 ： 
®
效果：®

（8）表格标签：

标签：

table 表格

tr 行

td 单元格

th 表头

caption 标题

常用的属性：

border 表格的边框

width 宽度

heigth 高度

align 对齐方式。 left: 左对齐 center:居中 right：右对齐

rowspan 行合并。把多行的单元格合并

colspan 列合并。把多列的单元格合并

<table border="2" align="center" width="400" height="300">
<caption><h1>学科成绩统计表<h1></caption>

<tr align="center">
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
</tr>

<tr align="center">
<td rowspan="2">张三</td>
<td>音乐</td>
<td>90</td>
</tr>

<tr align="center">
<td>java</td>
<td>60</td>
</tr>

<tr align="center">
<td>李四</td>
<td>java</td>
<td>70</td>
</tr>

<tr align="center">
<td>王五</td>
<td>java</td>
<td>80</td>
</tr>

<tr align="center">
<td colspan="2">平均分</td>
<td>70</td>
</tr>

</table>


效果如下：



（9）表单提交：

表单标签作用：用于采集用户输入的数据，提交给后台程序处理。

场景1：

注册用户：

-> 注册页面（输入用户名、密码、邮箱…）（通过表单标签携带用户数据）-> 系统后台程序 -> 把用户数据保存到数据库

场景2：

登录：

-> 登录页面（输入用户名和密码）（通过表单标签携带用户数据） -> 系统后台，搜索数据库，判断是否存在次用户和密码）



注意：

form表单里面有两个属性需要注意：

action=”表单需要提交到哪个路径”

method=get/post

如果是get方式提交：file:///C:/Users/Administrator/Desktop/8.form表单.html?username=jack&password=jack

之前的url路径?username=jack&password=jack,如果是get方式提交的话，我们的提交参数会被绑定在url路径中。

如果post方式提交：

我们的所有的提交参数会被封装在请求体中。

表单标签：

<form>   就是一个表单
<input type="text">  单行输入域
<input type="password"/>  密码输入域
<input type="radio"/> 单选按钮
<input type="checkbox"/> 多选按钮
<select/>  下拉选项
<input type="hidden"/>   隐藏域。特点：不会显示到html页面上，但可以携带数据。
<input type="file"/>  文件选择器
<textarea></textarea>  多行输入域
<input type="submit"/>  提交按钮
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮


需求：创建一个表单。

<form action="5.转义字符.html" method="post">
用户名:<input type="text" value="请输入用户名" name="username"/><br />
密码:<input type="password" name="password"/><br />
性别:<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br />
兴趣爱好:<input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby"  value="乒乓球"/>乒乓球<br />
学历:
<select name="xueli">
<option value="benke">本科</option>
<option value="shuoshi">硕士</option>
<option value="boshi">博士</option>
</select><br />
<input type="hidden" /><br />
上传一张你的靓照:<input type="file" name="file"/><br />
请简单做一个自我介绍：<textarea rows="5" cols="10"></textarea><br />
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>


效果如下：



（10）案例：form标签和table标签的整合。

<table border="1" width="300" height="200" bgcolor="#66FFFF" align="center">
<form action="form表单.html" method="get">
<tr>
<td>用户名</td>
<td><input type="text" name="username" value="请输入用户名" /></td>
</tr>

<tr>
<td>密码</td>
<td><input type="password"  name="password"/></td>
</tr>

<tr>
<td>性别</td>
<td><input type="radio" value="男" name="gender" />男<input type="radio" name="gender" value="女" />女</td>
</tr>

<tr>
<td>爱好</td>
<td><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓"/>乒乓</td>
</tr>

<tr align="center">
<td colspan="2"><input type="submit" value="注册" /><input type="reset" value="重置" /></td>
</tr>

</form>
</table>


效果如下：



（11） 框架标签：

frameset 框架集

属性：

cols: 按照列的方向来划分框架

rows: 按照行的方向来划分框架

以上两个属性的值填每个框架的比例或者长度

*号表示其他框架分配完之后剩下的比例

frame 表示一个框架，框架中包含一个html页面；

有2个或2个以上的frame就会包含在frameset当中。

注意：框架标签不能放在body标签中，否则无法显示。

框架标签：

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>框架标签</title>
</head>

<frameset rows="20%,80%">
<frame src="top.html"/>

<frameset cols="20%,*">
<frame src="left.html"/>
<frame name="body"/>
</frameset>

</frameset>

</html>


顶部：

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<h1 align="center">选课系统</h1>
</body>
</html>


左边：

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<a href="选课.html" target="body">1.大一选课</a><br />
<a href="选课.html" target="body">2.大二选课</a><br />
<a href="选课.html" target="body">3.大三选课</a><br />
<a href="选课.html" target="body">4.大四选课</a><br />
</body>
</html>


右边（从左边超链接链接到的页面）：

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
欢迎来上我的课
</body>
</html>


效果如下：



点击左边的超链接之后，效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航