22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

01 HTML

HTML ：Hypertext Markup Language 超文本标记语言(类似于裸奔的人。) 作用：向用户展示信息。

CSS: Cascading 层叠样式表（类似于人的衣服。）

JS和DOM JQuery (类似于人的思考能力。)

参考书：张孝祥《JavaScript网页开发-体验式学习教程》

什么是浏览器？解释和执行HTML源码的工具。

五大浏览器：IE,火狐FF(FireFox),谷歌Chrome,空中Opera,苹果Safari(Apple)

引擎的区别：

Trident引擎，（IE的WebBrowser控件）

WebKit引擎（开源浏览器内核）

静态页面与动态页面区别：

静态页面：后缀名为.html或.htm都是静态页面。htl、html都是静态页面。

动态页面：服务器动态生成的Html页面发送给浏览器。asp、aspx、jsp、php等都是动态页面。

开发工具：Editplus(推荐)、NotePad++、UltraEdit

HTML第一个框架：最少需要四个元素。

<html>
<head>
<title> 我的第一个网页</title>
</head>
<body>
Hellow World
</body>
</html>

易错问题：<title><title>缺了一个"/" 直接导致整个页面无法实现。

HTML中<head>中可以包括：

<base href="" target=""/> 指定网页中超链接的基准地址

1.关于网页的描述信息，搜索优化

2.模拟http响应头信息

取色器：DebugBar，ColorPic ，PicPick

03超链接和图片

HTML和XML的关系

相同点:都是标志语言，注释都是：

都是可以通过dom编程方式来访问

都是可以通过CSS来改变外观

不同点：XML比HTML语法更加严格（有开始标签必须有结束标签，大小写一致，属性用双引号等。）

XML侧重与数据存储，HTML侧重于数据显示。

<html>

    <head>

        <title>哈哈,我又变帅了

        </title>

    </head>

    <body>

    <a href="#down" name="up">跳到下面去</a>

    <!--这是注释-->

今天天气格外好,老马来到桃花岛,看见老杨在洗澡.....

        <h1>床前明月光</h1>

        <h2>地上鞋两双</h2>

        <h3>床上是男女</h3>

        <h4>老马睡的香</h4>

        <h5>老马喜欢老蒋</h5>

        <h6>其实小虎喜欢老马</h6>

        <p>段落</p>

            <p>段落</p>

                <p>段落</p>

                哈哈,<br />

                <center>我又变帅了</center>

                <b>这是粗体</b>

                <strong>这也是粗体</strong>

                <i>斜体内容</i>

                <em>这也是斜体</em>

                <u>下划线</u>

                3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup>

                H<sub>2</sub>O

                <br />

                H2O

                <font color="red" face="全新硬笔行书简" size="">老马好邪恶</font>

                <hr width="200" size="100" color="red" />

            <pre>

                for(int i=0;i100;i++)

                {

                    Console.WriteLine("今天老马回家了");

                }

            </pre>

            小赵喜欢老蒋,老蒋喜欢老牛,老牛喜欢小虎&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,老虎喜欢老马,老马喜欢老苏,

            我今天学习了&lt;and&gt;<br />

            我今天学习了<用&amp;lt;表示>

            <a href="http://www.baidu.com" target="_blank" title="这是百度的网址">百度</a>

            <a name="down" href="#up">跳到上面去</a>

            跳到另一个页面的中间部分

            <a href="http://www.baidu.com"><img src="xy.JPG" title="小杨" alt="帅小杨" /></a>

            <img src="ml.jpg" title="老马" alt="邪恶老马" width="300" height="200" />

<dl>

中国

    <dt>

        <dd>北京</dd>

        <dd>上海</dd>

        <dd>河南</dd>

        <dd>东京</dd>

        <dd>首尔</dd>

    </dt>

</dl>

<ul type="circle"><!--无序列表-->

    <li>

    热火

    </li>

    <li>

    马刺

    </li>

    <li>

    雷霆

    </li>

</ul>

<ol type="none"><!--有序列表-->

    <li>

    热火

    </li>

    <li>

    马刺

    </li>

    <li>

    雷霆

    </li>

</ol>

    </body>

</html>

04表格

