HTML 기준
<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<메타 문자 집합 = ". UTF-8">
<제목> jingdong </ 제목>
</ head>
<body>
<! -
코어는 HTML5 라벨, 라벨의 역할 : 다른 데이터의 완료 플래그 활성화, 데이터 콘텐츠 페이지 더 농축
구조에 따라 라벨 : 하나의 태그 (단지 시작이 아니라 끝) 이중 라벨 (즉, 마지막에이 시작하는 것입니다)
단일 레이블을 - 직접 라벨링 데이터
ditag - 태그 데이터는 또한 자신의 구조 중첩 될 수 있습니다
몸의 텍스트 태그는 페이지의 일부를 나타내는 페이지 데이터가 그러므로에 몸을 언로드 할 수 있어야합니다
머리 머리 태그의 페이지는 일반적으로 개인 설정을 완료하는 데 사용되는 페이지를 나타내는
메타 . 8 UTF : 중국어 설정 화면 페이지
제목 페이지 제목의 설정 부분
->
</ BODY>
</ HTML>
일반적인 열 개 태그 :
<! DOCTYPE HTML>
<HTML LANG = "EN">
<head>
<메타 문자 집합 = "UTF-8">
<제목> 제목 </ 제목>
</ head>
<body>
<! - 하이퍼 링크 라벨
href- - 점프 페이지 설정하는 데 사용되는 하이퍼 링크 레이블 속성, 주소
기본적 새로운 페이지로 새 페이지를 열 수있는 방식을 설정하는 데 사용 하이퍼 링크 태그 속성 target--을, 포함하는 원래의 페이지를
title-- 선택적 속성 레이블이 아닌 새로운 페이지 원본 페이지를 덮어 쓰기.
->
<a의 href="http://www.baidu.com"의 target="_blank"> 바이두, </a>를
<!
<IMG SRC = "는 ./ IMG / 1.JPG는"ALT = " 파일이 존재하지 않습니다"제목 = "아름다움">
<! -
스팬 명시 적으로 개발 시나리오를 사용하지 않는 후 비 의미 태그 및 일반적으로 적용의 개발이다 특정 단어 나 특정 형식의 표시의 흐름을 표시한다. 또는 점으로 스팬 구조의 특별한 모양을 이용하여 구성
->
<SPAN> 달빛 의심 접지 리 </ SPAN>
<! - 굵은 태그 ->
<B> jingdong </ B>
<! - 기울임 태그 ->은
<I는> jingdong는 </ I는>
<-이!
OK 속성 탭 : 태그 내용이 한줄로 표시 될 수 있다면, 이러한 시간은 태그 label 속성 행이라
광고 특성 속성 탭 :
1, 태그 콘텐츠 월 표시 라인에서
2 콘텐츠 산만하여 라벨의 크기가 아닌 인공적으로 크기 조정
(3)를 내부 로우 속성 탭 속성 탭 중첩 행 수
광고 태그 기능 : A, 스팬 IMG, B를, I
->
<!
<H2> 제목 레벨 2 </ H2>
<H3> 타이틀 레벨 3 </ H3>
<! -
리스트 :리스트를 나타내는 데이터를 구성하는 복수의 항목의 목록이며
, 정렬되지 않은리스트 ul-- ol-- 질서 목록 li-- 목록 항목
참고 : UL, OL 및 선형은 보통의 사용이 필요하고, UL은, 리튬, 올 블록 속성 태그를 속하는
->
<UL>
<LI> 목록 항목 1 </ 리>.
<LI> 목록을 항목 2 </ 리>
<LI> 목록 항목. 3 </ 리>
<LI> 목록 항목. 4 </ 리>
<LI> 목록 항목. 5 </ 리>
<LI> 목록 항목. 6 </ 리>
</ UL>
<OL>
<LI> 목록 항목. 1 </ 리>
<LI> 목록 항목 2 </ 리>
<LI> 목록 항목. 3 </ 리>
<LI> 목록 항목. 4 </ 리>
<LI> 목록 항목 5 < / 리>
<리> 목록 항목 6 </ 리>.
</ OL>
<! -
단락 - 태그의 내용의 한 조각 페이지
참고 : 단락 태그가 각 단락 태그 안에 중첩 될 수 없습니다 다른 단락 태그 내부에 허용되지 않습니다
->
<ρ-은> 중국 특색 사회주의는 새로운 시대에 진입 한 중국의 경제 발전은 새로운 시대에 진입 한 중국의 경제는 기본 기능이되었습니다입니다 품질 개발 단계 높은 성장 단계의 비행. 높은 품질의 개발을 촉진, 지속적인 건강한 경제 발전을 유지하기 위해 필요한 요구 사항입니다, 변화와, 적당히 풍요로운 사회 건설 현대적인 사회주의 국가 건설에 필요한 요구 사항에 적응하는 우리 사회의 주요 모순, 경제 발전의 법칙을 따르지 필요한 요구 사항입니다. 고품질의 발전을 촉진하는 것은 현재와 미래의 기간과 아이디어의 개발을 결정하는 것입니다, 경제 정책의 수립은, 매크로 제어의 기본 요구 사항의 구현, 우리는 정책 시스템, 표준 시스템, 통계 시스템, 성과 평가, 성과 평가의 발전을 촉진하기 위해 고품질의 색인 시스템의 형성을 촉진해야한다 생성과 제도적 환경을 개선하고, 중국의 경제는 높은 품질의 개발의 실현에서 새로운 진전을 계속 추진하고 있습니다. </ P>
<! -
DIV 태그 - 어떤 의미 태그, 일반적으로 모듈에서 데이터 페이지의 포장을 완료하는 데 사용을 페이지의 일부로서 모듈 아키텍처의 역할
->
<DIV> Jingyesi </ DIV>
<! - -
블록 속성 탭 : 콘텐츠가 더 이상 표시되는 경우, 다음 블록 태그 레이블 속성으로 언급하지 않는 라인 태그
블록 속성 탭 기능 :
1, 라벨의 내용이 한 줄 마크에 표시 할 수없는
크기 2, 레이블이 인위적으로 수정 될 수있는 기본 블록 클래스 라벨 동일한 폭 및 상위 태그
(3)이 태그는 중첩 된 블록이 다른 라벨 속성 중 내부 블록 속성 일 수 있고, 태그 행 특성을 중첩 할 수있다
->
</ BODY>
</ HTML>
셀렉터
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
选择器：用来选择指定的标签，使对应的css样式作用于选择器指代的标签
class选择器：根据标签的class属性对应的属性值获取标签，注意class选择器用来选择一类标签，这类一般情况下对应的样式是相同的
*/
.link {
/*设置标签文字颜色*/
color: red;
}
.link1 {
/*设置标签文字的大小*/
font-size: 30px;
/*设置文字的类型*/
/*font-family: '宋体';*/
/*设置文字的粗细程度*/
font-weight: 100;
/*设置文字下划线位置
overline--下划线在文字的上边界
line-through--下划线在文字中间位置
underline--下划线在文字的下边界位置
none--文字没有下划线
*/
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#" class="link">百度一下</a>
<span class="link link1">静夜思</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
后代选择器：根据标签的后代关系选择指定标签的后代元素
选择器1 选择器2 --作用是选择选择器1的后代元素选择器2
标签名选择器--根据标签的名字选择标签比如下面的li代表选择li标签
*/
.list li{
color: blue;
}
</style>
</head>
<body>
<ul class="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
id选择器：根据标签的id属性值获取标签
*/
#mark {
/*设置块属性标签的宽度*/
width: 500px;
/*设置块属性标签的高度*/
height: 300px;
/*设置标签的背景颜色*/
background-color: red;
color: white;
/*设置标签的边框*/
/*border: 5px solid black;*/
border-right: 5px solid black;
/*设置标签边框拐角*/
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;
}
</style>
</head>
<body>
<div id="mark">静夜思</div>
</body>
</html>