HTML5 및 CSS3에 대한 몇 가지 '새로운' 사항

HTML5에는 새로운 입력 입력 유형이 있습니다. 즉, type 뒤에 값 1이 있습니다.

텍스트 필드

라디오 버튼< ;input type="radio">

체크박스

드롭다운 목록

비밀번호 필드< ;input type="password">

제출 버튼

클릭 가능한 버튼

이미지 버튼

숨겨진 필드

재설정 버튼

파일 필드

HTML5의 새로운 입력 유형은

• 입니다. 이메일 유형: 이메일의 형식을 확인하는 데 사용됩니다.

• URL 유형: 양식이 제출되면 해당 값이 자동으로 확인됩니다. . URL 필드의 값

• 숫자 유형: min 속성은 최소값을 설정하고, max 속성은 최대값을 설정합니다. , value 속성은 현재 값을 설정하고, step 속성은 각 증가에 대한 값(예: 단계 값)을 설정합니다. 일부 브라우저는

<input type="number" name="num1" min="1" max="100" step="5" />

범위 유형을 지원하지 않습니다. 특정 범위 내의 숫자 값을 포함해야 하며 min 속성은 최소값을 설정하고, max 속성은 최대값을 설정하며, 그렇지 않은 경우 value 속성은 현재 값을 설정합니다. 설정하면 기본값 범위는 1-100입니다.

<input type="range" name="range1" min="1" max="50" />

날짜 및 시간 유형:

HTML5에는 날짜 및 시간 선택을 위한 여러 가지 새로운 입력 유형이 있습니다.

날짜 - 일, 월, 연도 선택

월 - 월, 연도 선택

주 - 주, 연도 선택

시간 - 시간(시간 및 분) 선택

datetime - 시간, 일, 월, 연도 선택(UTC 시간)

Datetime-local - 시간, 일, 월, 연도 선택(현지 시간)

검색 유형: 사이트 검색이나 구글 검색 등의 검색 필드에 사용됩니다. results="s" 속성을 추가하면 검색창 앞에 검색 아이콘이 추가됩니다.

<input type="search" name="search1" />
input[type="search"]{
-webkit-appearance:textfield;
}

전화 유형: 사용됨 입력이 전화 형식인지 확인하십시오. 이 요소는 아직 브라우저에서 지원되지 않습니다.

색상 유형: 사용자가 색상을 선택할 수 있도록 색상 선택기가 제공되며, 사용자가 선택한 색상이 채워집니다. 이 요소

　

HTML5 새 양식 요소 2

　datalist는 입력 필드의 옵션 목록을 지정합니다.

datalist 내의 option 요소를 통해 목록이 생성됩니다.

데이터 목록을 입력 필드에 바인딩해야 하는 경우 입력 필드의 목록 속성을 사용하여 데이터 목록의 ID를 참조하세요.

Keygen은 사용자를 인증하는 신뢰할 수 있는 방법을 제공합니다.

keygen 요소는 키 쌍 ​​생성기입니다. 양식이 제출되면 두 개의 키가 생성됩니다. 하나는 개인 키이고 다른 하나는 공개 키입니다.

개인 키는 클라이언트에 저장되고, 공개 키는 서버로 전송됩니다. 공개 키는 나중에 사용자의 클라이언트 인증서를 확인하는 데 사용될 수 있습니다.

현재 이 요소에 대한 브라우저 지원은 유용한 보안 표준이 될 만큼 열악합니다.

출력은 계산 또는 스크립트 출력과 같은 다양한 유형의 출력에 사용됩니다.

CSS3 새 속성 3

다양한 커널 탐색 각 브라우저에는 고유한 표준이 있습니다. 속성을 혼동하지 않기 위해 각 회사는 자체 표준 앞에 다음과 같은 접두사를 추가합니다.

-moz- 주로 firefox

-webikt-mainly 입니다. chrome Google,

　 -o- 주로 Mac의 브라우저에 사용됩니다

CSS3에는 다음과 같은 새로운 속성이 있습니다.

　box-shadow (shadow 효과)

box-shadow: 20px 10px 0 #000;

　　box-shadow: 20px 10px 0 #000;

사용법:

border: 10px solid #000;
   -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

지침:

색상 값 숫자는 고정되어 있지 않습니다. FF의 개인 작성 방법은 약어를 지원하지 않습니다: -moz-border-colors: #333 #444 #555;

　border-colors (테두리에 여러 색상 설정)

코드:

-moz-border-image: url(exam.png) 20 20 20 20 repeat;
   -webkit-border-image: url(exam.png) 20 20 20 20 repeat;

설명:

(1) 20 20 20 20 ---> 테두리의 너비는 각각 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리에 해당합니다. 다양한 결과 달성 효과;

(2). 테두리 그림 효과(현재 두 가지 유형만 구현됨):

반복 --- 테두리 그림은 배경 반복과 유사하게 타일링됩니다.

늘어남 --- 테두리 이미지가 전체 테두리를 덮도록 늘어납니다.

(3) 요소의 테두리 두께는 0이 아닌 자동 값으로 설정되어야 합니다. .

text-shadow(텍스트 그림자)

text-shadow: [< ;color>] || [];

설명 :

(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色; 当<模糊半径>未指定时, 半径值为0;

(2) shadow可以是逗号分隔的列表, 如:

text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;

(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;

(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;

(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.

　

　　text-overflow(文本截断)

  text-overflow: inherit | ellipsis | clip ;

　　word-wrap(自动换行)

word-wrap: normal | break-word;

　　border-radius(圆角边框)

-moz-border-radius: 5px;

这个值为圆角的圆的半径值

　　opacity(不透明度)

opacity: 0.5;

这个值设置为0-1之间的数

　　box-sizing(控制盒模型的组成模式)

   box-sizing: content-box | border-box;

   说明:

   1. content-box: 

   使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;

   2. border-box: 

   使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度也不会变).

以上就是关于HTML5和CSS3的几个“新增”的内容，更多相关内容请关注PHP中文网（www.php.cn）！