1 HTML

2023-08-28 17:29:04

1 HTML

基础知识

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

B/S（Browser Server）结构的软件：比如：微博、 webQQ 、 web飞信、 web迅雷
优点：软件版本升级的时候不需要用户下载更新包，直接更新服务器的程序即可。程序员则只需要开发服务端而已。
缺点：增加了服务端的压力，bs结构的软件不能保存大量的数据在用户机上。

网站的类别:
静态网站: 静态网页中的数据都是写死的，如果需要修改网页的内容是需要直接修改网页的代码。是没有数据库提供数据给它。
动态网站: 动态网站的数据是来自于数据库的，背后是有一个后台程序管理页面中数据的

HTML语言

html 语言就是开发网页的基础语言
html(超文本标记语言)
标记 : 该门语言是有标签来构成的。学习html不用怎么去理解，只要需要记住标签的作用即可。

html语言的特点：
1.html语言是与平台无关的，任何平台只需要安装了浏览器都可以运行。
2.html 是不区分大小写的。

html语言的结构：
   <html>    html语言的根标签.
             <head></head> 网页的头信息
         <body></body> 网页的体部
   </html>

html的注释：

Code1

<FONT size="40" color="red">这个是我的第一个网页</FONT>
<img src="file:\\\C:\Users\Administrator\Desktop\Code\1.jpg" />

头信息的作用

1. 可以设置网页的标题。
2. 可以通知浏览使用指定的码表解释html页面.
3. 设置关键字

Code2

<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>

HTML常用的标签

html的标签作用：用于描述一个网页的结构的。如果需要操作数据的样式：通过标签的属性操作的。

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

html常用的标签：
   <h1>~<h6> 表示是一个标题
   <p>   段落标签
    <hr/> 水平线标签
    <br/> 换行标签
    <sub> 下标
    <sup> 上标
    <pre> 原样标签：原样标签会保留空格和换行符。
    <ol> <li> 有序的列表标签、
    <ul> <li> 无序的列表标签。
    (dl dt dd) 项目列表标签
    (span) 行内标签
     <div> 块标签    div标签的内容会独立占一行。

Code3

<!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>html常用的标签</title>
</head>
<body>
                                       <h1 align="center">开班了</h1>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<p>&nbsp;&nbsp;今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，
今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错，我前两天就开班了，今天天气不错。</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页面中是有着特殊含义，这些字符如果需要在页面中显示，这时候就应该使用实体标签

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

Code4

</head>
<body>
&nbsp;&nbsp;&nbsp;&nbsp;段落标签是使用&lt;p&gt;标"签"<br/>

该毛衣的价格：&yen;298<br/>

<<深入javaweb>>该书版权归属于：&copy;123

<hr/>

本次活动最后的解释器归属于：&reg;123

</body>

媒体标签

<marquee> 飘动标签
    direction : 指定飘动的方向
        scrollamount : 指定飘动的速度。
        loop   :指定飘动的次数

Code5

 <embed src="1.mp3" ></embed>
 <marquee  loop="-1" scrollamount="30" direction="right"><font size="+6" color="red"> 我飞起来了...</font></marquee>

超链接标签<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. 锚点点位.
       1. 首先编写一个锚点锚点的格式： <a name="锚点名字"> 数据</a>
       2. 使用a标签的herf属性连接到锚点出。 href=”#锚点的名字“   Code6

    <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>
    <a href="thunder://abc/aa一个人的武林.avi">一个人的武林(高清枪版).avi</a>
    <!--锚点 -->
          123
    <a href="#top">回到顶部</a>

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

<img src="img/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>

表格标签

表格使用到的标签：
   <table> 表格
    <tr>    行
    <td>    单元格
    <th>     表头   默认的样式是居中，加粗。
    <caption> 表格的标题

表格常用的属性：
   border 设置表格的边框
    width : 设置表格的宽度
    height: 设置表格的高度的。
    colspan: 设置单元格占据指定的列数。
   rowspan : 设置单元格占据指定的行数。

表格分为三部分
<thread> 表头可以没有
<tbody> 表体至少一个
<tfoot> 表尾可以没有

Code 简单的表格

<table align="center" border="1px" bordercolor="#0066CC" width="400px" height="300px">
            <tr>
                <th>姓名</th>
                <th>分数</th>
                <th>人品</th>
            </tr>
            <tr>
                <td>姓名1</td>
                <td>分数1</td>
                <td>人品1</td>
            </tr>
            <tr>
                <td>姓名2</td>
                <td>分数2</td>
                <td>人品2</td>
            </tr>
            <tr>
                <td>姓名3</td>
                <td>分数3</td>
                <td>人品3</td>
            </tr>
            <tr>
                <td>姓名4</td>
                <td>分数4</td>
                <td>人品4</td>
            </tr>
        </table>

