기본 검토 (4) | HTML5 & CSS3 리팩토링

HTML5 & CSS3 리팩터링

H5

소개

• 표준 범용 마크 업 언어의 응용 프로그램 하이퍼 텍스트 마크 업 언어 인 H5 World Wide Web의 핵심 언어는 H4 및 XHTML의 차세대 표준 버전을 대체하는 데 사용되므로 H5라고합니다.

• XHTML Extensible Hypertext Markup Language, 향상된 HTML, 더 많은 응용 프로그램 요구에 적응

• 디자인 목적은 모바일 장치에서 멀티미디어를 지원하고 의미 기능, 로컬 저장 기능, 장치 호환성 기능, 연결 기능, 네트워크 멀티미디어 기능, 3 차원, 그래픽 및 특수 효과 기능, 성능 및 통합 기능, CSS3 기능을 추가하는 것입니다.

• 글꼴, 가운데 ... 요소 또는 속성이 중단되었습니다.

이점

• 사용성 향상 및 사용자 친화적 인 경험 향상, 더 나은 의미 태그

• FLASH 및 Silverlight의 좋은 대안 인 더 많은 멀티미디어 요소를 사이트로 가져옵니다.

• 웹 사이트의 크롤링 및 색인 생성과 관련하여 매우 SEO 친화적이며 모바일 프로그램 및 게임에서 널리 사용되며 이식성이 좋습니다.

불리

• IE9 이하와 호환되지 않음

의미 체계 태그 추가

header : head tag nav : navigation tag main : body tag footer : tail tag

기사 : 독립 콘텐츠 라벨 섹션 : 섹션 라벨 옆 : 사이드 바 라벨

지침:

• 시맨틱 표준은 주로 검색 엔진 용이며 새 탭 페이지에서 여러 번 사용할 수 있습니다.
• IE9의 호환성 문제, 블록 수준 요소로 변환, 모바일 개발자 선호

header,nav,article,aside,section,main,footer{display:block}

멀티미디어 태그 추가

오래된 플래시 및 기타 브라우저 플러그인을 사용하는 대신 페이지에 오디오 및 비디오를 쉽게 삽입 할 수 있습니다.

오디오

• 플러그인없이 기본적으로 오디오 형식 파일을 지원할 수도 있습니다.

<audio src="地址" controls="controls"></audio>

H5는 속성 이름과 속성 값이 같으면 속성 값만 쓸 수 있다고 규정합니다.

• 오디오 공통 태그
  

  Google은 자동 재생을 비활성화했습니다.

• 여러 오디오 형식 호환 쓰기 방법, 한 번에 두 개의 리소스를 직접로드, 여전히 그렇지 않은 경우 사용자에게 버전이 너무 낮다는 메시지를 직접 표시합니다.

비디오

• 플러그인을 사용하지 않고 비디오 재생 실현

<video src="地址" controls="controls"></video>

• 비디오 태그의 공통 속성

Google의 동영상 자동 재생은 음소거 된 경우에만 허용됩니다.

• 여러 비디오 호환 쓰기 방법, 여전히 더 많은 비디오 파일 형식 추가

양식 레이블 추가

학습 된 라벨 유형 :

새 양식 유형 :

• 숫자는 최대 / min = "", step = "number of steps"value = "기본 표시 값"으로 설정할 수 있습니다.

새로운 입력 양식

<input type="text" list="list01">
<datalist class="list01">
  <option value="广州">gz</option>
  <option value="上海">
</datalist>

datalist 태그는 옵션 요소 세트를 포함하여 입력 요소의 가능한 옵션 목록을 지정하며, 이는 사전 정의 된 입력 프로세스 동안 요소 값에 자동으로 대응합니다.

새로운 양식 속성

---

CSS3

소개

• CSS2의 7 개의 선택기와 비교하여 더 많은 선택 방법을 구현하기 위해 더 많은 다른 선택기가 추가되었습니다.
• 새로운 선택자 : 자식 선택자, 형제 선택자, 구조적 의사 클래스 선택자, 의사 요소 선택자, 속성 선택자

자식 선택기

