A, HTML 개발 도구와 브라우저 사용
개발 도구 : 메모장, 비주얼 스튜디오, 코드, 브래킷과 같은 텍스트 편집기
브라우저 : 크롬, 파이어 폭스, IE, 사파리, 아이폰, 안드로이드.
HTML의 두 번째 기본 요소
문서의 종류에 DOCTYPE 설명
루트 요소의 HTML 페이지는 페이지가 기록됩니다
헤드 헤더 정보 페이지는 HTML 태그의 내부에 기록
몸의 콘텐츠 페이지는 html 태그의 내부에 기록
구체적인 설명 :
1, 유형 DOCTYPE 설명 문서, 규정 HTML 버전이 명령을 쓴 사용하여 페이지에있는 웹 브라우저.
각 버전으로, 웹 페이지는 해당 태그를 사용하여, 사용할 수있는 페이지의 특정 버전은 DTD의 다른 버전입니다
사용 예
HTML4의 예
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 과도 // EN" "http://www.w3.org/TR/html4/loose.dtd" >
HTML5의 예
2, <HTML> </ HTML> 루트 태그 페이지 문서
HTML 태그는 세 가지 특별한 속성이 있습니다
- 당신이 파일에 액세스 할 때 사용자가 오프라인 있도록 웹 캐시 매니페스트 파일을 지정합니다.
- 페이지가이 값을 사용할 수있을 때 XHML 설정과 같은 설정의 HTML의 xmlns 네임 스페이스.
- 중국어로 LANG 설정 페이지 설명 언어는 조이이며, 영어는 EN입니다.
3 <head> </ 헤드 > 페이지 헤더 태그는 HTML 문서의 헤더 정보의 단지 하나의 세트를 가질 수의 내용 * 페이지에 표시되지 않는다.
머리 내부의 태그
- <메타> 태그
- 제목은 <제목> 페이지의 정의
- <링크> 링크
- <스크립트> 자바 스크립트 스크립트 태그 내용
- <스타일> 태그 CSS 스타일
- 메타 태그
4 <body> </ 바디 > 하나의 디스플레이 페이지 메인 콘텐츠.
코드 예 :
. (1) <! DOCTYPE의 HTML > 2 < HTML LANG = "EN" > . (3) < 선두 > . 4 < 메타 캐릭터 = "UTF-. 8" > . 5 < 타이틀 > 페이지 제목 (브라우저에 표시) </ 타이틀 > . 6 < 메타 이름 = "설명" 내용 = "페이지 내용의 간단한 설명" > . 7 < 메타 이름 = "키워드" 내용 = "페이지 키워드" > 8 <링크 에 rel = "/ CSS /있는 style.css"> . 9 < 스크립트 SRC에가 = "/ JS / script.js" > </ 스크립트 > 10 </ 헤드 > . 11 < 체 > (12)는 < 헤더 > 페이지 헤더 콘텐츠 </ 헤더 > 13 < 주 > 페이지 메인 콘텐츠 </ 메인 > 14 < NAV > 네비게이션 콘텐츠 페이지 </ NAV > 15 < 글 > 풋터 페이지 </ 꼬리말 > 16 </ 바디 > 17 </ HTML >
세, <메타> 태그
<메타> 요소 속성 :
- 이름을 어떤 종류의 정보를 표시하는 것입니다 설명이 포함 된 이름 정보를,
- HTTP-당량은 동작을 설명
- 내용 설명
- 문자셋 인코딩 지정된 페이지
1, 이름 속성
1 < 메타 이름 = "저자" 콘텐츠 = "NYW는" > 2 <! - 저자, 저자는 페이지를 정의 -> 3 < 메타 이름 = "설명" 내용 = "메타 태그 학습" > 4 <! - 설명 페이지의 실제 내용을 설명 > - 5 < 메타 이름 = "키워드" 내용 = "HTML, 메타" > (6) - <! 페이지 키워드를 정의하는 키워드를 ->
2, HTTP-당량 속성
. 1 < 메타 HTTP-당량 = "새로 고침" 내용 = "30" > 2 <! - 자동으로 새로 고쳐 웹 30 -> . 3 < 메타 HTTP-당량 = "새로 고침" 내용 ". 5, URL = dom.html"= > 4 <! - 점프 후 페이지 30 초 문서를 dom.html하기 ->
<META HTTP-EQUIV = "REFRESH"내용 = "5, URL = dom.html">
HTTP-당량 페이지는 행동, 행동 새로 고침 새로 고침 함량이 5이 문서를 dom.html로 이동 5 초를 나타냅니다입니다 설명합니다.
3, 콘텐츠 속성
특별 특성
- 콘텐츠 유형 지정된 텍스트 인코딩 HTTP 헤더 정보 (가장 일반적으로 사용)
- 기본 스타일 지정 스타일 시트를 사용하는 것이 바람직 (이 스타일 시트)
- 새로 고침 웹 페이지가 자동으로 페이지 또는 점프를 새로 고침
- set-cookie 设置页面的cookie（现在已经不再推荐使用）
4、charset属性
指定网页的编码，推荐使用UTF-8来增加网页的兼容性。
代码实例：
为搜索引擎抓取机器人准备一些信息
这段代码可以禁止搜索引擎缓存和跟踪网页。
<meta name="robots" content="noindex,nofollow"> <!-- name定义的是机器人，内容部分表示不要被搜索引擎缓存，也不要被搜索引擎跟踪 -->
代码实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网页标题(显示在浏览器上)</title> 6 <meta name="author" content="nyw"> 7 <!--作者， 定义网页的作者 --> 8 <meta name="description" content="meta标记学习"> 9 <!-- 描述，描述网页的实际内容 --> 10 <meta name="keywords" content="HTML,meta"> 11 <!-- 关键字，定义网页关键字 --> 12 <meta http-equiv="refresh" content="30"> 13 <!-- 网页30s后自动刷新 --> 14 <meta http-equiv="refresh" content="5,url=dom.html"> 15 <!-- 网页30秒后跳转到dom.html文档 --> 16 <meta name="robots" content="noindex,nofollow"> 17 <!-- name定义的是机器人，内容部分表示不要被搜索引擎缓存，也不要被搜索引擎跟踪 --> 18 </head> 19 <body> 20 </body> 21 </html>
四、title、base标记
title和base标记都是写在head标签中
title：设置网页的标题
写法：<title>内容</title>。
base：指定网页跳转基准URL，如果不指定的话默认为当前网站的当前路径。
写法：<base href="http://www.aaa.zzz/">
base属性值：
- href 指定网页跳转到基准URL，如果不指定的话则默认为当前网站的当前路径。
<base href="http://baidu.com/"> 这是将页面跳转到百度的网站打开。
- target 指定链接的跳转帧如果不指定的话，则是在当前页面中跳转。
<base target="_blank"> 网页中的链接都应该在新的窗口中打开。
terget属性值：
- _blank 在新窗口中打开被链接的文档
- _self 默认值，在相同框架中打开被链接的文档
- _parent 在父框架集中
- _top 在整个窗口中打开被链接文档·
- framename 在指定框架中打开被链接文档
五、link标记
link标记：链接外部文件时使用的标记，可以把外部文件的内容引入到当前文件中来，使当前网页实现更多的功能。
link属性：
href：指定链接外部路径的路径和文件名，要设置全路径并且带文件名
rel：引用文件，引用资源的类型定义
我们在使用link标签引用外部文件的时候，外部文件的类型是多种多样的。
alternate 代替文档（种子，其他语言版本，其他格式等等）
author 网页的作者
help 帮助文件的链接
icon 网页的图标
next 如果是连续网页的时候，指定下一个网页
prefetch 把链接外部资源时提前缓存起来。
prev 如果是连续网页
media 链接文件或是资源属于哪一种资源。
hreflang 链接文件的语言种类
type 链接文件的mi/me类型（比如说，图片图标文本）
sizes 根据link链接文件的类型，来指定文件的大小
代码示例：
链接网页图标：
网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹
1 <!-- 网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹 --> 2 <link rel="icon"> 3 <!-- 示例 --> 4 <link rel="icon" href="img/favicon.png" type="image/png"> 5 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> 6 <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">
注意：后面的href和前面type标注的类型要一致，这样既可以显示在浏览器，又可以显示在手机上
链接外部样式单
1 <link rel="stylesheet"> 2 <link rel="stylesheet" href="style1.css" media="screen"> 3 <link rel="stylesheet" href="style2.css" title="主题样式文件"> 4 <link rel=" alternate stylesheet" href="style3.css" title="可选样式单">
说明：
alternate 会在浏览器中会弹出一个对话框，供用户可以进行选择
media 表示媒体类型为屏幕，可以是手机，但不包括打印机和投影仪
title 对这个link进行简单的说明
网站RSS种子指定
<!-- 网站RSS种子指定 --> <link rel="alternate" type="application/rss+xml">
为搜索引擎的准备的网页的URL
<!-- 为搜索引擎的准备的网页的URL --> <link rel="canonical"> <link rel="canonical" href="http://www.aaa.zzz/help.html">
告诉搜索引擎代替URL是哪里。