학습 비디오, [Mad God speaks Java] HTML5
먼저 HTML에 대해 알아보십시오.
1. HTML이란 무엇입니까?
1 、 HTML
-
하이퍼 텍스트 마크 업 언어
하이퍼 텍스트에는 텍스트, 그림, 오디오, 비디오, 애니메이션 등이 포함됩니다.
2. HTML5의 장점
- 세계적으로 유명한 브라우저 제조업체의 HTML5 지원
- 마이크로 소프트
- 구글
- 사과
- 오페라
- Mozilla
- 시장 수요
- 크로스 플랫폼
3. W3C 표준
- W3C
- 월드 와이드 웹 컨소시엄
- 웹 기술 분야 에서 가장 권위 있고 영향력있는 국제 중립 기술 표준 조직인 1994 년에 설립되었습니다.
- http://www.w3.org/
- http://www.chinaw3c.org/
- W3C 표준에는 다음이 포함됩니다.
- 구조화 된 표준 언어 (HTML, XML)
- 성능 표준 언어 (CSS)
- 행동 표준 (DOM, ECMAScript)
4. 공통 IDE
- 공책
- 드림위버
- 생각
- WebStorm
- ……
5. HTML의 기본 구조
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
태그 쌍을 개방형 태그 및 폐쇄 형 태그라고합니다. 자체 폐쇄 형 태그 : 별도의 태그 (빈 요소),
; ** / **를 사용하여 빈 요소를 닫는 것을 의미합니다.
6. 참고
<!-- 注释 -->
<!-- DOCTYPE:告诉浏览器，我们要用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!--meta描述性标签，它用来描述网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="keywords相当于网站的关键词描述">
<meta name="description" content="description描述来这个地方干啥">
<!--title网页标题-->
<title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello,World!
</body>
</html>
둘째, 웹 페이지의 기본 태그
1. 블록 요소
- 내용에 관계없이 요소는 자체 행에 있습니다.
- （P ， h1-h6…）
2 인라인 원소
- 콘텐츠의 너비가 늘어나고 왼쪽과 오른쪽이 모두 인라인 요소가 한 줄로 배열 될 수 있습니다.
- （a ， strong ， em…）
특정 태그를 분류하는 방법을 모르겠습니다.
- 제목 태그
- 단락 태그
- 줄 바꿈 레이블
- 가로줄 레이블
- 글꼴 스타일 레이블
- 참고 및 특수 기호
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签 <h1></h>-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签 <p></p>-->
<p>我爱得忘乎所以，</p>
<p>高歌敞开心扉。</p>
<p>像大地一样忠诚，</p>
<p>像天空一样爱人。</p>
<p>我把自己甩掉，</p>
<p>我把自己忘了。</p>
<p>心灵只要</p>
<p>我情人的爱情。</p>
<!--水平线标签-->
<hr/>
<!--换行标签：<br/>，
换行标签的本质上还是一个段落，只不过换行了，每一行显得紧凑
不像<p></p>段落标签显得每一行中间有间隙-->
我爱得忘乎所以，<br/>
高歌敞开心扉。<br/>
像大地一样忠诚，<br/>
像天空一样爱人。<br/>
我把自己甩掉，<br/>
我把自己忘了。<br/>
心灵只要<br/>
我情人的爱情。<br/>
<!--字体样式标签：粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>这是粗体</strong>
斜体：<em>这是斜体</em>
<br/>
<!--特殊符号
&转义字符
空格：
大于：>
小于：<
版权符号：©
-->
空 格 <br/>
空 格 <br/>
大于符号：> <br/>
小于符号：< <br/>
版权符号：© <br/>
</body>
</html>
3. 이미지, 하이퍼 링크, 웹 페이지 레이아웃
1. 이미지 라벨
<img src="path" alt="text" title="text" width="x" height="y" />
<!--
src：图像的地址
alt：图像的替代文字
title：鼠标悬停提示文字
width：图像宽度
height：图像高度
-->
- 일반적인 이미지 형식
- JPG
- GIF
- PNG
- BMP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--
src：图片地址
相对地址：../resources/images/戴拿的肯定.jpg
绝对地址：F:\代码\HTML\resources\images\戴拿的肯定.jpg
../ 上一级目录
alt：图像的替代文字(必填)
title：鼠标悬停提示文字
width：图像宽度
height：图像高度
-->
<img src="../resources/images/戴拿的肯定.jpg" alt="戴拿的肯定" title="鼠标放在图片上就显示文字" width="300" height="300"><br/>
<img src="../resources/images/迪迦.jpg" alt="迪迦的肯定" title="鼠标放在图片上就显示文字" width="300" height="300">
</body>
</html>
2. 링크 라벨
- 텍스트 하이퍼 링크
- 페이지 간 이미지 하이퍼 링크 링크
1), 한 페이지에서 다른 페이지로 링크
<a href="path" target="目标窗口位置">链接文本或图像</a>
<!--
href="path"：链接路径
target="表示窗口在哪里打开"：链接在哪个窗口打开，目标窗口位置常用值_self、_blank
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--
herf：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resources/images/戴拿的肯定.jpg" alt="戴拿的肯定" title="鼠标放在图片上就显示文字" width="300" height="300"><br/>
</a>
</body>
</html>
2), 앵커 링크
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
用井号#
-->
<!--使用name作为标记-->
<h3>
<a name="top">天真的预言</a>
</h3>
<p>从一粒细沙中窥探世界</p>
<p>在一朵野花里寻觅天堂</p>
<p>掌中握无限</p>
<p>霎那成永恒</p>
<p>当真理被恶意利用时</p>
<p>比一切臆造的谎言狰狞</p>
<p>现实本来就这样</p>
<p>人生来就要面对快乐和悲惨</p>
<p>只要能明了这一点</p>
<p>我们就不会再受伤害</p>
<p>将快乐和忧伤编织</p>
<p>披在我神圣的心上</p>
<p>穷人手里的一个铜板</p>
<p>抵得上非洲海岸的所有黄金</p>
<p>从劳动者手里砸取的一丁点钱</p>
<p>能买的下守财奴的所有土地</p>
<p>如果得到上帝的庇护</p>
<p>甚至可以买卖国土的全部</p>
<p>谁曾嘲笑纯真的信念</p>
<p>他将被岁月和死亡讥讽</p>
<p>谁要动摇纯真的信念</p>
<p>他将永远被埋葬在陈腐的墓穴中</p>
<p>谁能尊重纯真的信念</p>
<p>他将战胜地狱和死亡</p>
<p>如果不相信自己的眼睛</p>
<p>将永远不懂得去信任，请随心而行</p>
<p>如果太阳和月亮心存猜疑</p>
<p>它们将会转瞬消失</p>
<p>被激情围绕就能拥有美好</p>
<p>情欲攻心则会迷失自我</p>
<p>每一个夜晚，每一个清晨</p>
<p>有人生来就为不幸伤神</p>
<p>每一个清晨，每一个夜晚</p>
<p>有人生来就被幸福拥抱</p>
<p>有人生来就被幸福拥抱</p>
<p>有人生来就被长夜围绕</p>
<p>如果不是亲眼所见</p>
<p>我们就会相信谎言</p>
<p>谎言在黑夜里生灭</p>
<p>灵魂在光芒中休眠</p>
<p>对挣扎在黑暗中的人</p>
<p>上帝散发出光明</p>
<p>对生活在白昼的人</p>
<p>上帝幻化为人性</p>
<a href="#top">回到诗的标题</a>
<br/>
<a name="down">诗的末尾</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用锚链接跳转到另一个页面的指定位置</title>
</head>
<body>
<a href="4.1.锚链接.html#down">跳转到天真的语言诗的末尾</a>
</body>
</html>
노트:
- 사진이든 웹 페이지 든 주소에주의를 기울여야합니다.
3), 기능적 링크
… 결정하기 위해 아직 무엇을 써야할지 생각하지 않았습니다.
네, 목록, 표, 미디어 요소
아직 배우는 중입니다.
다섯, 양식 및 양식 응용 프로그램
아직 배우는 중입니다.
여섯, 양식 1 차 검증
아직 배우는 중입니다.