HTML和CSS的精华

今天又是周一喽，我们开始啦又一周的学习啦，想一想，在这里学习已经一个月啦，不知什么时间已经习惯啦这种生活，我应该是一个很难适应环境的人啊，但是现在在这里感觉还可以哦，可能是来到这里有自己的目标吧，所以自己的坏习惯就没有暴漏啦，这样挺好的，我只是想通过自己的努力去做自己想做的事情，或许很多人不能理解我现在的选择，或许今天的我应该呆在家里面足不出户，或许今天的我应该选择一个稳定的工作，但是我没有，我不想这样，一点都不想，我不知道选择这个要走多远，或许我学习了这个但是未来的工作却没有选择这个方向，但现在我乐意学习，我的兴趣告诉我，此刻不论我面对的是什么，我都要努力学习···接下来的三个月无论怎么样都要坚持。好啦下面就来总结一下今天学习的内容吧。

一.html中的表单元素

举例说明Form表单的元素吧，

用户名一般为一个文本框，所以把type设置为text即可；
type为password则为“密文型的文本框”；
性别一般为单选按钮，type为radio,但是在这里需要注意的是，在添加两个单选按钮时间需要把他们的值设置为一样的这样才能陈文给单选；
个人爱好一般为多选框，所以在这里用的checkbox来设置，则输出的为多选框的样式；
下面还有一个选择国籍，则选择的是下拉列表，type为select；
当type为file时间，则为我们往常看到的文件的上传下载格式，在这里textarea即设置上传文件的文本框的行和列；
接下来就是按钮，当type为重置时间一般设置type为reset，当为注册时间一般为submit，登录时间就用button，虽然它不是Form中的元素，但是可以显示，而其设置的值就是按钮上面显示的字体；
还有一个是图片按钮，设置type为image，属性src为图片路径，然后是图片的宽度和高度。

如下代码所示以及在浏览器中浏览显示的格式：

<body>

    <form action="http://www.baidu.com" method="post">

        <label>用户名:</label><input  type="text" name="txtUserName"  maxlength=""  value="刘德华"  size=""/><br />

        <label>密   码:</label><input type="password" name="txtUserPwd" maxlength="" value="" size="" /><br />

        <label>性   别:</label><label>男</label><input type="radio" name="txtGender"  /><label>女</label>

        <input type="radio" name="txtGender"  /><br />

        <label>个人爱好:</label><input type="checkbox" name="txtMusic" checked  /><label>音乐</label>&nbsp;

        <input type="checkbox" name="txtsport"/><label>体育</label><input type="checkbox" name="txtmovie" value=" " />

<label>电影</label><br />

        <label>选择您的国籍</label>&nbsp;

        <select name="select"  multiple>

        <option value="china">中国</option>

        <option value="koren">韩国</option>

        <option value="japan">日本</option>

        </select><br />

        <input type="file" name="upload" value="uploadimage" /><br/>

        <textarea rows="" cols=""></textarea><br />

        <input type="submit" name="name" value="注册 " />&nbsp;

        <input type="button" name="name" value="登录" />&nbsp;<button>登录</button>&nbsp;

        <input type="reset" name="reset" value="重置" />&nbsp;

        <input type="image" src="7.jpg" size="" height="" width="" />

    </form>

</body>

另外还有一些设置，如下面代码和图片可以看出来其代码实现的功能。

<body>

    <center>

        <form action="/" method="post">

            <table>

                <tr>

                    <td>数字：</td>

                    <td><input type="number" name="txtNumber" value=" " step="" /></td>

                </tr>

                <tr>

                    <td>颜色输入框：</td>

                    <td><input type="color"   name="txtColor" value=" " /></td>

                </tr>

                <tr>

                    <td>邮箱地址:</td>

                    <td><input type="email" name="txtEmail" value=" " /></td>

                </tr>

                <tr>

                    <td>电话号码:</td>

                    <td><input type="tel" name="txttel" value=" " /></td>

                </tr>

                <tr><td>范围:</td>

                    <td><input type="range" name="txtrange" /></td>

                 </tr>

                <tr>

                    <td>日期:</td>

                    <td><input type="date" name="txtdate" value=" " /></td>

                </tr>

                <tr>

                    <td>日期时间:</td>

                    <td><input type="datetime" name="txtdate" value=" " /></td>

                </tr>

                <tr>

                    <td>月:</td>

                    <td><input type="month" name="txtMonth" value=" " /></td>

                </tr>

                <tr>

                    <td>周:</td>

                    <td><input type="week" name="txtWeek" value=" " /></td>

                </tr>

                <tr>

                    <td>时间:</td>

                    <td><input type="time" name="txttimer" value=" " /></td>

                </tr>

                <tr>

                    <td>Url:</td>

                    <td><input type="url" name="txtUrl" value=" " /></td>

                </tr>

                <tr>

                    <td>隐藏:</td>

                    <td><input type="hidden" name=" txtHidden" value="云和学院 " /></td>

                </tr>

                <tr>

                    <td>搜索框:</td>

                    <td><input type="search" name="txtSearch" value=" " /></td>

                </tr>

                <tr>

                    <td colspan=""><input type="submit" name="name" value="提交 " /></td>

                </tr>

            </table>

        </form>

    </center>

