프런트엔드 기본 사항 - HTML

1. HTML의 첫 소개

HTML이란 무엇입니까?

하이퍼 텍스트 마크업 언어: 하이퍼 텍스트 마크업 언어

하이퍼텍스트에는 텍스트, 그림, 오디오, 비디오, 애니메이션 등이 포함됩니다.

현재 HTML5를 사용하고 있으며 W3C 표준을 사용하고 있습니다.

W3C 표준에는 다음이 포함됩니다.

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准语言（DOM、ECMAScript）

일반적인 IDE

记事本
Dreamweaver
IDEA
WebStorm
...

2. 웹페이지의 기본요소

HTML 기본 구조

웹페이지 헤더
주요 부분

웹페이지 기본정보

DOCTYPE 선언: 어떤 사양을 사용하고 싶은지 브라우저에 알려줍니다.
标签：网页标题
태그: 웹사이트에 대한 일부 정보를 설명하는 데 사용되는 설명 태그

<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <meta charset="UTF-8">
    <!--meta一般用来做SEO-->
    <meta name="keyboards" content="Java">
    <meta name="description" content="学习Java">
    <!--网页标题-->
    <title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
HelloWorld
</body>
</html>

3. 웹페이지의 기본 태그

제목 태그
단락 태그
개행 태그
수평선 라벨
글꼴 스타일 태그
주석 및 특수 기호

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>
  这是一整段这是一整段这是一整段这是一整段
  这是一整段这是一整段这是一整段
  这是一整段这是一整段
  这是一整段
  这是一整段
</p>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>

<!--3、换行标签-->
<!--br、hr是自闭合标签，习惯上最好加/结尾-->
第一行 <br/>
第二行
<!--4、水平线标签-->
<hr/>
<!--5、字体样式标签-->
粗体：<stronge>I LOVE YOU </stronge>
斜体：<em>I LOVE YOU </em>
<hr/>

<!--6、特殊符号-->
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：<br/>
大于号：&gt;      <br/>
小于号：&lt;     <br/>
版权符号：&copy;

<!--7、注释-->
</body>
</html>

4. 이미지 태그

일반적인 이미지 형식:

JPG
GIF
PNG
BMP: 비트맵
…

문법:

<body>
<!--src:图片地址
        相对地址：../   1.html文件的上一级目录           
 (不推荐)绝对地址：C:\Users\15642\IdeaProjects\HTML\resources\image\1.JPG
-->
<img src="../resources/image/1.JPG" alt="baidu" title="baidu" width="800" height="500">

</body>

5. 링크 태그

텍스트 하이퍼링크: 텍스트를 클릭하면 이동합니다.

이미지 하이퍼링크: 이미지를 클릭하면 이동합니다.

<body>
<!--链接标签-->
<a href="path" target="目标窗口位置">链接文本或图像</a>
href：必填 ，表示要跳转到那个页面
target:表示窗口在哪里打开，默认是当前页面打开
_blank：在新的标签页打开
_self:在自己的网页中打开
<br>
<!--文字超链接-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
<a href="FirstHtml.html" target="_self">点击我跳转到页面一</a>
<br>
<!--图像超链接-->
<a href="http://www.baidu.com">
    <img src="../resources/image/baidu1.jpg" alt="baidu" title="百度" >
</a>
</body>

앵커 링크:

페이지 사이를 이동하려면 #을 사용하세요.
다른 페이지의 지정된 위치로 이동

관행:

<body>
<!--
    锚链接
        1.需要一个标记
        2.然后跳转到标记
        3.使用 #
-->
<!--先设置一个标记-->
<a id="top">我是顶部</a>
<p>
    <a href="http://www.baidu.com">
        <img src="../resources/image/baidu1.jpg" alt="baidu" title="百度" >
    </a>
</p>

<!--也可以跳转到另一个页面的指定位置 : href="2.html#top"-->
<a href="#top">跳转到顶部</a>
</body>

