suchen

Heim >Web-Frontend >HTML-Tutorial >Zusammenfassung der ersten Woche der ChinaSoft-Schulung – einfaches HTML und CSS

Zusammenfassung der ersten Woche der ChinaSoft-Schulung – einfaches HTML und CSS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-09-05 08:45:331403Durchsuche

一些需要记住的点：

day1 HTML格式及简单标签:

　　html 文件一般格式：

1 <html>
2     <head lang="en">
3         <meta charset="utf-8">
4         <title>页面名称</title>
5     </head>
6     <body>
7 <span>        页面内容
8     </body>
9 </html></span>

　　charset 设置字符编码，避免页面中文内容出现乱码。

　　没有闭标签 需要在末尾打斜杠“/”，alt属性不行的时候可以用title属性代替，align 属性可以设置一个段落内图片居左还是居右，还有width和height属性设置照片大小

　　

    有序列表
      无序列表都可以用type设置项目标志样式：

      　　　　

        的默认type 是 1，还有A a 等样式，
          不想要小黑点设置type为none.

          　　分级列表

          分级列表，
          内可以包含,

              　　

              标签就不做描述了

              day2 标签:

              　　

              一般格式：

               1 <table cellpadding="0" cellspacing="0" border="1">
 2             <tr>
 3                 <td>a</td>
 4                 <td>a</td>
 5                 <td>a</td>
 6             </tr>
 7             <tr>
 8                 <td colspan="2">跨两行</td>
 9                 <td rowspan="2">夸两列</td>
10             </tr>
11             <tr>
12                 <td>a</td>
13                 <td>a</td>
14             </tr>
15             <tr>
16                 <td colspan="3">
17 <span>                    最后一行跨3行
18                 </td>
19             </tr>
20         </table></span>

              　　运行结果图为：

              　　其中cellspacing为表格外边距，即每个单元格的间距，cellpadding为单元格内边距；

              的colspan和rowspan分别为跨行数和跨列数，

              单元格的大小会随内容改变，固定大小对文字有用，对块及元素无用，依然会撑大单元格，可以对块元素固定大小

              　　还有一些特殊字符如©表示版权号，<表示<,>表示>..其他的可以查帮助文档

              day3 表单标签
              :

              　　标签用来创建一个表单，一般有method，action 属性。method有GET 和POST 两种方法，一般用POST，Post比较安全

              1. get是从服务器上获取数据，post是向服务器传送数据。get是默认方法。
              2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 
              3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。 
              4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。 
              5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。 

              建议： 
              1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式； 
              2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

              更详细用法：http://blog.163.com/llf_046/blog/static/527371192009224022140/

              　　action属性指定一个url,在用户提交后转到这个页面

              　　同样没有闭标签，他的type属性常用值有text，password，radio，checkbox，submit,reset...

              　　更多type 值：http://www.w3school.com.cn/html5/att_input_type.asp

              　　写标签时要有写name属性的习惯，这样能让获取值更方面，radio写单选框的时候，同组单选框应设置相同名字才能实现单选，checked可以

              设置默认选中。

              　　readonly可设置只读，placeholder可设置灰色描述字段。

              day4 DIV frame 及 css:

              左图为div布局的重要属性的参考图

              div是块级元素，可以设置大小，背景，边框等等，还可以设置float浮动属性,可以实现并排的布局，需要排版的div都要设置float属性

              div内的divmargin-top属性没有效果，可以设置父级DIv的padding-top属性代替

              frame

              frame是框架，可以实现在一个页面内放置几个不同的HTML页面，代码格式如下：

               1 <html>
 2 
 3 <frameset rows="50%,50%">
 4 
 5 <frame src="../example/html/frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">
 6 
 7 <frameset cols="25%,75%">
 8 <frame src="../example/html/frame_b.html" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
 9 <frame src="../example/html/frame_c.html" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">
10 </frameset>
11 
12 </frameset>
13 
14 </html>

              Rendering:

              Es ist zu beachten, dass bei Verwendung eines Frames das -Tag nicht erforderlich ist.

              Wenn Sie beispielsweise den Attributwert des Hyperlink-Ziels in Frame B auf a setzen und dann das Namensattribut von Frame C auf a setzen, kann der Navigationseffekt erzielt werden, und die verlinkte Seite in B wird in Frame C angezeigt

              CSS

              CSS besteht darin, die Tag-Stile zusammenzupacken und in den Kopf oder eine separate CSS-Datei einzufügen und dann

              zu übergeben

              CSS-Datei importieren

              Informationen zur CSS-Namenskonvention: http://www.cnblogs.com/WebShare-hilda/p/4686067.html

              Es gibt auch einige nützliche Stile, die ich bisher gesehen habe und die man sich nur schwer merken kann:

              Rand abgerundete Ecken: border-radios:5px;

              Schatten: Box-Shadow: 0px 0px 3px schwarzer Einsatz; integrierter Schatten optional

              Verlauf: Hintergrund:linear-gradint(zu positionieren (für diagonalen Verlauf schreiben Sie zwei Positionen rechts unten), Startfarbe, Endfarbe)

              Es gibt andere Dokumente, die weniger zugänglich sind und später überprüft werden

              　

              　

              Stellungnahme：
              Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
              Vorheriger Artikel：Beginnen Sie mit Sass in nur wenigen WortenNächster Artikel：Beginnen Sie mit Sass in nur wenigen Worten

              In Verbindung stehende Artikel

              Mehr sehen