</body>

上面的设置我想通过标签的显示就能看出其格式的设置啦吧，所以以上这些就是html中的From表单。

二.html的框架

在这里创建一个Html静态页面，然后删除<body></body>标签，添加<frameset></frameset>，其格式就是这样的，如下代码所示：

在这里可以看到在标签<frameset></frameset>中有一个rows属性，他的值为25%和*，在这里25%表示搜狐网页占25%，下面一个网站占剩下的部分，这里仅仅是一个举例，对比下框架的分配以及各式的显示，大体上面分为三部分，如下图所示：

三.CSS层叠样式表

1. 下面举例说一下css的优点，为什么我们要用css样式那？

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        p {

            font-size:xx-large;

            font-family:隶书;

            color:green

           }

    </style>

</head>

<body>

    <p><font face="隶书" color="yellow" size="">大家好！欢迎在云和学院学习Net开发</font>   </p>

    <p><font face="隶书" color="yellow" size=""> 大家好！欢迎在云和学院学习Net开发</font></p>

    <p>大家好！欢迎在云和学院学习Net开发</p>

    <P>大家好！欢迎在云和学院学习Net开发。</P>

    <p>大家好！欢迎在云和学院学习Net开发。</p>

</body>

</html>

上面的代码运行的结果如下所示：

在这里，前两行的字体都要在<p>标签中设置，感觉很麻烦，而最后三行的字体就是把p标签给提取出来放在head里面，但是要用标签stytle，格式如上面所示，在p标签里面设置字体的属性，从而使在p标签中的元素都可以显示其属性，这样就是简单多啦。而前两个内容也是在p标签中，但是他们设置的有自己的属性，在css中有一个特性就是就近一致原则，因此前两行就显示了其自己的行内的属性，像这样在行内设置其css样式的就叫做行内样式；想下面的那种把p标签提取出来的就叫做标签选择器。

2.下面说一下css中的类选择器和id选择器

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        p {

            color:blue;

            font-size:x-small;

            font-family:'Agency FB'；

        }

        .label

        {

            color:silver;

            font-size:.5em;

            font-family:KaiTi

        }

        #label {

            color: azure;

            font-size: .5em;

            font-family: KaiTi;

        }

    </style>

</head>

<body>

    <p style="font-family:仿宋; font-size:xx-large;color:pink">大家好！欢迎在云和学院学习Net开发</p>

    <!--行内样式-->

    <p>大家好！欢迎在云和学院学习Net开发</p>

    <p class="label">大家好！欢迎在云和学院学习Net开发</p>

    <p id="label">大家好！欢迎在云和学院学习Net开发</p>

</body>

上面所示，在p标签中仅仅需要写一个 class=”label“,class可以任意取名字，然后像上面的方法一样，把其p标签中的属性提取出来，即.class的值,然后在花括号里面设置其属性，像这样的方法就是类选择器；而在p标签中仅仅需要写一个id=”id“，id的值也可以任曦选取名字，然后#id的值加上花括号，并在花括号内设置其属性，这样的方法叫去哦id选择器。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        p {

            color:blue;

        }

        p.color {

            color:green;

        }

        #id {

            color:red;

        }

    </style>

</head>

<body>

    <p>欢迎来到云何学院学习.net</p>

    <!--<p style="color:green">风急天高猿啸哀，尚思为国树轮台</p-->

    <p class="color">欢迎来到云何学院学习.net</p>

    <p>欢迎来到云何学院学习.net</p>

    <div class="color">

            欢迎来到云何学院学习.net

    </div>

    <span class="color">

        欢迎来到云何学院学习.net

    </span>

    <p id="id">欢迎来到云何学院学习.net</p>

