第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单

时间：2021-02-06 15:00:37

1.html的引入

    C/S(Client  Server)结构的软件：   

       比如： QQ、 *飞车、 飞信 、 迅雷

    cs结构的软件的缺点：更新的时候需要用户下载更新包然后再安装，程序员则需要开发客户端与服务端。

    cs结构软件的优点： 减轻服务端的压力，而且可以大量保存数据在客户端。

    B/S（Browser Server）结构的软件：

       比如： 微博 、 webQQ 、 web飞信、 web迅雷

    优点：软件版本升级的时候不需要用户下载更新包，直接更新服务器的程序即可。程序员则只需要开发服务端而已。

    缺点：增加了服务端的压力，bs结构的软件不能保存大量的 数据在用户机上。

网站的类别:

    静态网站: 静态网页中的数据都是写死的，如果需要修改网页的内容是需要直接修改网页的代码。 是没有数据库提供数据给它。

    动态网站: 动态网站的数据是来自于数据库的，背后是有一个后台程序管理页面中数据的。

html 语言就是开发网页的基础语言：

html(超文本标记语言)

    标记 : 该门语言是有标签来构成的。 学习html不用怎么去理解，只要需要记住标签的作用即可。

html语言的特点：

    1. html语言是与平台无关的，任何平台只需要安装了浏览器都可以运行。

    2.html 是不区分大小写的。

html语言的结构：

    <html>    html语言的根标签.

             <head></head> 网页的头信息

        <body></body> 网页的体部分

    </html>

html的注释：　<!--  注释的内容  -->

头信息的介绍

<html> 
<!-- 头信息的作用 
1. 可以设置网页的标题。 
2. 可以通知浏览使用指定的码表解释html页面. 
--> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<title>这个是我的第一个网页</title> 
<meta name="keywords" content="java培训,php培训,C#培训，羊肉、狗肉、猪肉"/><!--一个网页的关键字最好是3-4个。 seo(搜索引擎优化) --> 
</head> 
<!-- 网页的内容应该写在body标签体内的。 --> 
<body> 
今天天气不错... 
</body> 
</html>

2.html常用的标签

html的标签作用：用于描述一个网页的结构的。

如果需要操作数据的样式：通过标签的属性操作的。

标签的类型：

    1. 有开始标签与结束标签。  <p> </p>  需要把网页的数据内容封装到标签中。

   2. 开始标签与结束标签都是在一个标签体内的。  比如： <hr/>    功能单一不需要封装数据到标签中。

标题(h1~h6)

水平线(hr)

段落(p)

上下标(sup和sub)

换行(br)

原样输出(pre)

有序列表ol li

无序列表ul li

项目列表标签(dl dt dd)

行内标签(span)

块标签<div>

项目列表标签(dl dt dd)

行内标签(span)

块标签<div>    div标签的内容会独立占一行。

<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>html常用的标签</title>
</head>
<body>
    <h1 align="center">0118java就业班开班了</h1>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <p>  今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
       今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
       今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错。</p>
    <hr />
    水的化学式：H
    <sub>2</sub>O
    <br /> 2的16次方：2
    <sup>16</sup>
    <hr />
    <pre>
                                       静夜思
                                床前明月光，疑是地上霜。
                                举头看屏幕，低头写代码。
    </pre>
    <hr />
    今晚吃啥好呢？
    <ol type="a">
       <li>火锅</li>
       <li>烤鸭</li>
       <li>烤鱼</li>
    </ol>

    中午吃啥好呢？
    <ul type="square">
       <li>木桶饭</li>
       <li>猪脚饭</li>
       <li>白切鸡</li>
    </ul>

    公司的组织结构：
    <dl>
       <dt>技术总监</dt>
       <dd>码农1号</dd>
       <dd>码农2号</dd>
       <dd>码农3号</dd>
       <dd>码农4号</dd>
       <dt>人事总监</dt>
       <dd>妹子1号</dd>
       <dd>妹子2号</dd>
    </dl>

    <span>我现在在学习html，</span>
    <div>后天学习css+javascript</div>
</body>
</html>

第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单

