html 笔记

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>了不起的盖茨比</title>

<style type="text/css">

h2{text-align:center;

font-size:25px;

color:#930;

font-family:微软雅黑;

font-weight:bold;

    }

span{color:red;

}

</style>

</head>

<body>

        <img src="file:///E|ic_fengjing.jpg" width="1024" height="680" alt="显示错误">

<h1>了不起的盖茨比</h1>

                  <h2>侠名</h2>

    <p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>

<br>

    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p><hr><br>

    <address>

 中国

    </address>

</body>

</html>

<style type="text/css"></style>表示这是样式表,在中间放入css内容；

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>了不起的盖茨比</title>

<style type="text/css">

h2{text-align:center;

font-size:25px;

color:#930;

font-family:微软雅黑;

font-weight:bold;

    }

span{color:red;

}

</style>

</head>

h2 位后面的子标题， text-align:center;文本居中

font-size:25px;

font-weight:bold;加粗

span{color:red;}为后面的“美国梦”的单独样式;

定义在style中,style在head中

文本要显示的内容在body中

<em>用斜体表示</em> <strong>用粗体表示</strong>

<q>对简短的文本的引用</q> <blockquote>对长文本的引用</blockquote>

<br>分行显示文本 <br>为空标签

<hr> 水平线 <hr>为空标签

空格 &nbsp

表单

<form   method="传送方式"   action="服务器文件">

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ：数据传送的方式（get/post）。

<form    method="post"   action="save.php">

        <label for="username">用户名:</label>

        <input type="text" name="username" />

        <label for="pass">密码:</label>

        <input type="password" name="pass" />

</form>

文本

<textarea  rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

<form  method="post" action="save.php">

        <label>联系我们</label>

        <textarea cols="50" rows="10" >在这里输入内容...</textarea>

</form>

使用单选框、复选框

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

单选框中name必须相同， checked="checked"说明被选中了

使用下拉列表框，节省空间

<option value='提交值'>选项</option> 提交值即向服务器提交的值，选项即显示的值

<option value="看书" selected="selected">看书</option> 这个就在第一个显示

使用下拉列表框进行多选

使用重置按钮，重置表单信息

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

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

<input type="submit" value="确定" />
<input type="reset" value="重置" />type值确定

<table>

    <caption>标题文本</caption>

    <tr>

        <td>…</td>

        <td>…</td>

        …

    </tr>

…

</table>

<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">

  <caption>2012年到2013年库存记录</caption>

  <tr>

    <th>产品名称 </th>

    <th>品牌 </th>

    <th>库存量（个） </th>

    <th>入库时间 </th>

  </tr>

  <tr>

    <td>耳机 </td>

    <td>联想 </td>

    <td>500</td>

    <td>2013-1-2</td>

  </tr>

  <tr>

    <td>U盘 </td>

    <td>金士顿 </td>

    <td>120</td>

    <td>2013-8-10</td>

  </tr>

  <tr>

    <td>U盘 </td>

    <td>爱国者 </td>

    <td>133</td>

    <td>2013-3-25</td>

  </tr>

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

 <a  href="https://www.baidu.com"  title="baidu">百度</a>

<a href="目标网址" target="_blank">click here!</a>在新窗口中打开页面
<a href="https://www.baidu.com" target="_blank" >百度</a>

视频播放
</video>

controls 如果出现该属性，则向用户显示控件，比如播放按钮。值是autoplay

autoplay如果出现该属性，则视频在就绪后马上播放。值是autoplay

loop如果出现该属性，则当媒介文件完成播放后再次开始播放。值是loop

poster 视频没有播放前要显示的图片值是url

<video width="300" height=180 controls="controls"
autoplay="autoplay" poster="image/ic_shanshui.jpg"> //如果有autoplay 则poster就不需要了
<source src="avi/<%=video%>" />
视频播放
</video>

response重定向

如果用户输入的表单信息不完整，就会再被引导该表单的输入页面。

可以使用 response的sendRedirect(Url url)方法实现用户的重定向

example3_1.jsp

<%@ page contentType="text/html; charset=gb2312"%>

<html>

<body>

    <form action="example3_3.jsp" method="post">

        姓名:<input type="text" name="name"> <input type="submit"

            value="提交" name="submit">

    </form>

</body>

</html>

example3_3.jsp

<%@ page contentType="text/html; charset=gb2312"%>

<%

    request.setCharacterEncoding("gb2312");

    String name = request.getParameter("name");

    if (name == null || name.length() == 0) {

        response.sendRedirect("example3_1.jsp");

    }

%>欢迎<%=name%>来到本网页.

即未输入姓名就会重新定向到example3_1.jsp

<%@ page contentType="text/html; charset=gb2312"%>

<%@ page import="java.util.*"%>

<html>

<p>

    现在的时间是:<br>

    <%

        out.println("" + new Date());//必须要有java.util类

        response.setHeader("Refresh", "1");

    %>

</html>

setHeader 响应头，值为每5s刷新一次页面。

CSS样式

1.内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这里文字是红色。</p>

2.嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：

<style type="text/css">

span{

color:red;

}

</style>

3.外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

<link href="base.css" rel="stylesheet" type="text/css" />

注意：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

index.html

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>嵌入式css样式</title>