부모 선택기> 자식 선택기

특정 상위 요소가있는 요소를 선택하는 데 사용됩니다. 직접 하위 요소가 아닌 경우 선택되지 않습니다.

형제 선택기

인접한 형제는 E1 + E2를 선택합니다.

• 다른 요소 바로 뒤의 형제 요소를 선택하는 데 사용되며 둘 다 동일한 상위 요소를 가짐
• E1 바로 다음의 첫 번째 E2 가 선택됩니다 (하지만 E1은 둘 이상을 가질 수 있음).

기타 형제 선택기 E1 ~ E2

• 선택한 E1 이후 동일한 아버지의 모든 E2

구조적 의사 클래스 선택기

• n 번째 하위 (n) n은 숫자, 짝수 (짝수) 홀수 (홀수) 또는 공식 (5n) 일 수 있습니다.
• nth-of-type (n)은 다른 비균질 요소를 무시하고 E에서만 찾습니다.

의사 요소 선택기

.box::before{ content:"";}

• 의사 요소는 인라인 요소이므로 디스플레이별로 요소를 차단하도록 수정할 수 있습니다.
• 요소는 DOM에서 볼 수 없으므로 의사 요소라고합니다.

속성 선택기

지정된 속성을 포함하는 태그를 선택하는 데 사용됩니다.

• 특정 속성에 따라 선택

선택기 무게

• id 선택기> 클래스 선택기> 태그 선택기> *
• 유사 클래스 선택자와 속성 선택 자의 가중치는 클래스 선택자와 같습니다.
• 의사 요소 선택기의 가중치는 레이블 선택기와 같습니다.

박스 모델

상자 모델을 지정하기위한 상자 크기 조정

둥근 모서리

border-radius 는 테두리 의 둥근 모서리를 설정합니다.

• 반경은 단일 속성으로 설정할 수 있습니다.

• 테두리 반경은 축약 형, 3 값, 2 값, 단일 값 가능

• IE8 이하의 브라우저는 border-radius 속성을 지원하지 않으며 다른 브라우저는 지원합니다.

텍스트 그림자

text-shadow 는 텍스트에 그림자 를 적용 할 수 있으며 수평 및 수직 그림자, 흐림 거리, 색상을 지정할 수 있습니다.

• 다중 레이어 그림자, 쉼표는 여러 그림자의 속성 값을 구분하고 나중에 작성된 그림자를 덮기 위해 먼저 작성

상자 그림자

box-shadow는 상자 테두리에 그림자 를 추가하는 데 사용됩니다.

• 바깥 쪽 테두리 그림자는 설정할 필요가 없습니다.

• 여러 개의 그림자도 필요하며 여러 속성 값을 쉼표로 구분하면됩니다.

과도한 속성

CSS3의 출현 전에 플래시 애니메이션 또는 JS 일반적 애니메이션을 만들어 사용 하였다. 프레임마다의 실현을 통해 CSS3가있다 트윈 애니메이션의 전환 효과 실현 을 통해 전환 . 현재의 구성 요소 변경은, (A 개의 상태가 될 때 및 B)), 스위치는 부드러운 애니메이션 전환 효과가 있습니다.

transition:过度属性、过渡时间、运动曲线、延时时间；

• 전환 속성 전환 속성

  none : 속성 전환 없음 all : 변경된 모든 속성이 전환됨

• 전환 기간 전환 시간

  단위는 s이고 기본값은 0이며 단위 s를 작성해야합니다.

• 전환 타이밍 함수 시간 곡선

  

• 베 지어 곡선은 사용자 정의로 변경할 수 있습니다.

• 브라우저 호환성 문제 : IE9 및 이전 버전은 전환 속성을 지원하지 않습니다. Safari는 접두사 -webkit-transition을 사용해야합니다.

2D 변환

변환

전환 및 애니메이션을 사용하여 요소를 이동, 확대 / 축소, 회전, 늘이거나 늘이는 Kawaii는 이전에 Flash에서만 얻을 수 있었던 많은 효과를 대체합니다.

속성 값

옮기다()