</body>

</html>

前面说过啦标签选择器和id选择器，而在上面例题中还有一个p.color，其实上面这个就是对其中一个设置了class的p标签设置其属性，而只想让其设置了class的显示其属相，只需要用p.class的值加上花括号，在花括号内设置其属性即可。

3.多选择器

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link href="css005.css" rel="stylesheet" />

</head>

<body>

    <p class="c1">还记得家乡的味道</p>

    <div class="c2">还记得家乡的味道</div>

    <span class="c3">还记得家乡的味道</span>

</body>

</html>

   .c1, .c2, .c3 {

            color:bisque

        }

像上面所示，把css添加在样式表中，在html页面中调用css样式表，格式如上面所示，即在head标签中用link标签即可，而在p标签，div标签和span标签都设置了class的值，然后分别设置值为c1，c2，c3，然后再样式表中用逗号（，）隔开，加上花括号即可，在花括号内设置其属性，这样的方法就叫做多选择器。

4.需要注意的是，在css样式表中设置字体时间可以设置任意几种字体格式，如下所示：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        p {

            color:blue;

            font-size:100px;

            font-family:Algerian,Andalus,AngsanaUPC,'Agency FB';

            font-style:italic;

            font-weight:bolder;

        }

    </style>

</head>

<body>

    <p>天青色等烟雨，而我在等你</p>

</body>

</html>

上面的p标签中在设置字体时间就是设置了多种格式，这个是由于可以根据浏览器的不同，自动选择不同的字体样式，更加方便。

总结一下css中字体的属性：

color：字体颜色；

font-size:字体大小；

font-fanily：字体格式；

font-weight：加粗。

图片的属性：border：图片边框。如下所示：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link href="001.css" rel="stylesheet" />

    <link href="002.css" rel="stylesheet" />

    <link href="003.css" rel="stylesheet" />

    <link href="004.css" rel="stylesheet" />

    <link href="005.css" rel="stylesheet" />

    <link href="006.css" rel="stylesheet" />

    <link href="007.css" rel="stylesheet" />

    <link href="008.css" rel="stylesheet" />

    <link href="009.css" rel="stylesheet" />

    <link href="010.css" rel="stylesheet" />

    <link href="011.css" rel="stylesheet" />

</head>

<body>

   <h1 class="class"><center>旋转音乐盒</center></h1>

   <p class="c1">作词：阿悄 aa</p>

   <p class="c2">作曲：阿悄</p>

   <p class="c2">演唱：阿悄,童可可</p>

   <p class="c3">在身边呀 很耀眼</p>

   <p class="c3" >爱神秘密地出现</p>

   <p class="c3">那光圈 太遥远</p>

   <p class="c3">好几光年</p>

   <p class="c3">云朵在冒烟 又再见面</p>

   <p id="id">原来是你的视线</p>

   <p class="c3">不停回旋 不停转圈</p>

   <p class="c3">好想念</p>

    <p class="c4">像幻觉</p>

    <p class="c5">我在他身边</p>

    <p class="c6">他身边</p>

    <p class="c7">我愿跳舞直到深夜</p>

    <p class="c8">愿望会实现</p>

    <pre>音乐旋转旋转不停歇</pre>

    <pre>爱着那天那天不终结</pre>

    <pre>盒子旋转旋转不停歇</pre>

    <pre>爱你永远永远不终结</pre>

    <p class="c9">在身边呀 很耀眼</p>

    <p class="c9">爱神秘密地出现</p>

    <p class="c10">那光圈 太遥远Hello World</p>

    <p class="c11">好几光年HeLLo WoRLd</p>

    <p class="c12">爱你永远永远不终结Hello World</p>

</body>

p {

    text-align:center;

}

.class {

    font-family:华文彩云;           /*字体*/

    color:green;                    /*字体颜色*/

    font-size:large;                /*字体大小*/

    font-weight:;                /*加粗程度*/

}

.c1 {

    font-variant:small-caps   /*小写转大写形式*/

}

.c2 {

    font-family:微软雅黑;

    font-weight:bolder;

}

.c3{

    font:italic bold small-caps 19px 宋体; /*五个*/

}

#id {

    font-family:宋体;

    color:red;

}