<html>

     <head>

         <title>

         表格演示

         </title>

     </head>

     <body>

     <table border="1" height="200" >

     <header> 我是头部

     </header>

         <tr>

             <td rowspan="2">

              第一行的第一个单元格

             </td>

             <td>

              第一行的第二个单元格

             </td>

             <td>

              第一行的第三个单元格

             </td>

         </tr>

         <tr> 

             <td>

              第二行的第二个单元格

             </td>

             <td>

              第二行的第三个单元格

             </td>

         </tr>

          <tr>

             <td>

              第三行的第一个单元格

             </td>

             <td>

              第三行的第二个单元格

             </td>

             <td>

              第三行的第三个单元格

             </td>

         </tr>

          <tr>

             <td>

              第四行的第一个单元格

             </td>

             <td colspan="2">

              第四行的第二个单元格

             </td>

         </tr>

     </table>

     </body>

</html>

05复习上午内容

<th></th>与<td></td>的区别：<th>本身会字体加粗，居中</th>

06表单介绍

07常用的表单标签

<html>

  <head>

      <title>

       表单内容

      </title>

  </head>

  <body>

     <form  action="" method="get">

        <input name="userName" type="text" value="123456" maxlength="10" size="30"/>

        <br/>

        <input name="pwd" type="password" value="" maxlength="6"/>

        <input name="name" type="radio" value="" checked="checked"/>男

        <input name="name" type="radio" value="" />女

        <input name="name" type="radio" value=""  id="a1"/><label for="a1">保密</label><!--可以根据点击文字，改变选择-->

        <!--name值不同，则radio作用的范围不同-->

        <input name="name1" type="radio" value="" checked="checked"/>男

        <input name="name1" type="radio" value="" />女

        <input name="name1" type="radio" value="" />保密

        <input name="name1" type="checkbox" value="1" />吃饭

        <input name="name1" type="checkbox" value="1" />睡觉

        <input name="name1" type="checkbox" value="1" checked="checked"/>打豆豆

        <input name="name1" type="checkbox" value="1" />打篮球

        <input name="name1" type="checkbox" value="1" />打足球

        <input name="name1" type="checkbox" value="1" />打铅球

        <fieldset><!--相当于GroupBox效果-->

        <legend>兴趣</legend>

        <br/><!--name是为了提交表单数据-->

        <input name="name" type="submit" value="提交"/>

        <br/>

        <input name="name" type="reset" value="重置"/>

        <input name="name" type="button" value="弹出一句话" onclick="alert('哇塞，好帅。');"/><!-- 弹窗口 -->

        <input name="name" type="image" value="" src="001.jpg"/>

        </fieldset>

        <select size="3" multiple="mutiple"><!-- 设置多选择 -->

        <optgroup label="中国"><!--仅仅是为了展示，选中不了-->

        <optgroup>

              <option value="1">北京

              </option>

              <option value="2">上海

              </option>

        </select>

                <textarea rows="40" cols="80" readonly="readonly" ><!-- 设置只读属性，让用户无法修改。 -->

    HTML ：超文本标记语言

CSS:层叠样式表

参考书：张孝祥《JavaScript网页开发-体验式学习教程》

什么是浏览器？解释和执行HTML源码的工具。

五大浏览器：IE,FF(FireFox),Chrome,Opera,Safari(Apple)

Trident引擎，（IE的WebBrowser控件）

WebKit引擎（开源浏览器内核）

静态页面与动态页面区别：

静态页面：后缀名为.html或.htm都是静态页面。htl、html都是静态页面。

动态页面：服务器动态生成的Html页面发送给浏览器。asp。aspx、jsp、php等都是动态页面。

开发工具：Editplus(推荐)、NotePad++、UltraEdit

        </textarea>

        <marquee direciton="right" scrolldelay="50"> 参考书：张孝祥《JavaScript网页开发-体验式学习教程》

            </marquee>

     </form>

  </body>

</html>

09 练习讲解

第一个题目：

<html>

   <head><title>表单练习1</title>

    </head>

    <body>

      <table border="1">

       <tr>

       <td>用户名：

       </td>

         <td><input name="name" type="text"  value=""/>

       </td>

       </tr>

        <tr>

       <td>密码：

       </td>

         <td><input name="name" type="password"  value=""/>

       </td>

       </tr>

        </tr>

        <tr>

       <td>验证码：

       </td>

         <td><input name="name" type="text"  value="" size="8"/><image src="0071.jpg" title="学雪">

       </td>

       </tr>

         </tr>

        <tr>

       <td>

       </td>

         <td><input id="al" name="name" type="checkbox"  value="" size="8"/><label for="al">记住密码</label>

       </td>

       </tr>

        </tr>

         </tr>

        <tr>

       <td>

       </td>

         <td><input name="name" type="submit"  value="登录"/>

         <input name="name" type="reset"  value="重置" />

       </td>

       </tr>

      </table>

   </body>

