1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>了不起的盖茨比</title>
  6. <style type="text/css">
  7. h2{text-align:center;
  8. font-size:25px;
  9. color:#930;
  10. font-family:微软雅黑;
  11. font-weight:bold;
  12.  
  13.     }
  14. span{color:red;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19.  
  20.         <img src="file:///E|ic_fengjing.jpg" width="1024" height="680" alt="显示错误">
  21. <h1>了不起的盖茨比</h1>
  22.                   <h2>侠名</h2>
  23.     <p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
  24. <br>
  25.  
  26.     <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p><hr><br>
  27.     <address>
  28.  中国
  29.     </address>
  30. </body>
  31.  
  32. </html>

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

  1. <style type="text/css"></style>表示这是样式表,在中间放入css内容；
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. <title>了不起的盖茨比</title>
  4. <style type="text/css">
  5. h2{text-align:center;
  6. font-size:25px;
  7. color:#930;
  8. font-family:微软雅黑;
  9. font-weight:bold;
  10.  
  11.     }
  12. span{color:red;
  13. }
  14. </style>
  15. </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>

表单

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

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

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

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

  1. <form    method="post"   action="save.php">
  2.         <label for="username">用户名:</label>
  3.         <input type="text" name="username" />
  4.         <label for="pass">密码:</label>
  5.         <input type="password" name="pass" />
  6. </form>
  7.  
  8. 文本
  1. <textarea  rows="行数" cols="列数">文本</textarea>

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

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

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

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

  1. <form  method="post" action="save.php">
  2.         <label>联系我们</label>
  3.         <textarea cols="50" rows="10" >在这里输入内容...</textarea>
  4. </form>

使用单选框、复选框

  1. <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="表格简介文本">

  1. <table>
  2.     <caption>标题文本</caption>
  3.     <tr>
  4.         <td>…</td>
  5.         <td>…</td>
  6.         …
  7.     </tr>
  8. …
  9. </table>
  1. <table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
  2.   <caption>2012年到2013年库存记录</caption>
  3.   <tr>
  4.     <th>产品名称 </th>
  5.     <th>品牌 </th>
  6.     <th>库存量（个） </th>
  7.     <th>入库时间 </th>
  8.   </tr>
  9.   <tr>
  10.     <td>耳机 </td>
  11.     <td>联想 </td>
  12.     <td>500</td>
  13.     <td>2013-1-2</td>
  14.   </tr>
  15.   <tr>
  16.     <td>U盘 </td>
  17.     <td>金士顿 </td>
  18.     <td>120</td>
  19.     <td>2013-8-10</td>
  20.   </tr>
  21.   <tr>
  22.     <td>U盘 </td>
  23.     <td>爱国者 </td>
  24.     <td>133</td>
  25.     <td>2013-3-25</td>
  26.   </tr>
  1. <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
  2.  
  3.  <a  href="https://www.baidu.com"  title="baidu">百度</a>
  4.  
  5. <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

  1. <%@ page contentType="text/html; charset=gb2312"%>
  2. <html>
  3. <body>
  4.     <form action="example3_3.jsp" method="post">
  5.         姓名:<input type="text" name="name"> <input type="submit"
  6.             value="提交" name="submit">
  7.  
  8.     </form>
  9. </body>
  10. </html>

example3_3.jsp

  1. <%@ page contentType="text/html; charset=gb2312"%>
  2. <%
  3.     request.setCharacterEncoding("gb2312");
  4.     String name = request.getParameter("name");
  5.     if (name == null || name.length() == 0) {
  6.         response.sendRedirect("example3_1.jsp");
  7.  
  8.     }
  9. %>欢迎<%=name%>来到本网页.

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

  1. <%@ page contentType="text/html; charset=gb2312"%>
  2. <%@ page import="java.util.*"%>
  3. <html>
  4. <p>
  5.     现在的时间是:<br>
  6.     <%
  7.         out.println("" + new Date());//必须要有java.util类
  8.         response.setHeader("Refresh", "1");
  9.     %>
  10.  
  11. </html>

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

CSS样式

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

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

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

  1. <style type="text/css">
  2. span{
  3. color:red;
  4. }
  5. </style>
  6.  

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>标签之内。

  1. index.html
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>嵌入式css样式</title>
  6. <link href="style.css" rel="stylesheet" type ="text/css">   //外部式
  7. <style type="text/css">  //嵌入式
  8. span{
  9.    color:red;
  10. }
  11. </style>
  12. </head>
  13. <body>   //内联式
  14.     <p>慕课网，<span style="color:pink">    超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
  15. </body>
  16. </html>

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

style.css

  1. span{
  2.    color:blue;
  3. }

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

  1. 选择器{
  2.     样式;
  3. }
  1.  
  2. 类选择器
  1. .类选器名称{css样式代码;}

1、英文圆点开头

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

使用方法：

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

  1. <span>胆小如鼠</span>

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

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

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

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

ID选择器

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

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

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

1.输入:

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

2.，输入:

  1. #setGreen{
  2.    color:green;
  3. }
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>三列布局</title>
  6. <style type="text/css">
  7. body{ margin:0; padding:0; font-size:20px; font-weight:bold}
  8. div{ line-height:50px}
  9. .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
  10. .main{ height:600px; margin:0 310px 0 210px; background:#9CF}
  11. .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}
  12. </style>
  13. </head>
  14.  
  15. <body>
  16.  
  17.     <div class="left">left</div>
  18.     <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
  19.     <div class="right">right</div>
  20. </body>
  21. </html>
  1. 三列布局：不能用浮动的，
  1. .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
  2. .main{ height:600px; margin:0 310px 0 210px; background:#9CF}
  3. .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}
  1.  
  1. position:absolute; left:0; top:0  采用绝对布局， 距离左，上边为0；
    中间宽度自适应，  margin:0 310px     这里的310>300即距离右边310px,因此会有10px的间距
  1. position:absolute; right:0; top:0  采用绝对布局， 距离右，上边为0；
  1.  
