search

Home >Web Front-end >HTML Tutorial >Review summary of the first week of ChinaSoft training - simple HTML and CSS

Review summary of the first week of ChinaSoft training - simple HTML and CSS

WBOY
WBOYOriginal
2016-09-05 08:45:331396browse

一些需要记住的点：

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:

              It should be noted that if a frame is used, the tag is not required.

              For example, setting the attribute value of the hyperlink target in frame B to a, and then setting the name attribute of frame C to a can achieve the navigation effect, and the hyperlinked page in B will appear in frame C

              css

              css is to package the tag styles together and put them in the head or a separate css file, and then pass

              Import css file

              About css naming convention: http://www.cnblogs.com/WebShare-hilda/p/4686067.html

              There are also some useful styles that I have seen so far that are hard to remember:

              Border rounded corners: border-radios:5px;

              Shadow: box-shadow: 0px 0px 3px black inset; inset built-in shadow optional

              Gradient: background:linear-gradint(to position (for diagonal gradient, write two positions right bottom), start color, end color)

              There are other documents that I don’t have enough contact with to check in the future

              　

              　

              Statement：
              The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
              Previous article：Get started with sass in just a few wordsNext article：Get started with sass in just a few words

              Related articles

              See more

              Public welfare online PHP training，Help PHP learners grow quickly！

              About usDisclaimerSitemap

              © php.cn All rights reserved