HTML 튜 토리 얼 - html 인 스 턴 스 및 디 버 깅
Introduction
HTML 은 하이퍼텍스트 태그 언어 를 말 합 니 다. Hyper Text Markup Language HTML 은 프로 그래 밍 언어 가 아니 라 태그 언어 입 니 다. 태그 언어 는 태그 태그 태그 (markup tag) HTML 입 니 다. 태그 라벨 을 사용 하여 웹 페이지 HTML 문 서 는 HTML 태그 와 텍스트 내용 을 포함 하고 HTML 문 서 는 웹 페이지 라 고도 합 니 다.
HTML 인 스 턴 스
< h1 > 나의 첫 번 째 제목 < / h1 >
< p > 나의 첫 번 째 단락. < /p>
성명 < 태그 > 내용
< / 태그 >
DOCTYPE 에서 문서 형식 을 설 명 했 습 니 다.
탭 < html > 과 < / html > 에서 문서 형식 을 설명 하고 전체 HTML 문 서 를 정의 합 니 다. HTML 5 에서 도 문서 형식 을 설명 합 니 다.
탭 < body > 와 < / body > 에 시각 화 된 웹 페이지 내용 입 니 다.HTML 문서 의 주 체 를 정의 합 니 다.
탭 < h1 > 과 < / h1 > 을 제목 으로 사용 합 니 다.
탭 < p > 과 < / p > 를 단락 paragraph 로 표시 합 니 다.
성명
성명 은 브 라 우 저 에서 웹 페이지 를 정확하게 표시 하 는 데 도움 이 됩 니 다.인터넷 에는 다양한 파일 이 있 습 니 다. HTML 버 전 을 정확하게 설명 할 수 있다 면 브 라 우 저 는 웹 페이지 내용 을 정확하게 표시 할 수 있 습 니 다.
공동 성명 HTML 5
HTML 4.01
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
웹 브 라 우 저
(예 를 들 어 구 글 브 라 우 저, Internet Explorer, Firefox, Safari) 는 HTML 파일 을 읽 고 웹 페이지 로 표시 하 는 데 사용 된다.브 라 우 저 는 HTML 탭 을 직접 표시 하 는 것 은 아니 지만, 탭 을 사용 하여 HTML 페이지 의 내용 을 사용자 에 게 보 여 주 는 방법 을 결정 할 수 있 습 니 다.
HTML 출력 알림
우 리 는 HTML 이 표 시 된 정확 한 효 과 를 확정 할 수 없다.화면의 크기 와 창 을 조정 하면 서로 다른 결 과 를 가 져 올 수 있 습 니 다.
HTML 에 대해 서 는 HTML 코드 에 빈 칸 이나 줄 을 추가 해서 출력 효 과 를 바 꿀 수 없습니다.
페이지 를 표시 할 때 브 라 우 저 는 원본 코드 에 남아 있 는 빈 칸 과 빈 줄 을 제거 합 니 다.모든 연속 적 인 빈 칸 이나 빈 줄 은 빈 칸 으로 간주 된다.주의해 야 할 것 은 HTML 코드 의 모든 연속 적 인 빈 줄 (줄 바 꾸 기) 도 빈 칸 으로 표 시 됩 니 다.
<p>
，
。
，
。
</p>
：
， 。 ， 。Note: < pre > 탭 은 빈 줄 과 빈 칸 을 제어 할 수 있 습 니 다.
HTML - 요소 / 태그.
브 라 우 저 에서 웹 소스 코드 보기
웹 페이지 가 어떻게 실현 되 었 는 지 확인 하 다.오른쪽 단 추 를 누 른 다음 '원본 파일 보기' (IE) 나 '페이지 원본 코드 보기' 를 선택 하 십시오.이렇게 하면 페이지 HTML 코드 를 포함 하 는 창 을 열 수 있 습 니 다.
시각 화 된 HTML 페이지 구조
This a heading
This is a paragraph.
This is another paragraph.
pycharm 에서 html 디 버 깅
pycharm 에서 실행 할 때 실행 할 브 라 우 저 를 선택 하 십시오.
실행 중인 주소http://localhost:0/pythonworkspace/HTML/test.html... 로 바꾸다file:///E:/mine/pythonworkspace/HTML/test.html
F10 단축 키 를 누 르 면 브 라 우 저 를 호출 하여 방금 작 성 된 html 인터페이스 를 볼 수 있 습 니 다.
또는 브 라 우 저 로 html 파일 을 열 고 F5 단축 키 를 눌 러 새로 고침 합 니 다.
html 온라인 테스트
html 온라인 테스트 기
HTML 기반
HTML 제목 (Heading) 은 < h1 > - < h6 > 탭 을 통 해 정 의 됩 니 다.
HTML 단락 은 탭 < p > 을 통 해 정 의 됩 니 다.
HTML 링크 는 탭 < a > 를 통 해 정 의 됩 니 다.
참고: 위의 두 개 모두 자동 으로 줄 을 바 꿉 니 다. a 라벨 은 p 라벨 에 넣 어야 자동 으로 줄 을 바 꿀 수 있 습 니 다.
HTML 그림 은 탭 < img > 을 통 해 정 의 됩 니 다.
< br > 태그 정의 줄 바 꾸 기
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1> </h1>
<h2>pipi heading2</h2>
<h3>pipi heading3</h3>
<h4>pipi heading4</h4>
<h5>pipi heading5</h5>
<h6>pipi heading6</h6>
<p>pipi paragraph</p>
<a href="http://blog.csdn.net/pipisorry">pipi blog link</a>
<br/>
<img src=" .png" width="300" height="300">
<br/>
<a href="http://blog.csdn.net/pipisorry"><img src=" .png" width="30" height="30"></a>
</body>
</html>Note:
1. heading 성명 인 코딩 을 추가 합 니 다. 그렇지 않 으 면 중국어 '가죽' 에 어 지 러 운 코드 가 표 시 됩 니 다.
2. img 그림 을 a 탭 에 넣 고 그림 을 클릭 하면 링크 로 이동 할 수 있 습 니 다.
from:http://blog.csdn.net/pipisorry/article/details/37726999
ref:http://www.w3cschool.cc/html/html-tutorial.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