3.实体标签
3.1 HTML字符实体
一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体
示结果 描述 实体名称 实体编号
  空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; (IE不支持) &#39;
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 日圆 &yen; &#165;
§ 节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;
3.2媒体标签
音视频
• 音视频标签格式：  <embed></embed>
• 属性：src 、和hidden
元素的飘动
• marquee标签
• 属性：direction 、loop和scrollamount
<embed></embed>  
    hidden ： 设置隐藏插件是否隐藏。
        src ：用于指定音乐的路径
   <embed src="1.mp3" ></embed>
   <marquee> 飘动标签
    direction : 指定飘动的方向
        scrollamount : 指定飘动的速度。
        loop   :指定飘动的次数
-->
   <marquee  loop="-1" scrollamount="30" direction="right"><font size="+6" color="red"> 我飞起来了...</font></marquee>
4.a超链接标签
链接标签
跳转：<a href = "资源路径" target="_blank">
邮件：<a href="mailto:email"></a> 
定位：<a name=“#标记名”></a> 和 <a name="标记名" >
迅雷的协议：thunder
a标签的原理
1. a标签的href属性值如果是以http开头的，那么浏览器会马上启动http解释器去解释该网址，首先
    会在本地机器去找一个hosts文件， 如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的
    dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机。
    2. 如果a标签的href属性值没有以任何协议开头，那么浏览就会启动file协议解释器去解释该资源路径。
    3. 如果a标签的href属性值并不是以http开始，而且其他 的一些协议，那么这时候浏览器就回去到我们本地的注册
    表中去查找是否有处理这种协议 的应用程序，如果有，那么马上启动该应用程序处理该协议。
超链接标签的作用：
  1. 可以用于链接资源。
    2. 锚点点位.  
    1. 首先编写一个锚点  锚点的格式： <a name="锚点名字"> 数据</a>
2. 使用a标签 的herf属性连接到锚点出。  href=”#锚点的名字“    
<a href="www.baidu.com">百度</a>
    <a  target="_blank" href="2常用的标签.html">带你去看1.html</a><br/>
    如果有需要请发送邮件至：<a href="mailTo:123456@qq.com">123456@qq.com</a><br/>
    <a href="thunder://abc/aa一个人的武林.avi">一个人的武林(高清枪版).avi</a>
    <a name="top">顶部</a> <!--锚点 -->
    传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客
   <a href="#top">回到顶部</a>
5.图片标签
<img> 图像标签：
<img src=”1.jpg” align=” middle” border=”3” alt=”图片说明文字” username="#Map"/>
 <map name=“Map” >    使用作为热点图的
          <area shape="rect" coords="50,59,116,104" href="1.html" />
          <area shape="circle" coords="118,203,40" href="2.html" />
  </map>
<img  src="11.jpg"  alt="这个是路飞" width="400" height="300" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="171,178,304,227" href="http:\\www.baidu.com" target="_blank" />
      <area shape="circle" coords="189,135,27" href="2常用的标签.html" target="_blank" />
</map>
6.表格
标题标签：<caption>，给表格提供标题。
表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。
行标签：<tr>
单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。
每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。
THEAD、TFOOT包含关于表格列的信息。
TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）
使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。
TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。
表格常用的属性：
border  设置表格的边框 
    width : 设置表格的宽度
    height: 设置表格的高度的。
  colspan: 设置单元格占据指定的列数。
rowspan : 设置单元格占据指定的行数。 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格标签</title>
</head>
<body>
<table align="center" border="1px" bordercolor="#0066CC" width="400px" height="300px">
    <caption>期末考试成绩表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>分数</th>
                <th>人品</th>
            </tr>
        </thead>
        <tbody>
    <tr>
        <td rowspan="2">凡江</td>
            <td>98</td>
            <td>优</td>
        </tr>
        <tr>

            <td>100</td>
            <td>优</td>
        </tr>
        <tr>
        <td>居东东</td>
            <td>99</td>
            <td>非常好</td>
        </tr>
            <tr align="center">
                <td>综合测评</td>
                <td colspan="2">非常好</td>
            </tr>
         </tbody>
   </table>
