首页 > 代码库 > HTML标记语言和CSS样式的简单运用（Nineteenth Day)

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

2024-08-05 13:15:11   219人阅读

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

理论：

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=http://www.mamicode.com/“…” />
?注释标签  <!--   -->
?标题标签  <h#></h#>
HTML水平线  <hr />
?HTML拆行  <br />
?HTML中的特殊符号
>(&gt)、<(&lt)、&(&amp)、空格(&nbsp)

HTML元素

?HTML基本块?HTML元素
?HTML元素有始有终
?HTML可以嵌套
?HTML使用小写
HTML属性
?表现各标签的特征
<img>中的src即为属性
?属性都是以“属性名 = 值”的形式出现
属性的值建议用引号括起来
属性建议均以键值对的形式括起来
一个标签可有多个属性，用空格分开
* HTML图像的属性
<img src=http://www.mamicode.com/“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=http://www.mamicode.com/“URL”>…(URL可以看成是地址)
如:<a href="http://www.baidu.com">百度</a><br />
?链接可以是一个字、一个词或是一句话，也可以是一副图片
?有两种使用方式
链接到另一文档
<a href="http://www.mamicode.com/MyFirstHTML.htm">跳到指定网页</a>
跳转到指定地方

<a name="上面" href="http://www.mamicode.com/#下面">跳到下面</a>

<a name="下面" href="http://www.mamicode.com/#上面">跳到上面</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="http://www.mamicode.com/提交" />
?重设按钮标签<input type=“reset” />(重置,可以添加value)
按钮标签<input type="button" value="http://www.mamicode.com/按钮" onclick="alert(‘不要乱按‘)" />
?图像标签<input type=“image” />

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

?单选按钮签<input type=“radio” />input type=“radio” name=“ra1” value=http://www.mamicode.com/“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样式文件

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

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 ="http://www.mamicode.com/重置" name="no" />  <input type ="submit" value="http://www.mamicode.com/登录" name ="ok" /><br /><br />       <input type  ="submit" style="background-color:orange;font-size:x-large;color:white" value ="http://www.mamicode.com/现在就去注册" name="register" />    </form></body>

 运行效果：


 框架组的运用：

运行效果：


CSS样式的运用

 样式表：

新建一个样式表，

 

 

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

 

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


联系
我们