zoukankan      html  css  js  c++  java

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

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

    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="看书">看书</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{ 200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; 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;}  鼠标滑过时有下划线出现。
    


    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  产品经理怎么样用图表传达数据信息（多图）
                    
    劣质成本分析（2/3+3/3）
                    
    劣质成本分析（1/3）
                    
    《归来》小诗二首
                    
    减少过程中的浪费（2/2）
                    
    减少过程中的浪费（1/2）
                    
    三种过程分析工具
                    
    必知-网站常用度量指标（2/2）
                    
    必知-网站常用度量指标（1/2）
                    
    产品经理网站数据分析之测量问题现状(四)
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/yi-mi-yangguang/p/5914611.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看