Code 复杂的表格

<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>

框架标签
   frameSet ：一个frameSet可以把一个页面切割成多份。
    只能按照行或者列切割。
    frame   不能被切割的。 frame是位于frameSet中。
    iframe: 在一个网页中分隔一部分的位置显示另外一个网页的的信息。
    注意： frameSet标签不能用于body标签体内容。

Code 多个HTML文件

 index.html
  <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </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>

top
<div align="center"><font color="#FF0000" size="30px">公司的logo</font></div>
left
        <dl>
            <dt>功能介绍</dt>
            <dd><a href="../2常用的标签.html" target="center">公司简介</a></dd>
            <dd><a href="#">产品介绍</a></dd>
            <dd><a href="#">公司荣耀</a></dd>
            <dd><a href="#">招聘英才</a></dd>
            <dd><a href="#">联系我们</a></dd>
        </dl>
center
公司创建于2006年
foot
        <div align="center">
            合作伙伴：百度、 腾讯、 微软、甲骨文....
            <br/> 友情链接：
            <br/> 联系方式：020-123456 版权归属于于： &reg;123

        </div>

表单标签

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

常用的属性：
   action: 该属性是用于指定提交数据的地址。
   method：指定表单的提交方式。
           get : 默认使用的提交方式。提交的数据会显示在地址栏上。
            post ：提交的数据不会显示在地址栏上。

get与post的其它区别
get
会将提交的内容显示在浏览器地址栏
提交的数据的大小会受地址栏的限制数据不能超过1kb
提交敏感数据时不安全
post
不会将提交的内容显示在浏览器地址栏
提交的数据不会受地址栏限制
提交敏感数据时更安全Code

<body>
    <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>
</body>
</html>

随机推荐

关于STM8空间不足的解决方法
STM8虽然功能齐全,但是空间不足也是经常出来的情况.要么.text overflow,要么.bss overflow,让人头疼.这里把一些优化方案列出来,让空间得到充分利用: 1.在Project ...
（转）在低版本的SDK里使用高版本函数&commat;SuppressLint(&quot&semi;NewApi&quot&semi;) or &commat;TargetApi&quest;
@SuppressLint 和 @TargetApi达到的效果是一样的,相对于SuppressLint ,TargetApi会根据函数里使用的API,严格匹配SDK版本,给出编译错误,但是Suppre ...
frameset子窗口获取父窗口失败原因？
报错信息: arrow.html:44 Uncaught SecurityError: Blocked a frame with origin "null" from access ...
HDU 5969 最大的位或【贪心】（2016年中国大学生程序设计竞赛（合肥））
最大的位或 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem De ...
Eclipse完美汉化教程
首先我们打开http://www.eclipse.org/babel/downloads.php下载语言包. 方法一:可以复制图片里的地址通过Eclipse下载,Help→Install New So ...
Linux共享内存编程实例
/*共享内存允许两个或多个进程进程共享同一块内存(这块内存会映射到各个进程自己独立的地址空间) 从而使得这些进程可以相互通信. 在GNU/Linux中所有的进程都有唯一的虚拟地址空间,而共享内存应用编 ...
NumPy数组对象
1.创建NumPy数组 import numpy as np # 创建3*2*4的三维数组 a = np.arange(24).reshape(3, 2, 4) # 打印三维数组的所有元素 print ...
微信公众平台开发——为何不能在网页调用微信jsapi？
说到这问题,相信大部分程序员老手都会轻蔑一笑,当然是跨域导致的啊!但是为了一些小白,我觉得还是很有必要再说一次的. 首先介绍什么是跨域,由于浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本( ...
react 入坑笔记（一）
一些概念: 1.组件:概念等同于 vue 中的组件,字面意思,不过 vue 中组件是以 .vue 结尾,通过 vue-loader 编译成 js,而 react 组件就是 js. 2.jsx:js 语 ...
php微服务框架 PHP-MSF 的容器部署和使用
评论:1 · 阅读:8412· 喜欢:1 一.需求 PHP-msf 是 Carema360 开发的 PHP 微服务框架,目前我没有实际用过,但是市面上的微服务框架要么在推崇 Spring 系,要么是 ...

码农公寓

随机推荐

相关文章