찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >Chinasoft 교육 첫 주 요약 검토 - 간단한 HTML 및 CSS

Chinasoft 교육 첫 주 요약 검토 - 간단한 HTML 및 CSS

WBOY
WBOY원래의
2016-09-05 08:45:331396검색

一些需要记住的点：

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>

              렌더링:

              프레임을 사용하는 경우에는 태그가 필요하지 않습니다.

              예를 들어 프레임 B의 하이퍼링크 대상 속성 값을 a로 설정한 다음 프레임 C의 name 속성을 a로 설정하면 탐색 효과를 얻을 수 있으며 B의 하이퍼링크 페이지는 프레임 C에 나타납니다.

              css

              css는 태그 스타일을 함께 패키징하여 헤드나 별도의 CSS 파일에 넣은 다음 전달하는 것입니다

              CSS 파일 가져오기

              CSS 명명 규칙 정보: http://www.cnblogs.com/WebShare-hilda/p/4686067.html

              지금까지 본 것 중 기억하기 어려운 유용한 스타일도 있습니다.

              둥근 모서리 테두리: border-radios:5px;

              그림자: box-shadow: 0px 0px 3px 검정 삽입 삽입 내장 그림자 선택 사항

              그라디언트: 배경:선형-그라디언트(위치로(대각선 그라디언트의 경우 오른쪽 아래 두 위치 작성), 시작 색상, 끝 색상)

              그 밖에도 접근이 어려운 문서가 있어 추후 확인 예정입니다

              　

              　

              성명：
              본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
              이전 기사：단 몇 마디로 Sass를 시작해보세요다음 기사：단 몇 마디로 Sass를 시작해보세요

              관련 기사

              더보기