• 속성 값 (x, y)은 수평 및 수직 변위, px 또는 백분율 (움직이는 상자의 크기 참조)의 거리를 나타내며 양수와 음수를 구분합니다.
• (X) 하나의 값만 수평 방향의 변위를 나타냅니다.
• 센터링 효과 달성 가능

규모()

• 속성 값

회전 rotate ()

숫자 deg, deg는도를 의미하고, 양수는 양의 방향을, 음수는 음의 방향을 의미합니다.

• 요소가 회전하면 좌표축도 변경됩니다.
• 여러 속성 값이 동시에 변환되도록 설정되면 쓰기 순서가 다르면 다른 효과가 발생합니다.

기울기 기울이기 ()

transform:skew(数字deg，数字deg)

• 두 속성은 각각 수평 및 수직 기울기 각도를 나타냅니다.

변형 기원

• 조정 요소의 수평 및 수직 원점 위치를 설정하고 요소의 기준점을 조정합니다.
• 가능한 값, 왼쪽, 가운데, 오른쪽, 픽셀 값, 백분율

카드 패키지 특수 효과 케이스

• 6 장의 사진은 모두 아들과 아버지의 이미지를 사용하여 한곳에 배치됩니다. left : 0 right : 0
• 사진마다 다른 변형 회전 각도 설정
• 모든 사진에 대한 애니메이션 전환 설정

3D 변환

일반 x 및 y 축보다 하나 더 많은 z 축 속성

원근법

• 이미지 3D 효과의 표현은 실제로 시각 효과이며 원근법을 통해 달성됩니다.
• 원근 기능 : 거의 크거나 작음
• Perspective 속성에 값 설정

3D 회전

• 속성 값은 2D 회전보다 rotateZ (각도)가 하나 더 많습니다.

3D 변위

• X, Y, Z 축에 따라 변위를 각각 수행 할 수 있습니다.
• 위치를 수행 한 후 회전축도 변경됩니다.

변형 스타일

• 내부 중첩 자식 요소가 3D 공간에 표시되도록 설정하면 자식 요소는 자체 3D 변환 축을 유지합니다.

• 속성 값 : flat : 모든 하위 요소가 2D 평면에서 렌더링됩니다.

  preserve-3d : 3D 공간 보존

• 3D 요소의 구성은 특정 그래픽이 여러 요소로 구성되는 것입니다. 이러한 요소에 대해이 속성을 설정하여 일반적으로 상위 요소로 설정되는 실제 3D 그래픽으로 만들 수 있습니다.

• 브라우저 호환성 문제, Chrome 및 Safari에는 접두어 -webkit-이 필요하고 IE9에는 접두어 -ms-가 필요합니다.

생기

애니메이션 만들기-> 애니메이션 바인딩

@keyframes 애니메이션 만들기

@keyframes{
 0%{transform:translateY(0);}
 100%{transform:translateY(150px)}
}

@keyframes는 CSS 스타일, 한 스타일에서 다른 스타일로 점진적으로 변경하는 효과를 지정할 수 있으며 스타일을 원하는만큼 변경할 수 있습니다.

• 백분율을 사용하여 변경 이벤트를 지정하거나 "from" "to"키워드를 사용하여 0 %에서 100 %까지 동일하게 만듭니다.

• 백분율을 사용하면 애니메이션 효과를보다 유연하게 만들 수 있습니다.

바인딩 애니메이션 애니메이션

div{
  animation：动画名称、过渡时间、速度曲线、动画次数、延时时间;
}

• @keyframes에서 만든 애니메이션을 선택기에 바인딩하여 애니메이션 효과를 만듭니다.
• 속성을 단일 속성으로 설정 한 후 추가 할 수 있습니다. 애니메이션 이름과 전환 시간을 설정해야하며 기타 속성은 필요에 따라 설정할 수 있습니다.
  
• 버전 호환성 문제, IE10, Firefox 및 Opera는 모두 @keyframes 속성을 지원하며 Chrome 및 Safari에는 접두사 -webkit- 접두사가 필요하며 IE9 및 이전 버전은 지원하지 않습니다.