font-family: Arial, Helvetica, sans-serif, "宋体";

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

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

html 笔记的更多相关文章

  1. git-简单流程（学习笔记）

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

  2. js学习笔记：webpack基础入门（一）

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

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

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

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

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

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

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

  6. NET Core-学习笔记（三）

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

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

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

  8. 读书笔记汇总 - SQL必知必会（第4版）

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  9. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  10. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

  1. bzoj2756

    看到相邻格子都+1的操作一下就想到黑白染色了相邻格子都+1说明不管怎么弄,黑格子的总和和白格子总和的差总是定值这里首先要注意,最后不一定变成的是所有元素中的最大值,可能比它大比如 1 2 2     ...

  2. Linux 的档案权限与目录配置

    档案权限 Linux最优秀的地方之一,就在于他的多人多任务环境. 而为了让各个使用者具有较保密的档案数据,因此档案的权限 管理就变的很重要了. Linux一般将档案可存取的身份分为三个类别,分别是 o ...

  3. InstallShield 一些事件说明

    InstallShield 一些事件说明,和常量代码 大家可以把所有事件都点出来然后单步追踪就行了,我的经验是一般是从OnShowUI第一次显示UI界面开始,很容易就找到大家想处理的事件,另贴几个我发 ...

  4. LittleTools之输出RenderTexture工具

    using UnityEngine; using System.Collections; using System.IO; /// <summary> /// Save render te ...

  5. 【HTML】Advanced4：Accessible Links

    1.Tab <ul> <li><a href="here.html" tabindex="1">Here</a> ...

  6. mysql 5.5 中的示例数据库 employees

    http://dev.mysql.com/doc/employee/en/employees-installation.html

  7. 2013华为校园招聘java实现(大家水个回复啊)

    package 乒乒乓乓; import java.util.Scanner; /* * * author:hansongjiang 分别求整数数组里面的奇数与偶数之和 问题描述:从标准输入里面接收一 ...

  8. Casio普通计算器编程

    用xelatex写了个奇怪的东西……欢乐向 PDF  http://files.cnblogs.com/htfy/calc.pdf TEX http://files.cnblogs.com/htfy/ ...

  9. HDU 3392 Pie(DP)

    题意:有一些男生女生,男生女生数量差不超过100 ,男生女生两两配对.要求求出一种配对方法,使每一对的高度差的和最小. 思路:(我是真的笨笨笨!!)设人少的一组人数为n,b[],人多的一组人数为m,g ...

  10. storm-starter项目概述

    storm-starter项目包含使用storm的各种各样的例子.项目托管在GitHub上面,其网址为: http://github.com/nathanmarz/storm-starter stor ...