</html>

10 meta内容

22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容的更多相关文章

<2013 06 29> In Deutschland. Thinking in Mechanism, EE, CS, etc.
一在德国近一个月了,主要去了慕尼黑周边的几个景点,天鹅城堡啊,国王湖啊,然后就是在市区逛,玛丽安广场,伊萨河,英国公园,德意志博物馆... ... 总体的印象是非常好的,只是自己不怎么懂德语,但这里 ...
29、html介绍
29.1.前端概述: 1.html.css.js之间的关系: html是页面布局,css是页面渲染,js是让页面动起来(让页面和用户进行交互): 2.浏览器访问web站点获取html页面图示: 3.h ...
mysql 数据操作单表查询 group by 介绍
group by 是在where 之后运行在写单表查询语法的时候应该把group by 写在 where 之后执行顺序 1.先找到表 from 库.表名 2.按照where 约束条件过滤你想要 ...
Django项目的创建与介绍.应用的创建与介绍.启动项目.pycharm创建启动项目.生命周期.三件套.静态文件.请求及数据.配置Mysql完成数据迁移.单表ORM记录的增删改查
一.Django项目的创建与介绍 ''' 安装Django #在cmd中输入pip3 #出现这个错误Fatal error in launcher: Unable to create process ...
django序列化单表的4种方法的介绍
这里主要是讲序列化单表的几种方法先看下models中设计的表结构 from django.db import models # Create your models here. class Book ...
HTML 初识 HTML【整体结构文字图片表格超链接】
HTML 超文本标记语言,页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 网页的本质就是超级文本标记语言,万维网是建立在超文本基础之上的.TML 通过标记符号来标记要 ...
hive内部表&外部表介绍
未被external修饰的是内部表(managed table),被external修饰的为外部表(external table):区别:内部表数据由Hive自身管理,外部表数据由HDFS管理:内部表 ...
10-2 body标签中相关的标签（字体标签，排版标签（div,span），超链接，图片标签）
一排版标签(div,span) 1块级标签   ...
sqlalchemy模块介绍、单表操作、一对多表操作、多对多表操作、flask集成.
今日内容概要 sqlalchemy介绍和快速使用单表操作增删查改一对多多对多 flask集成内容详细 1.sqlalchemy介绍和快速使用 # SQLAlchemy是一个基于 Python实 ...

随机推荐

Mysql的存储过程(以Mysql为例进行讲解)
我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集,经编译后存储在数据库中,用户通过指定存 ...
Android中显示网页的多种方式
在android中显示页面主要有两种方式,一种是在Activity里面直接显示网页,另一种是调用浏览器显示网页.方式不同,使用的方法也不同,下面我们分别讲解. 一.在Activity里面直接显示网页 ...
Ubuntu 14.04 Android 使用Maven二创建自己的Mavenproject
依据https://code.google.com/p/maven-android-plugin/wiki/GettingStarted 介绍,有两种方法能够创建Mavenproject. 第一种方法 ...
CircleWaveProgressBar
https://github.com/eltld/CircleWaveProgressBar
Windows平台下libevent库的使用
1 引子手头上有一个使用了4个年头的HttpClient库,自己封装的,对于集成了IE浏览器的应用程序很友好.但最近想把产品扩展到Chrome和FireFox阵营,萌发了重构HttpClie ...
【JavaScript】AJAX总结（异步JavaScript和XML）
AJAX介绍通过 AJAX,你可以创建更好.更快以及更友好的 WEB 应用程序. AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象. AJAX 应用程 ...
php-工厂模式(转)
针对自己的不足与加深php的认识,选择用php来研究各种设计模式. 今天就看了设计模式的介绍,并学习了工厂模式,因为工厂模式比较简单,也比较常用.工厂模式的最主要作用就是对象创建的封装.简化创建对象操 ...
Center OS jdk tomcat安装
一.jdk安装 1.下载jdk jdk-6u26-linux-i586-rpm.bin 2 安装jdk #sh jdk-6u26-linux-i586-rpm.bin 3.#set ...
虚拟文件系统VFS
Linux的文件系统是由虚拟文件系统作为媒介搭建起来的,虚拟文件系统VFS(Virtual File System)是Linux内核层实现的一种架构,为用户空间提供统一的文件操作接口.它在内核内部为不 ...
jquery ui 改写cloes事件
htmlAjax:{//模板ajax请求参数设置项 url:"template/task/task_create.html", data ...

22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容的更多相关文章

随机推荐

热门专题