HTML + 빠른 시작 자습서 CSS (6)

9 통합 예
모조 바이두의 디스크 다운로드 페이지 전투를 클라우드

표 10

10.1 테이블

테이블 탭의 표는 우리 표는이 일반적으로 사용되는 태그가 브라우저에 다음과 같은 테이블을 표시 할 수 있습니다 TR과 TD TR TD 행을 나타냅니다 나타냅니다 일반적으로 배경 관리 시스템 데이터 테이블 디스플레이에서 행 내부의 셀,

<table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>班级</td>
                <td>成绩</td>
                <td>等级</td>
            </tr>
            <tr>
                <td>20080795113</td>
                <td>李菲</td>
                <td>3</td>
                <td>12</td>
                <td>不及格</td>
            </tr>
            <tr>
                <td>20080795114</td>
                <td>张菲</td>
                <td>3</td>
                <td>82</td>
                <td>良好</td>
            </tr>
            <tr>
                <td>20080795115</td>
                <td>赵菲</td>
                <td>3</td>
                <td>32</td>
                <td>不及格</td>
            </tr>
</table> 

참고가 : 시작 태그 국경 cellspacing의의 cellpadding 뒤에 테이블에서이 양식은, 국경의 경계를 나타내고, 속성 HTML 태그를 추가하기 위해 호출 cellspacing이 세포 사이의 간격을 나타내는되고,의 cellpadding는 셀 내용과 테두리 사이의 거리를 나타냅니다

10.2 셀 병합

열 결합은 병합 된 셀의 셀의 현재 수는 수평 방향 설정

<table border="1px" width="300" cellspacing="0" cellpadding="0">
      <tr>
          <td>姓名</td>
          <td>张三</td>
          <td>年龄</td>
          <td>20</td>
      </tr>
      <tr>
           <td >个人简介</td>
           <td colspan="3"></td>
      </tr>
      <tr>
           <td >专业技能</td>
           <td colspan="3"></td>
      </tr>
</table> 

ROWSPAN 현재 셀의 수직 방향의 셀들을 병합 수를 설정.

<table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td>姓名</td>
                <td>张三</td>
                <td>年龄</td>
                <td>12</td>
                <td rowspan="3">
                    <img src="tablehead.jpg"/>
                </td>
            </tr>
            <tr>
                <td>籍贯</td>
                <td>中国</td>
                <td>民族</td>
                <td>汉族</td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>1999.3.4</td>
                <td>政治面貌</td>
                <td>党员</td>
            </tr>
</table>

운동 :

1. 표 2. 이력서 교육 과정

11 양식

11.1 양식 태그

양식 라벨 형식을 나타냅니다, 역할, 예를 들어, 사용자에 대한 정보를 수집하고 배경에 전송하는 것입니다 : 로그인, 등록 메이트 형태로 완성

양식 속성을 형성

조치 : 좋은 주소 get 및 설정 작업에 데이터를 전송하는 방식이다 양식 제출 양식을 설정하기위한 방법에있어서, 이동 방법 전송 될 데이터 수집에 주소 양식 제출 양식을 설정합니다 : 양식 데이터를 전송하는 방법 중 하나는 기능 : 폼 데이터가 전송이 브라우저의 주소 표시 줄의 게시물에 표시됩니다 : 데이터 양식을 보낼 수있는 한 가지 방법을 제공합니다 : 사용자가 보낸 폼 데이터는 일반적으로 보이지 않는다

<form action="http://www.baidu.com/s" method="get">
            用户名: <input type="text"   name="user"/>
            密码: <input type="password"  name="password"/>
            <input type="submit" value="提交" />
</form>

11.2 입력 태그

재산의 일반적으로 사용되는 여러 종류의 type 속성에 따라 달라집니다 기능의 아이의 폼 입력 태그 :

type = "text"
type = "password"
type = "checkbox"
type = "radio"
type = "button"
type = "submit"
type="file"
type = "hidden"

