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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">不能少这句话,不然会乱码, 如果有乱码可以改后面的charset .

<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

<address>地址</address>

表单

<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>结束。

2cols :多行输入域的列数

3rows :多行输入域的行数

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="看书">看书</option>

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

使用下拉列表框进行多选

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

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

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

value按钮上显示的文字

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

<table summary="表格简介文本">

<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 width="300" height=180 controls="controls" "    autoplay="autoplay">
<source src="avi/ic_shipin1.flv"/>

视频播放
</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-familyArialHelveticasans-serif"宋体";

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

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

html 笔记的更多相关文章

  1. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  2. git-简单流程(学习笔记)

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  3. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  4. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  7. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  8. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  9. NET Core-学习笔记(三)

    这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...

  10. springMVC学习笔记--知识点总结1

    以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...

随机推荐

  1. 使用script创建标签添加属性值和添加样式

    <mark>使用script创建标签和给标签属性值以及样式的方法</mark><script> window.onload=function(){ var btn= ...

  2. .NET C# 使用S22.Imap.dll接收邮件 并且指定收取的文件夹的未读邮件,并且更改未读准态

    string host = Conf.ConfigInfo.POP_Host; int port = Conf.ConfigInfo.POP_Port; string username =Conf.C ...

  3. 孙鑫视频学习:改变窗口过程函数中出现error C2440错误的解决方法

    在Visual Studio 2010中,即使代码是完完全全按照孙鑫视频中的敲,也会在出现error C2440,这是因为开发平台由VC6.0升级至VS2010,需要将原有的项目迁移.VS2010对消 ...

  4. MapReduce:详解Shuffle过程

    Shuffle过程,也称Copy阶段.reduce task从各个map task上远程拷贝一片数据,并针对某一片数据,如果其大小超过一定的阀值,则写到磁盘上,否则直接放到内存中. 官方的Shuffl ...

  5. leetcode problem 37 -- Sudoku Solver

    解决数独 Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated ...

  6. c#判断输入textbox是否为数字

    asp.net判断输入文字是否是数字 方案一:/**//// <summary> /// 名称:IsNumberic /// 功能:判断输入的是否是数字 /// 参数:string oTe ...

  7. Mysql insert声明优化

    1) 假设你同一时候从同一客户插入非常多行,使用多个值表的INSERT语句. 这比使用分开INSERT语句快(在一些情况中几倍).    Insert into test values(1,2),(1 ...

  8. [iOS Animation]-CALayer 变换

    变换 很不幸,没人能告诉你母体是什么,你只能自己体会 -- 骇客帝国 在第四章“可视效果”中,我们研究了一些增强图层和它的内容显示效果的一些技术,在这一章中,我们将要研究可以用来对图层旋转,摆放或者扭 ...

  9. 180114 用装饰器实现在不改变函数调用者的代码基础上,实现在函数执行前后分别打印&quot;before&quot; 和 &quot;after&quot;

    def bef_aft(func): #定义一个名为bef_aft的函数名 ,()里的是函数的参数,设置为func, 函数的参数分为实参和形参,有个参数传递的概念 ,下面有很多的解释 def PRin ...

  10. HTML 学习笔记 day three

    HTML学习笔记 Day three 7.2插入多媒体元素 插入音乐 语法结构:<embed  src=”音乐文件的路径”></embed> 属性: Autostart:他只有 ...