HTML标记语言和CSS样式的简单运用(Nineteenth Day)
2014-12-01 21:06
567 查看
曾经励志下去要坚持把每天所学的知识记录下来,可是坚持了几天后,就觉得自己坚持不下去了。。。。这几天自己好好的想了想,觉得不能坚持也得要坚持,因为要对自己负责,所以得学会逼着自己去做,只有这样才能把一件事做到底。。。。。。今天就总结一下所学到的知识。
[b]理论:[/b]
HTML(Hyper Text Markup Language) 超文本标记语言
HTML文档 = 网页
HTML标签(不区分大小写)(有些大写是自动生成的)
页面包括“格式标签”和“页面内容”
网页文件格式:.html或.htm
HTML是通用语言(只要有浏览器和记事本)
使用的工具:记事本、NotePad++、EditPlus、…
网页三剑客(DreamWeaver、FireWorks、Flash)
FrontPage
HTML基本标签:
HTML基本结构 <html></html>
段落标签 <p></p>
空格标签  
标题标签 <h#>: #=1~6
图片标签 <img src=“…” />
注释标签 <!-- -->
标题标签 <h#></h#>
HTML水平线 <hr />
HTML换行 <br />
HTML中的特殊符号
>(>)、<(<)、&(&)、空格( )
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字体——客户端字体属性
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/ac8ff52d2a4bfa5ac9128989b4c32a22.png)
<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个空格)(兼容问题)
例:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/8236fa768037bf20396ed285e263f9f9.png)
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(通过报文提交)
表单的基本元素
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/d1adde32dfb744b7e56b426b018cd371.png)
表单的基本标签
文本框标签<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>
[b]CSS样式(层叠样式表)[/b]
[b]包括:行内样式,内嵌样式,类(class)样式,id样式,创建.css样式文件[/b]
[b]行内样式级别最高,外部样式(样式表)高于内部样式。[/b]
[b]基本样式:[/b]
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: 背景图片位置
[b]实操:(简单举例出几个)[/b]
[b][b]1. marquee标签的运用[/b][/b]
[b][b]
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/a4343a58990fa4ef6350b2a2ac2b7dd3.png)
[/b][/b]
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/2d97b094e99ab78ebb2cc0cd9584f021.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/549ecb36a01c1229bdfb88515920b8f8.png)
[b]2.图像标签的使用[/b]
[b]
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/2c574947f58c3b2314f48a055d1067f2.png)
[/b]
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/18db32fe09834003e4bc6dd60a3a35b6.png)
[b]3.表格的使用[/b]
[b]
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/e597dc70219bc269809da3216f38e493.png)
[/b]
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/323bb0f8f04f9c10de902e2f7c8ca784.png)
[b]4.表单的使用[/b]
运行效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/9e37dd88aa539a350ba62e9e5bd1068f.png)
[b] 框架组的运用:[/b]
[b]
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/39096cb43ca17ed84347ab1846e535ee.png)
[/b]
运行效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/564eeaa1159f0ef1b4172771e02e3638.png)
CSS样式的运用
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/2217c82071e246ae9174f92d93182f28.png)
样式表:
新建一个样式表,
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/e0472111e4715ce28f69031498e41a50.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/b86f5feddc9cfcea21f110c6e6cc424e.png)
好了,今天就先写到这里吧。希望自己明天还能继续。加油!
[b]理论:[/b]
HTML(Hyper Text Markup Language) 超文本标记语言
HTML文档 = 网页
HTML标签(不区分大小写)(有些大写是自动生成的)
页面包括“格式标签”和“页面内容”
网页文件格式:.html或.htm
HTML是通用语言(只要有浏览器和记事本)
使用的工具:记事本、NotePad++、EditPlus、…
网页三剑客(DreamWeaver、FireWorks、Flash)
FrontPage
HTML基本标签:
HTML基本结构 <html></html>
段落标签 <p></p>
空格标签  
标题标签 <h#>: #=1~6
图片标签 <img src=“…” />
注释标签 <!-- -->
标题标签 <h#></h#>
HTML水平线 <hr />
HTML换行 <br />
HTML中的特殊符号
>(>)、<(<)、&(&)、空格( )
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字体——客户端字体属性
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/ac8ff52d2a4bfa5ac9128989b4c32a22.png)
<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个空格)(兼容问题)
例:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/8236fa768037bf20396ed285e263f9f9.png)
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(通过报文提交)
表单的基本元素
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/d1adde32dfb744b7e56b426b018cd371.png)
表单的基本标签
文本框标签<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>
[b]CSS样式(层叠样式表)[/b]
[b]包括:行内样式,内嵌样式,类(class)样式,id样式,创建.css样式文件[/b]
[b]行内样式级别最高,外部样式(样式表)高于内部样式。[/b]
[b]基本样式:[/b]
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: 背景图片位置
[b]实操:(简单举例出几个)[/b]
[b][b]1. marquee标签的运用[/b][/b]
[b][b]
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/a4343a58990fa4ef6350b2a2ac2b7dd3.png)
[/b][/b]
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/2d97b094e99ab78ebb2cc0cd9584f021.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/549ecb36a01c1229bdfb88515920b8f8.png)
[b]2.图像标签的使用[/b]
[b]
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/2c574947f58c3b2314f48a055d1067f2.png)
[/b]
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/18db32fe09834003e4bc6dd60a3a35b6.png)
[b]3.表格的使用[/b]
[b]
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/e597dc70219bc269809da3216f38e493.png)
[/b]
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/323bb0f8f04f9c10de902e2f7c8ca784.png)
[b]4.表单的使用[/b]
<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>
运行效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/9e37dd88aa539a350ba62e9e5bd1068f.png)
[b] 框架组的运用:[/b]
[b]
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/39096cb43ca17ed84347ab1846e535ee.png)
[/b]
运行效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/564eeaa1159f0ef1b4172771e02e3638.png)
CSS样式的运用
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/2217c82071e246ae9174f92d93182f28.png)
样式表:
新建一个样式表,
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/e0472111e4715ce28f69031498e41a50.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/b86f5feddc9cfcea21f110c6e6cc424e.png)
好了,今天就先写到这里吧。希望自己明天还能继续。加油!
相关文章推荐
- HTML语言剖析8:表单标记
- 简单的过滤字符串中的HTML标记
- c 语言编辑简单的cgi程序与相关html的通信(嵌入式boa服务器)
- HTML +CSS 标记语言主要属性
- Mark Down 简单标记语言
- HTML标记语言META 标签的奥妙
- 应该掌握的几个HTML标记语言(个人总结)
- HTML语言剖析(六)清单标记 _HTML教程(2)
- HTML语言基本结构主体标记格式超级链接和列表
- 实现页面内的指定位置跳转 HTML标记语言:锚点的使用
- html标记语言
- aspx页面使用资源文件实现多语言时,对HTML标记的处理
- 第18章 超文本标记链接语言(HTML)
- php 简单markdown app 标记语言
- 漫画:混乱的标记语言XHTML2/HTML5
- 简单的过滤字符串中的HTML标记
- 应该掌握的几个HTML标记语言(个人总结)
- HTML语言剖析(七)表格标记
- html中的meta标记简单对照
- XML的优势---1.2.1: 简单易用的标记语言