.c4 {

    text-decoration:underline;

}

.c5 {

    text-decoration:overline;

}

.c6 {

    text-decoration:line-through;

}

.c7{

    text-align:left;

}

.c8 {

    text-align:right;

}

pre {

    text-indent:%;

}

.c9{

    line-height:;

}

.c10 {

    text-transform:uppercase;

}

.c11 {

    text-transform:lowercase;

}

.c12 {

    text-transform:capitalize;

}

如下所示：

另外还学习了a标签和list标签的属性以及盒子模型，明天我再写吧，嘿嘿，可能是html和css这个东西比较碎吧，但是总体上东西还是比较容易学习的啦，可能是因为我们仅仅了解一下吧，毕竟我们是写后台程序的，嘿嘿，就写到这里啦。

HTML和CSS的精华的更多相关文章

CSS垂直居中精华总结
1 table-cell方式将center元素的包含框display设置为table,center元素的display设置为table-cell,vertical-align设置为middle. ...
css背景精华所在+前端页面开发流程
background属性 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
web前端开发资源分享：学习计划及资料推荐
HTML & CSS W3C官网 HTML学习 CSS学习书籍: <Head First HTML与CSS.XHTML(中文版)><CSS禅意花园(修订版)> 视频 ...
Routine
前端要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML是内容层,它的目的是表示一个HTML标签在页面里是个什么角色. CSS是样式层,它的目的是表示一块 ...
web前端学习路线推荐（讲的很细致）
前端要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML是内容层,它的目的是表示一个HTML标签在页面里是个什么角色. CSS是样式层,它的目的是表示一块 ...
web前端开发初学者必看的学习路线（附思维导图）
很多同学想学习WEB前端开发,虽然互联网有很多的教程.网站.书籍,可是却又不知从何开始如何选取.看完网友高等游民白乌鸦无私分享的原标题为<写给同事的前端学习路线>这篇文章,相信你会有所收获 ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华
以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“< ...
4.1HTML和Bootstrap css精华
1.HTML 2.理解Bootstrap HTML元素告诉浏览器,他要表现的是什么类型的内容,当他们不提供任何关于如何显示内容的信息.如何显示内容的信息,由CSS提供. 本书仅包含足够的信息,让你查看 ...

随机推荐

RTX——第9章任务运行在特权级或非特权级模式
以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 本章教程为大家讲解 RTX 运行模式的一个重要知识点,特权级模式和非特权级模式,有些资料或者书籍将非特权 ...
mongodb常见管理命令
----------1.复制数据库 wind:PRIMARY> show dbs; jinri 0.078GB local 1.078GB test 0.078GB wind 0.078GB w ...
GNU make学习笔记
第五章:规则的命令 5.1 命令的回显 make在执行命令之前会把要执行的命令输出到标准输出设备,称之为"回显". 如果规则的命令以字符"@"开始,则make在 ...
SQL Server 2008 压缩日志
USE [master]GOALTER DATABASE DNName SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE DNName SET RECO ...
对于REST中无状态(stateless)的一点认识(转)
在请求中传递SessionID被普遍认为是unRESTful的,而将用户的credentials包含在每个请求里又是一种非常RESTful的做法.这样一个问题经常会造成困扰.本文就REST的一些概念进 ...
c#生成rsa公钥和私钥
c#生成rsa公钥和私钥的类库,包括加密解密,可以用在网站和winform项目源码地址: http://download.csdn.net/detail/jine515073/8383809
Windows 10恢复Shift+右键打开命令提示符窗口
导入以下注册表即可. Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\Background\shell\cmd1] ...
VHD和VHDX
VHD和VHDX没有太大区别,只是最大容量不一样,用是一样用,一定要转用ghost11,是新建vhdx,然后把vhd和vhdx个挂载,之后用ghost11分区到分区还原. VHD和VHDX简介相对之 ...
如何查询表A中的某字段的值在表B中不存在？
1.测试表创建,插入数据: create table a (id int, name )); create table b (id int); ,'a'); ,'b'); ,'c'); ,'d'); ...
Convolutional Neural Networks on Graphs with Fast Localized Spectral Filtering
Defferrard, Michaël, Xavier Bresson, and Pierre Vandergheynst. "Convolutional neural networks o ...

HTML和CSS的精华

HTML和CSS的精华的更多相关文章

随机推荐

热门专题