Day 29：HTML常用标签

软件的结构：
　　cs结构的软件的缺点：更新的时候需要用户下载更新包然后再安装，需要开发客户端与服务端。
　　 cs结构软件的优点：减轻服务端的压力，而且可以大量保存数据在客户端。
　　C/S(Client Server)结构的软件：QQ、极品飞车、飞信、迅雷

　　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页面<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    3.
    -->
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>这是我的第一个网页</title>
        <meta name="keywords" content="java培训,php培训,c#培训"/>
        <!--一个网页关键字最好三到四个，太多了就会使你想被访问的内容权重贬低,被访问概率下降-->
    </head>
    <!-- 网页内容写在body中-->
    <body>
    打算作个动态网站，可以在里面分享上传信息
    </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>
<!--
标签作用：描述一个网页的结构

标签类型：
    1.有开始标签与与结束标签。例如:<p></p>   需要把网页数据封装在标签中
    2.开始标签与结束标签在一个标签体内.例如：<hr/>   功能单一不需要封装

常用文本标签
    <h1> to <h6> 表示是一个标题
    <p> 段落标签
    <hr/> 水平线标签
    <sub></sub> 下标
    <sup></sup> 上标
    <br />
    <pre></pre> 原样标签：保留空格和换行符
    <ol>
        <li>火锅</li>
        <li>闷锅</li>
        <li>在家</li>
    </ol>有序列表<ol>的type属性可以改序号类型
    
    <ul>
        <li>火锅</li>
        <li>闷锅</li>
        <li>在家</li>
    </ul>无序列表<ul>的type属性可以改序号类型
    
    项目列表标签(dl dt dd)<dd>会向右缩进一个tab键
    例子：公司结构
    <dl>
        <dt>技术总监</dt>
        <dd>幅度萨芬</dd>
        <dd>反倒是</dd>
        <dd>奋斗史</dd>
        <dt>人事经理</dt>
        <dd>怀疑他</dd>
        <dd>华国锋</dd>
    </dl>
    
    <span></span> 行内标签
    <div>块标签 div标签的内容会独立占一行
-->
<body>

<h1 align="center">标题：网页</h1>
<p>&nbsp;&nbsp;&nbsp;网页的好处</p>
网页的好处
网页的好处
网页的好处
网页的好处
网页的好处
<hr />
水的分子式：H<sub>2</sub>O
<br />
2的16次方：2<sup>16</sup>
</body>
<hr />
<pre>
                       静夜思
                 床前明月光，疑是地上霜。
                 举头看屏幕，低头代码框。
</pre>
<hr />

菜单
    <ol type="I">
        <li>火锅</li>
        <li>闷锅</li>
        <li>在家</li>
    </ol>
<hr />
菜单
    <ul type="square">
        <li>火锅</li>
        <li>闷锅</li>
        <li>在家</li>
    </ul>
<hr />
公司结构
    <dl>
        <dt>技术总监</dt>
        <dd>幅度萨芬</dd>
        <dd>反倒是</dd>
        <dd>奋斗史</dd>
        <dt>人事经理</dt>
        <dd>怀疑他</dd>
        <dd>华国锋</dd>
    </dl>
    <hr />
    
<span>网页的好处网页的好处</span><div>网页的好处网页的好处网页的好处网页的好处</div>
</html>

实体标签：

　　> < 等一些符号在html页面中是有着特殊含义，这些字符如果需要在页面中显示，这时候就应该使用实体标签

常用的实体字符:
　　空格       
    　小于号     <
    　大于号    >
　　人民币    &yen；
　　版权      ©
　　商标      ®

<a> 超链接标签

a标签常用的属性：
　　href : 用于指定链接的资源
　　target: 设置打开新资源的目标。 _Blank 在独立的窗口上打开新资源 _self 在当前窗口打开新资源

file: file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的。

格式： file:\\\f:\图片\1.jpg

a标签的原理：
　　1. a标签的href属性值如果是以http开头的，那么浏览器会马上启动http解释器去解释该网址，首先会在本地机器去找一个hosts文件，如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机。
　　2. 如果a标签的href属性值没有以任何协议开头，那么浏览就会启动file协议解释器去解释该资源路径。
　　3. 如果a标签的href属性值并不是以http开始，而且其他的一些协议，那么这时候浏览器就回去到我们本地的注册表中去查找是否有处理这种协议的应用程序，如果有，那么马上启动该应用程序处理该协议。

　　邮件的协议： mailTo
　　迅雷的协议： thunder

超链接标签的作用：

　　1. 可以用于链接资源。
　　2. 锚点点位.
　　　　a. 首先编写一个锚点锚点的格式： <a name="锚点名字"> 数据</a>
　　　　b. 使用a标签的herf属性连接到锚点出。 href=”#锚点的名字“

<img>图片标签：
　　img标签常用的属性:
　　　　width：设置图片宽度
　　　height 设置图片高度
　　　 alt: 如果图片资源无法找到，那么就显示对应的文字对图片进行说明。

<table>表格标签

　　表格使用到的标签：
　　　　<table> 表格
    　　　　<tr>    行
  　　　　 <td>    单元格
    　　　　<th>     表头   默认的样式是居中，加粗。
    　　　　<caption> 表格的标题
表格常用的属性：
　　border 设置表格的边框
  　 width : 设置表格的宽度
  　 height: 设置表格的高度的。
  　 colspan: 设置单元格占据指定的列数。
　　rowspan : 设置单元格占据指定的行数

表单标签：表单标签的作用是用于提交数据给服务器的。
表单标签的根标签是<form>标签

常用的属性：
　　action: 该属性是用于指定提交数据的地址。
　　method：指定表单的提交方式。
get : 默认使用的提交方式。提交的数据会显示在地址栏上。
post ：提交的数据不会显示在地址栏上。
注意：表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值。

Day 29：HTML常用标签

猜你喜欢