기능적 링크

<!--邮件链接：mailto-->
<a href="mailto:[email protected]">点击联系我！</a>

6. 인라인 요소 와 블록 요소

블록 요소

콘텐츠의 양에 관계없이 요소는 자체 라인을 차지합니다.
p 태그, h1-h6…

인라인 요소

내용은 너비만큼 늘어나며, 왼쪽과 오른쪽에 인라인 요소가 있는 경우 한 줄로 정렬할 수 있습니다.
태그, 강력한 태그, em 태그…

7. 목록

카테고리 목록:

주문 목록
순서가 없는 목록
맞춤 목록

<body>
<!--有序列表
应用范围：试卷，问答
-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>c++</li>
  <li>前端</li>
</ol>
<hr>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>c++</li>
  <li>前端</li>
</ul>
<hr>
<!--自定义列表
应用范围：公司底部列表
    dl：标签
    dt:列表名称
    dd：列表内容
-->
<dl>
  <dt>学科</dt>
  <dd>java</dd>
  <dd>python</dd>
  <dd>linux</dd>
  <dd>c++</dd>

  <dt>位置</dt>
  <dd>北京</dd>
  <dd>上海</dd>
  <dd>广州</dd>
</dl>
</body>

8. 양식

테이블을 사용하는 이유는 무엇입니까?

간단하고 다재다능함
안정적인 구조

기본 구조:

셀
라인 tr
열 td
교차 행 범위
여러 열에 걸쳐 colspan

<body>
<!--表格学习
行 tr
列 td
-->
<table border="1px">
  <tr>
    <!--  colspan跨列  -->
    <td colspan="4">1-1</td>
  </tr>
  <tr>
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>
</body>

9. 미디어 요소

동영상 요소: 동영상

오디오 요소: 오디오

<!--媒体元素
视频：
    controls:滚动条
    autoplay：自动播放
-->
<video src="../resources/video/4.mp4" controls autoplay></video>

<audio src="../resources/audio/萤火虫和你.mp3" controls></audio>

10. 페이지 구조 분석

요소 이름	설명하다
머리글	헤더 영역의 내용 표시(페이지 또는 페이지 내 영역)
보행인	바닥글 영역의 내용 표시(페이지 전체 또는 페이지의 일부 영역)
부분	웹페이지의 독립된 영역
기사	독립 기사 내용
곁에	관련 콘텐츠 또는 앱(사이드바에서 일반적으로 사용됨)
네비게이션	내비게이션 보조 콘텐츠

<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体部分</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>
</body>

11. iframe 인라인 프레임

문법

<iframe src="path" frameborder="0" name="mainFrame"></iframe>
        引用页面地址                 框架标示名

<body>
<!--iframe内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=68373450&bvid=BV12J41137hu&cid=118499718&page=1"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true">
</iframe>

<iframe src="https://www.bilibili.com/" frameborder="1px" name="mainFrame" width="400px" height="100px"></iframe>

<!--通过a标签往iframe里加东西-->
<iframe src="" frameborder="1px" name="hello" width="400px" height="300px"></iframe>
<!--通过target属性绑定指定的iframe-->
<a href="https://www.bilibili.com/" target="hello">点击我跳转到B站</a>
</body>

12. 먼저 Form Post 소개 및 제출

<body>
<h1>注册</h1>
<!--form
    method:规定如何发送表单数据，常用值：：post、get
    get方式提交：可以在url中看到提交的信息
   post方式提交：比较安全，可以传输大文件
    action:表示向何处发送表单数据,可以是一个网站，或者一个请求处理地址
-->
<form action="FirstHtml.html" method="get">
  <!--文本输入框：text-->
  <p>姓名：<input type="text" name="username"></p>
  <!--密码框：password-->
  <p>密码：<input type="password" name="password"></p>

  <!--提交-->
  <input type="submit">
  <!--重置-->
  <input type="reset">
</form>
</body>

양식 요소 형식

