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图像的属性

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>

跳转到指定地方

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 文档中，广泛使用表格来存放网页上的文本和图像进行布局

语法：

<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样式的运用

样式表：

新建一个样式表，

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

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

HTML语言和CSS开发
第一张 HTML基础1.HTML:超文本标记语言(它除了文字,还能写图片.视频.音频.交互),他不是编程语言,它是标记语言2. <!DOCTYPE html> HTML5版本申明 < ...
HTML语言和CSS开发商业站点错题
1.关于css为什么会出现Bug说法不正确的是(). (选项两项) A.编写CSS样式是需要在不同浏览器中实现表现一致 B.各大主流浏览器由于不同厂家开发,浏览器使用的内核不同,支持CSS的程度不同 ...
使用HTML语言和CSS开发商业站点
第一章预习笔记单词: head:前进 title:标题 meta:超过 body:身体.尸体 W3C:全球最大的中文Web技术教程 strong:强烈的 target:目标,对象 href:水平参 ...
c语言和c++栈的简单实现以及构造器的原理
也就是训练将原来的c语言用类表示出来.. 关于构造器: //1与类名相同没有返回值被系统生成对象时自动调用,用于初始化 //2 可以有参数构造器重载默认参数 //3 重载和默认不能同时存在, ...
Boostrap全局CSS样式
1.Bootstrap提供的CSS Reset * { box-sizing: border-box; } body { font ...; color: #333; background: ...; ...
CSS样式表与HTML结合的方法
从此王子和公主幸福的生活在了一起:) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...
为什么我获取不到这个css样式？js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求简单就是获取一个css的height (好吧就是一个这么简单的需求) 实践好吧长时间的JQ 我已经对原生无能了 ...
CSS样式表初学，比C#和JS简单
今天咱们一起来看下CSS样式表的基本基础经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS C ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

随机推荐

Codeforces 263E
Codeforces 263E 原题题目描述:一个\(n \times m\)的矩阵,每格有一个数,给出一个整数\(k\),定义函数\(f(x, y)\): \[f(x, y)=\sum_{i=1} ...
var 与function的权重浅析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Ubuntu 13.04 小米2S连接Eclipse真机调试
最近想继续将自己以前的一些Android程序代码进行改进和优化,遂将以前的代码在windows下导入eclipse工程,谁知导入后便eclipse假死,甚至windows资源管理器也动弹不得,诡异的是 ...
img 中的src的应用
在页面载入的时候,img标签的src 会跟填写的内容去载入,servlet 或者controller 或者你自己觉得希望载入的java代码. 我们这边举一个载入servlet的样例. <img ...
ASPxGridview在对话框中无法编辑！！
aspxgridview在使用window.showModelDialog(或者window.showModelessDialog)打开的窗体中居然无法进入编辑!好奇怪啊 . 点击后显示“无法显示网 ...
在WHERE子句中引用取别名的列
版权说明:作者:张颖希(PocketZ's Blog)出处:http://www.cnblogs.com/PocketZ本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页 ...
hadoop之hdfs学习
简介 HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Go ...
socket select模型
由于socket recv()方法是堵塞式的,当多个客户端连接服务器时,其中一个socket的recv调用时,会产生堵塞,使其他连接不能继续. 如果想改变这种一直等下去的焦急状态,可以多线程来实现(不 ...
Hadoop学习之YARN框架
转自:http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-yarn/,非常感谢分享! 对于业界的大数据存储及分布式处理系统来说,H ...
1)phpmyadmin导入数据库大小限制修改
phpmyadmin默认导入数据库文件大小为2M,但一般网站的数据库导出的文件都会超出这个限制,要导入超过2M的数据库文件就需要手动修改php.ini配置文件!最近做项目遇到这个问题,顺便记录下了解决 ...

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

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

随机推荐

热门专题