입력 상자

        <input type=“text” /> <!--type="text" 通常用来输入文本内容-->

암호 상자

<!--type="password" 通常用来输入密码,输入内容不可见-->
<input type=“password” /> 

확인란


확인란

<!--type="radio"  表示单选,几个input中只能选择一个,是否选中用checked属性-->
<input type=“radio” />

숨겨진 필드

 <!--type="hidden" 隐藏表单元素,有些时候后台需要某个数据,但是在前端
不需要显示的时候这个数据的时候使用-->
<input type=“hidden” />

파일 선택기

<input type=“file” /> <!--type="file" 文件上传-->

제출 버튼을

<input type=“submit” /> <!--type="submit" 执行提交动作将数据发送到后台处理-->

누름 단추

<input type=“button” /> <!--type="button" 普通按钮 不触发提交动作-->

다른 속성의 속성 이름, 소정의 입력 요소의 이름, 백그라운드 데이터가 이러한 속성의 값에 기초하여 수신 될
값 속성 값 판독 전용 속성 항목 테이블 지정된 제어는 읽기 전용 입력 박스에 대하여 효과가 푸시 버튼 해제 특성 무의미 컨트롤은 사용할 수없는 회색, 양식이 주를 제출할 때 데이터를 전송하지 않습니다 : 양식이 제출하는 요소 이름 속성, 데이터가 발송되지 않습니다 경우

11.3.textarea 요소

글자 크기 속성 COLS의 구체적인 치수에 따라 여러 텍스트 상자 (높이)에 설치된 디스플레이 라인의 수는 여러 텍스트 박스 (폭), 문자, 즉 수 특정 치수를 제공하는 디스플레이 열 텍스트 영역 행수가 여러 텍스트 상자 속성 표시 텍스트의 크기에 따라

11.4.button 요소

버튼의 정의.

    <button type="button">Click Me!</button>

11.5.select 요소

드롭 다운 목록 상자의 규정

    <select name="city">
        <option value="bj">北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

이름 속성에 지정된 크기 속성 이름 드롭 다운 상자, 상자 드롭 다운 옵션 내부 볼의 여러 속성에 지정된 번호, 설정 메뉴 항목 이후 여러 선택, 또는 단지 선택을 할 수 있습니다

11.6.option 요소

정의 및 사용

드롭 다운 각각의 특정 속성 값, 박스 드롭 다운 참고의 가치의 상자 : 당신은 속성 값, 제출 된 기본값을 작성하지 않은 경우, 내용의 값은 드롭 다운 상자는 상하이, 광저우, 쓰기 등의 내부 선택한 옵션 요소이며, 양식이 제출 값 속성 후, 드롭 다운 상자 값의 값이 첫 번째 옵션 요소가 선택되어있는 경우, 예를 들어, 값이 베이징 BJ보다는 제출, ​​값 안에 보내

11.7.label 요소

정의 및 사용

입력 요소 정의에 대한 레이블 (태그) label 요소는 사용자에게 특별한 효과를 제공하지 않는다. 그러나, 마우스 사용자의 가용성을 향상시켰다. 당신이 레이블 요소 내의 텍스트를 클릭하면이 컨트롤을 트리거합니다. 사용자가 선택하는 태그가, 브라우저가 자동으로 라벨과 연관된 폼 컨트롤에 초점을 맞출 것이다 때이다.

    <!--显式的绑定:for属性于哪一个表单项元素绑定(通过id属性绑定)。-->
    <label for="SSN">Social Security Number:</label>
    <input type="text" name="SocSecNum" id="SSN" />
    <!--隐式的绑定:-->
    <label>Date of Birth: <input type="text" name="DofB" /></label>

나사 교실 비디오 레슨 주소 : http://edu.nodeing.com

추천

출처www.cnblogs.com/dadifeihong/p/12024071.html