속성	설명하다
유형	요소의 유형을 지정합니다. 텍스트, 비밀번호, 체크박스, 라디오, 제출, 재설정, 파일, 숨김, 이미지 및 버튼, 기본값은 텍스트입니다.
이름	양식 요소의 이름을 지정하십시오.
값	요소의 초기값입니다. 유형이 라디오인 경우 값을 지정해야 합니다.
크기	양식 요소의 초기 너비를 지정합니다. 유형이 텍스트 또는 비밀번호인 경우 양식 요소의 크기는 문자 단위입니다. 다른 유형의 경우 너비는 픽셀 단위입니다.
최대 길이	유형이 텍스트 또는 비밀번호인 경우 입력할 수 있는 최대 문자 수
확인됨	유형이 라디오 또는 체크박스인 경우 버튼 선택 여부를 지정합니다.

13. 텍스트 상자와 라디오 버튼

단일 상자:

<!--单选框标签：
    input type="radio"
    value：单选框的值
    name：表示组，name相同为一个组，即只能选择一个
-->
<radio>
	<!--checked表示默认选中-->
    <input type="radio" value="boy" name="sex" checked/>男
    <input type="radio" value="girl" name="sex"/>女
</radio>

체크박스:

<!--多选框-->
<p> 爱好：
	<!--checked表示默认选中-->
    <input type="checkbox" value="sleep" name="hobby" checked>睡觉
    <input type="checkbox" value="book" name="hobby">看书
    <input type="checkbox" value="swimming" name="hobby">游泳
    <input type="checkbox" value="write" name="hobby">写作

</p>

14. 버튼과 체크박스

일반 버튼:

<!--按钮-->
<p> 按钮：
    <input type="button" name="btn1" value="点击查看">
</p>

이미지 버튼:

<input type="image" name="bt2" src="../resources/image/1.jpg"><!--可以点击提交，相当于submit-->

드롭다운 상자:

<p>国家：
    <select name="country">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <!--selected表示默认选中-->
        <option value="ruishi" selected>瑞士</option>
    </select>
</p>

15. 텍스트 필드 및 파일 필드

텍스트 필드:

<!--文本域-->
<p>反馈：
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

파일 필드:

<!--文件域-->
<input type="file" name="files">

16. 검색 상자 슬라이더 및 간단한 확인

<!--邮件验证-->
<p> 邮箱：
    <input type="email" name="email">
</p>

<p> URL：
    <input type="url" name="url">
</p>

<p> number：
    <input type="number" name="number" max="100" min="0" step="10">
</p>

<!--滑块：-->
<p>音量：
    <input type="range" name="voice" min="0" max="10">
</p>

<!--搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>

17. 서식의 적용

숨겨진 도메인 숨겨진
읽기전용읽기전용
장애인장애인

<body>

    只读：
    <p>姓名：<input type="text" name="username" value="lisa" readonly></p>
    
    <p>禁用：
        <!--disabled可以放到任何地方，无法选择"男"-->
        <input type="radio" value="boy" name="sex" disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    
    <!--隐藏域：hidden，密码框不见了，但值依然在-->
    <p>密码：<input type="password" name="password" hidden value="123456"></p>

</body>

마우스 사용성 향상:

<p>增强鼠标的可用性：<br>
    <label for="mark">你点我试试！！</label>
    <input type="text" id="mark">
</p>

18. 1차 검증 양식

생각하다:

서버에 대한 부담 감소
안전

일반적으로 사용되는 방법:

자리 표시자 프롬프트 정보
필수 요소는 비워둘 수 없으며 모든 텍스트 상자에 적용됩니다.
패턴 정규 표현식

<body>

    <p>姓名：
        <input type="text" name="username" placeholder="请输入用户名">
    </p>
    
    <p>姓名：
        <input type="text" name="username" placeholder="请输入用户名" required>
    </p>
    
    <p> 自定义邮箱：
        <input type="text" name="diyEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

</body>