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

理论：

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.表单的使用
  1. <body>
  2.     <form>
  3.  
  4.         <h1>贵美网站会员登录</h1><br /><br />
  5.  
  6.         <label>贵美网站邮箱：</label><input type="email" name="email" /><br /><br />
  7.  
  8.         <label >输  入  密  码:</label>     <input type ="password" name="pwd" maxlength="6" /><br /><br />
  9.  
  10.         <label >再次输入密码：</label><input type ="password" name="apwd" maxlength="6" /><br /><br />
  11.  
  12.         <input type ="radio" name ="release" checked />豪华版   <input type ="radio" name ="release" />简洁版<br /><br /> <!--checked表示当前被选中-->
  13.  
  14.         <input type ="checkbox" name ="login" />自动登录 <input type ="checkbox" name ="login" />安全登录<br /><br />
  15.  
  16.         <input type ="reset" value ="重置" name="no" />  <input type ="submit" value="登录" name ="ok" /><br /><br />
  17.  
  18.        <input type  ="submit" style="background-color:orange;font-size:x-large;color:white" value ="现在就去注册" name="register" />
  19.  
  20.     </form>
  21. </body>

 运行效果：


 框架组的运用：

运行效果：

CSS样式的运用

 样式表：

新建一个样式表，

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

 

HTML标记语言和CSS样式的简单运用（Nineteenth Day)的更多相关文章

  1. HTML语言和CSS开发

    第一张 HTML基础1.HTML:超文本标记语言(它除了文字,还能写图片.视频.音频.交互),他不是编程语言,它是标记语言2. <!DOCTYPE html> HTML5版本申明 < ...

  2. HTML语言和CSS开发商业站点 错题

    1.关于css为什么会出现Bug说法不正确的是(). (选项两项) A.编写CSS样式是需要在不同浏览器中实现表现一致 B.各大主流浏览器由于不同厂家开发,浏览器使用的内核不同,支持CSS的程度不同 ...

  3. 使用HTML语言和CSS开发商业站点

    第一章 预习笔记 单词: head:前进 title:标题 meta:超过 body:身体.尸体 W3C:全球最大的中文Web技术教程 strong:强烈的 target:目标,对象 href:水平参 ...

  4. c语言和c++栈的简单实现以及构造器的原理

    也就是训练将原来的c语言 用类表示出来.. 关于构造器: //1与类名相同 没有返回值 被系统生成对象时自动调用,用于初始化 //2 可以有参数 构造器重载 默认参数 //3 重载和默认不能同时存在, ...

  5. Boostrap全局CSS样式

    1.Bootstrap提供的CSS Reset * { box-sizing: border-box; } body { font ...; color: #333; background: ...; ...

  6. CSS样式表与HTML结合的方法

    从此王子和公主幸福的生活在了一起:) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...

  7. 为什么我获取不到这个css样式？js原生获取css样式总结

    还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...

  8. CSS样式表初学，比C#和JS简单

    今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS C ...

  9. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

随机推荐

  1. ubuntu rc.local 无效 解决方案(转)

    为了让mysql开机启动,我将mysql命令添加到/etc/rc.local中,但怎么也运行不了.一开始认为只是/etc/rc.local的权限问题,但通过以下命令修改后,还是不起作用. sudo c ...

  2. C#版-百度网盘API的实现（二）

    在这篇文章中,我们通过代码来实现百度网盘的简单操作, 一,登陆,在代码中,我有一个Baidu1的类,实例化该类时回执行登陆方法,该类对外开放了三个方法, 1,GetFileDir获取根目录下的文件夹及 ...

  3. append与after区别

    append() & prepend()实在元素内插入内容(该内容变成该元素的子元素或节点),after() & before()是在元素的外面插入内容(其内容变成元素的兄弟节点).

  4. cocos2d-x 3.0rc2 对于每个包执行情况的重要平台 （超级方便）

    首先,你需要下载三个文件:每间 android-ndk android-sdk ant 下载位置可以随意:由于3.0rc2执行setup.py  自己主动搜索这三个文件 win32cmd以下: (1) ...

  5. bp神经网络及matlab实现

    本文主要内容包含: (1) 介绍神经网络基本原理,(2) AForge.NET实现前向神经网络的方法,(3) Matlab实现前向神经网络的方法 . 第0节.引例  本文以Fisher的Iris数据集 ...

  6. C++编程技术之 异常处理（上）

    增强错误恢复能力是提高代码健壮性的最有力途径之一 之所以平时编写代码的时候不愿意去写错误处理,主要是由于这项工作及其无聊并可能导致代码膨胀,导致的结果就是本来就比较复杂的程序变得更加复杂.当然了,前面 ...

  7. （转）Web开发中最致命的小错误

    Web开发中最致命的小错误 现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性.本文收集了一些在 Web 开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助 Web 开发者更好 ...

  8. 利用Telnet来模拟Http请求 有GET和POST两种

    利用Telnet来模拟Http请求---访问百度.       1.打开"运行"->cmd进入命令环境:       2.输入"telnet www.baidu.c ...

  9. 阿里P8分享：关于做事方式与做事态度

    转载:http://www.neitui.me/y/1019 阿里P8分享:关于做事方式与做事态度贴图1: 贴图2: 贴图3:

  10. C#反序列化json字符串时，提示：应为来自命名空间“”的元素“root”。。遇到名称为“”、命名空间为“”的“None”。

    反序列化调用接口返回的字符串时,出现:应为来自命名空间“”的元素“root”..遇到名称为“”.命名空间为“”的“None”.,导致反序列化数据失败,这种失败并有时候并不会直接提示反序列化失败(抛异常 ...