<link href="style.css" rel="stylesheet" type ="text/css">   //外部式

<style type="text/css">  //嵌入式

span{

   color:red;

}

</style>

</head>

<body>   //内联式

    <p>慕课网，<span style="color:pink">    超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>

</body>

</html>

优先级：内联式 > 嵌入式 > 外部式

style.css

span{

   color:blue;

}

每一条css样式声明（定义）由两部分组成，形式如下：

选择器{

    样式;

}


类选择器

.类选器名称{css样式代码;}

1、英文圆点开头

2、其中类选器名称可以任意起名（但不要起中文噢）

使用方法：

第一步：使用合适的标签把要修饰的内容标记起来，如下：

<span>胆小如鼠</span>

第二步：使用class="类选择器名称"为标签设置一个类，如下：

<span class="stress">胆小如鼠</span>

第三步：设置类选器css样式，如下：

.stress{color:red;}/*类前面要加入一个英文圆点*/

ID选择器

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

右侧代码编辑器中就是一个ID选择符的完整实例。

1.输入:

<span id="setGreen">公开课</span>

2.，输入:

#setGreen{

   color:green;

}

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

<style type="text/css">

body{ margin:0; padding:0; font-size:20px; font-weight:bold}

div{ line-height:50px}

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}

.main{ height:600px; margin:0 310px 0 210px; background:#9CF}

.right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}

</style>

</head>

<body>

    <div class="left">left</div>

    <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>

    <div class="right">right</div>

</body>

</html>

三列布局：不能用浮动的，

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}

.main{ height:600px; margin:0 310px 0 210px; background:#9CF}

.right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}

position:absolute; left:0; top:0  采用绝对布局， 距离左，上边为0；
中间宽度自适应，  margin:0 310px     这里的310>300即距离右边310px,因此会有10px的间距

position:absolute; right:0; top:0  采用绝对布局， 距离右，上边为0；

font-family: Arial, Helvetica, sans-serif, "宋体";

翻译过来就是，假设有一段文字，每个字符按照 Arial、Helvetica、无衬线字体、宋体的顺序来渲染。

a{text-decoration:none;}取消超链接原来带有的下划线
a:hover{text-decoration:underline;} 鼠标滑过时有下划线出现。

html 笔记的更多相关文章

git-简单流程（学习笔记）
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕笔记http://www.cnbl ...
PHP-自定义模板-学习笔记
1. 开始这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
PHP-会员登录与注册例子解析-学习笔记
1.开始最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
NET Core-学习笔记（三）
这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
springMVC学习笔记--知识点总结1
以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...
读书笔记汇总 - SQL必知必会（第4版）
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
2014年暑假c#学习笔记目录
2014年暑假c#学习笔记一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

【原创翻译】Reducing Branch Delay to Zero in Pipelined Processors
在流水线处理器中减少分支延迟到零 Antonio M. Gonzalez and Jose M. Llaberia 摘要一种减少流水处理器中分支延迟到零的机制将在本文被描述以及评估.这种机制基于多重 ...
MySQL导入数据非常慢的解决办法
MySQL导出的SQL语句在导入时有可能会非常非常慢,经历过导入仅45万条记录,竟用了近3个小时.在导出时合理使用几个参数,可以大大加快导入的速度. -e 使用包括几个VALUES列表的多行INSER ...
[Hadoop源码解读]（五）MapReduce篇之Writable相关类
前面讲了InputFormat,就顺便讲一下Writable的东西吧,本来应当是放在HDFS中的. 当要在进程间传递对象或持久化对象的时候,就需要序列化对象成字节流,反之当要将接收到或从磁盘读取的字节 ...
java数据类型图：
java数据类型图: ┏数值型━┳━整数型:byte short int long ┏基本数据类型━━┫ ...
Response.Write用法总结
问题一: Response.Write 后连接Response.Redirect ,则Response.Write无法显示,直接跳转入Response.Redirect 的页面. 解决方案: Resp ...
PHP libxml RSHUTDOWN安全限制绕过漏洞(CVE-2012-1171)
漏洞版本: PHP PHP 5.5.x 漏洞描述: BUGTRAQ ID: 65673 CVE(CAN) ID: CVE-2012-1171 PHP是一种HTML内嵌式的语言. PHP 5.x版本内的 ...
[NOIP1999]拦截导弹
1999年NOIP全国联赛提高组题目描述 Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但 ...
多线程归并排序的实现 java
多线程是非常适合归并排序的,因为归并排序是分治法,所以分割后可以独立运行,最后将结果归并起来就行了.如何写一个多线程程序呢?今天无聊,总结一下啊. 首先写个普通的归并排序,以后的多线程就调用这个排序. ...
运算符优先级 (Transact-SQL)
当一个复杂的表达式有多个运算符时,运算符优先级决定执行运算的先后次序. 执行的顺序可能严重地影响所得到的值. 运算符的优先级别如下表中所示. 在较低级别的运算符之前先对较高级别的运算符进行求值.
Headless MSBuild Support for SSDT (*.sqlproj) Projects [利用msbuild自动化部署 .sqlproj]- 摘自网络
Update: breaking change: http://sqlproj.com/index.php/2012/10/dacfx-sept-2012-updates-break-headless ...