</body>
</html>

7.表格的作业 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table border="1px" align="center" width="400px" height="300px">
    <tr>
        <th colspan="3">学生成绩</th>
        </tr>
        <tr>
        <td rowspan="2">张三</td>
            <td>语文</td>
            <td>98</td>
        </tr>

        <tr>
        <td>数学</td>
            <td>95</td>
        </tr>

         <tr>
        <td rowspan="2">李四</td>
            <td>语文</td>
            <td>88</td>
        </tr>

        <tr>
        <td>数学</td>
            <td>91</td>
        </tr>
    </table>
</body>
</html>
8.框架标签frameset
画中画
• 画中画标签格式：  iframe
框架标签
• frameset和frame标签
• frameset属性： rows 、 cols  、 frameborder
• frame属性     ：noresize
HTML中的单位
• 绝对单位            1px   字体的单位+1  10%
• 相对单位             20% (计算单位) 
<!DOCTYPE html > 
<html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>框架标签</title> 
<!-- 
框架标签 
frameSet ： 一个frameSet可以把一个页面切割成多份。 
只能按照行或者列切割。 


frame 不能被切割的。 frame是位于frameSet中。 

iframe: 在一个网页中分隔一部分的位置显示另外一个网页的的信息。 

注意： frameSet标签不能用于body标签体内容。 
--> 
</head> 

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

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

<frame name="center" src="center.html"/> 

</frameset> 
<frame src="foot.html"/> 

</frameset><noframes></noframes> 

</html>

表单

l 表单

•    表单，在网页中主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。

l 组成

•    表单标签：  <form action=“”method=“” enctype=“”></form>

•    表单域    ： <input type=“” name=“” />

•    表单按钮： <inputtype="submit" name="..." value="...“/>

l 常见的表单域

•    文本字段     <input type=“text” name=“” value=“”/>

•    密码字段、   隐藏字段 type ="password"

•    单选按钮      type=radio 单选按钮必需要分组，分组的方法就是给标签name属性，name属性的值必须一样。

•    多选按钮     type =checkbox，多选按钮的name属性必须一致。

•    文件选择框   type=“file” 

•    下拉列表      <select ><option>

•    文本输入域   <textarea> 根据cols定义它的列，rows定义文本框的行数

•    按钮  type=“button”

表单标签的根标签是<form>标签

常用的属性：

action: 该属性是用于指定提交数据的地址。

method： 指定表单的提交方式。

Get提交：会将提交的内容显示在浏览器地址栏，提交的数据的大小会受地址栏的限制

数据不能超过1kb，提交敏感数据时不安全

Post：不会将提交的内容显示在浏览器地址栏，提交的数据不会受地址栏限制，提交敏感数据时更安全

<form action="http://www.baidu.com" method="post">
    <!-- 文本输入框 单行-->
    用户名：<input name="userName" type="text"/><br/>
        <!-- 密码框 -->
密码：<input name="password" type="password"/><br/>
        <!-- 单选框  -->
        性别： 男<input checked="true" value="man"  name="sex" type="radio"/>   女<input name="sex" value="woman" type="radio"/><br/>
        <!-- 下拉框 -->
        来自的城市：<select name="city">
                    <option value="BJ">北京</option>
                    <option value="SH">上海</option>
                    <option value="GZ">广州</option>
                    <option value="SZ">深圳</option>
                </select><br/>
        <!-- 复选框  同一组的复选框name的属性值要一致 -->
       兴趣爱好：java <input value="java" name="hobit"  checked="checked" type="checkbox" />javascript <input type="checkbox" value="javascript" name="hobit" />android <input value="android" name="hobit" type="checkbox" /><br/>
       <!-- 文件上传框-->
    大头照：<input name="image" type="file" /><br/>
    个人简介:
        <!-- 文本域 -->
        <textarea  name="intro" rows="10" cols="30"></textarea><br/>

        <!-- 提交按钮 -->
        <input type="submit" value="注册"/>
    <!--  重置按钮 -->
    <input type="reset" value="重置"/>
    </form>





标签：

相关文章