zoukankan      html  css  js  c++  java

  • HTML标记语言和CSS样式的简单运用（Nineteenth Day)

         曾经励志下去要坚持把每天所学的知识记录下来，可是坚持了几天后，就觉得自己坚持不下去了。。。。这几天自己好好的想了想，觉得不能坚持也得要坚持，因为要对自己负责，所以得学会逼着自己去做，只有这样才能把一件事做到底。。。。。。今天就总结一下所学到的知识。

    理论：

    HTML（Hyper Text Markup Language） 超文本标记语言

    —HTML文档 = 网页
    —HTML标签(不区分大小写)(有些大写是自动生成的)
    页面包括“格式标签”和“页面内容”
    —网页文件格式：.html或.htm
    HTML是通用语言（只要有浏览器和记事本）
    —使用的工具：记事本、NotePad++、EditPlus、…
    网页三剑客（DreamWeaver、FireWorks、Flash）
    FrontPage
    HTML基本标签：
    —HTML基本结构  <html></html>
    —段落标签  <p></p>
    —空格标签  &nbsp
    —标题标签  <h#>: #=1~6
    —图片标签  <img src=“…” />
    —注释标签  <!--   -->
    —标题标签  <h#></h#>
    HTML水平线  <hr />
    —HTML换行  <br />
     
    —HTML中的特殊符号
    >(&gt)、<(&lt)、&(&amp)、空格(&nbsp)

    HTML元素

    —HTML基本块◦HTML元素
    —HTML元素有始有终
    —HTML可以嵌套
    —HTML使用小写
    HTML属性
    —表现各标签的特征
    <img>中的src即为属性
    —属性都是以“属性名 = 值”的形式出现
    属性的值建议用引号括起来
    属性建议均以键值对的形式括起来
    一个标签可有多个属性，用空格分开
    * HTML图像的属性
    <img src=“URL” />
    —alt属性(显示图片内容)
    —border属性(图片外侧相框宽度,默认像素)
    —.width属性
    —.height属性
     
    * 标尺线—常见属性<hr/>
    size、width、align(left,right,center)、noshade、color
    * HTML字体——客户端字体属性
    —<font>的size属性取值为1~7
     
    * HTML字体——物理字体属性—
    —<b>  定义粗体文本
    —<i>  定义意大利斜体
    —<tt>  定义打字机文本(等宽)
    —<u>  定义下划线文本
    —<sup>、<sub>  定义上下标
    —<s>  定义加删除线的文本
    * HTML字体——逻辑字体属性—
    —<em>  定义强调文本
    —<strong>  定义强调文本
    —<code>  定义计算机代码文本
    —<samp>  定义计算机代码样本
    —<kbd>  定义键盘文本
    —<var>  定义文本的变量部分
    —<dfn>  定义定义项目
    —<cite>  定义引用(citation)
    —<small>  定义小号文本
    —<big>  定义大号文本
     
    预定义格式文本
    —预定义格式文本：<pre></pre>
    通常保留空格和换行，文本以等宽字体呈现
    —常见的应用就是表示计算机源码
    与<code>一起使用，以获得更加精确的语义
    —不建议使用Tab(默认4个空格,有的默认8个空格)(兼容问题)
    例：
    marquee标签（用来显示元素的移动）
    direction属性，设置方向
    left、right、down、up
    —behavior属性，设置模式
    scroll、altermate、slide
    HTML链接
    —HTML使用超链接与另一个文档相连
    —a标签
    —语法
    <a href=“URL”>…</a>(URL可以看成是地址)
    如:<a href="http://www.baidu.com">百度</a><br />
    —链接可以是一个字、一个词或是一句话，也可以是一副图片
    —有两种使用方式
    链接到另一文档
    <a href="MyFirstHTML.htm">跳到指定网页</a>
    跳转到指定地方

    <a name="上面" href="#下面">跳到下面</a>

    <a name="下面" href="#上面">跳到上面</a>
    HTML背景
    —text属性(文本的颜色)
    link属性(连接的颜色）
    —alink属性(active 点击的时候连接的颜色)
    —vlink属性(visited点击之后的颜色)
    —bgcolor属性(背景颜色)
    —background属性(背景图片,平铺)
     
    HTML列表
    —无序列表unorder(圆点)(<ul><li>第一个</li><li>第二个</li></ul>)
    —square(方块) circle(小圆圈) disk(小圆点)
    —有序列表order(数字)(<ol><li>第一个</li><li>第二个</li></ol>)—通过type属性来改变
    —自定义列表—<dl>项目号,解释<dt>c#</dt><dd>很基础的内容</dd></dl>
    HTML表格用法及相关属性
    在 HTML 文档中，广泛使用表格来存放网页上的文本和图像进行布局
    语法：

    <table border=“1”>

      <tr>

      <td>单元格内容</td>

      </tr>

      <tr>

      … …

    </table>

    跨列(合并列）的表格,使用colspan属性来实现

    跨行（合并行）的表格,使用rowspan属性来实现

    属性：

    bgcolor  表格背景颜色

    border  边框宽度，默认0

    bordercolor  边框颜色

    bordercolorlight  边框明亮部分的颜色

    bordercolordark  边框昏暗部分的颜色

    cellspacing  单元格之间的间隔大小

    cellpadding  单元格边框与内容之间的间隔大小

    width  宽度  像素或百分比

    height  高度  像素或百分比

    HTML表单

    HTML表单是用于搜集用户输入的

    HTML表单都扩在一对form标签中

    <form>的常用属性

    action  表示提交的目标服务器

    method  提交的方法get、post

    get(默认,以url提交,就是以地址栏的方式提交)

    post(通过报文提交)

    表单的基本元素

    表单的基本标签

    文本框标签<input type = “text“ />

    —密码框标签<input type = “password”  value="" maxlength=""/>maxlength字符的长度

    文本域标签<textarea>内容</textarea>属性rows(行)和cols(列)

    —提交按钮标签<input type="submit" name="btn" value="提交" />
    —重设按钮标签<input type=“reset” />(重置,可以添加value)
    按钮标签<input type="button" value="按钮" onclick="alert('不要乱按')" />
    —图像标签<input type=“image” />

    复选框标签(有name才能提交）<input type=“checkbox” name=“ch1” value=“chone” checked=”checked“  />文字

    —单选按钮签<input type=“radio” />input type=“radio” name=“ra1” value=“raOne” checked=“checked“ />男(默认加checked=“checked”)
    —文件选择标签<input type=“file” />
    —列表标签

    <select>(name在这加才能提交)

        <option>< /option>(Items)

    </select>

    分区标签：<div></div>  or  <span></span>（字符有多长，就占据多长）

    框架组：不能有<body></body>

    CSS样式（层叠样式表）

    包括：行内样式，内嵌样式，类（class）样式，id样式，创建.css样式文件

    行内样式级别最高，外部样式（样式表）高于内部样式。

    基本样式：

    font-size:     字体大小

    font-style:    字体样式（斜体，歪斜体）

    font-weight:   字体加粗

    font-lighter:  字体变细

    font-variant:small-caps 小型的大写字母

    text-decoration:underline（下划线）or overline(上划线) or line-through(中划线) 

    text-indent:    字体缩进

    text-height:    行高

    text-transform:uppercase(大写字母) or lowercase(小写字母) or capitalize(首字母大写)

    letter-spacing：  字间距

    Word-spacing：    单词间的间距

    border-width：    边框宽度

    border-style：    边框样式

    border-color:     边框颜色

    background-color：     背景颜色

    background-image：     背景图片

    background-repeat：no-repeat   图片不循环

    background-attachment：fixed   页面滚动，背景图片位置不动

    background-position：     背景图片位置

    实操：（简单举例出几个）

    1. marquee标签的运用

    效果：

    2.图像标签的使用

     
    3.表格的使用
     
    效果：
     
    4.表单的使用
    <body>
    <form>

        <h1>贵美网站会员登录</h1><br /><br />

        <label>贵美网站邮箱：</label><input type="email" name="email" /><br /><br />

        <label >输  入  密  码:</label>     <input type ="password" name="pwd" maxlength="6" /><br /><br />

        <label >再次输入密码：</label><input type ="password" name="apwd" maxlength="6" /><br /><br />

        <input type ="radio" name ="release" checked />豪华版   <input type ="radio" name ="release" />简洁版<br /><br /> <!--checked表示当前被选中-->

        <input type ="checkbox" name ="login" />自动登录 <input type ="checkbox" name ="login" />安全登录<br /><br />

        <input type ="reset" value ="重置" name="no" />  <input type ="submit" value="登录" name ="ok" /><br /><br />

       <input type  ="submit" style="background-color:orange;font-size:x-large;color:white" value ="现在就去注册" name="register" />

    </form>
</body>

     运行效果：


     框架组的运用：

    运行效果：


    CSS样式的运用

     样式表：

    新建一个样式表，

    好了，今天就先写到这里吧。希望自己明天还能继续。加油！

     
  • 相关阅读:
    线程范围内共享数据
    Swagger+ springfox +Spring mvc
    Nginx代理实现跨域
    实现AJAX跨域访问方式一
    Tomcat 调优及 JVM 参数优化
    REST接口设计规范
    IDEA里面添加lombok插件,编写简略风格Java代码
    intelliJ idea 使用技巧&方法
    IntelliJ IDEA 创建maven项目
    IntelliJ IDEA + Maven创建Java Web项目
  • 原文地址：https://www.cnblogs.com/ysaw/p/4135990.html
Copyright © 2011-2022 走看看