[연구 노트] HTML

첫째, 정적 웹 프로젝트를 만듭니다.

• IDEA (새 프로젝트)에서 새 프로젝트를 만들고 정적 웹 프로젝트를 만듭니다.
• 프로젝트 아래에 정적 웹 프로젝트 인 새 모듈을 만들 수 있습니다.
• 그런 다음 새 HTML 파일을 만듭니다.
  

2. 소개

Hyper Text Markup Language (Hyper Text Markup Language) 약어 : HTML
html 자체는 태그를 통해 해당 텍스트를 표시하는 방법을 브라우저에 알리는 텍스트 파일입니다.

셋, 라벨 소개

태그 이름은 대소 문자를 구분하지 않습니다.

태그에는 속성이 있습니다.

• 기본 속성 : 간단한 스타일 효과 수정
• 이벤트 속성 : 이벤트 응답 후 코드를 설정합니다. 예 : οnclick = "alert = ( 'Hello')"

레이블은 단일 레이블과 이중 레이블로 구분됩니다.

네 가지, 일반적으로 사용되는 레이블

4.1 글꼴 라벨

   <!--
        属性：color 颜色
              face 字体
              sice 字体大小 1~7
   -->
    <font color="red" face="宋体" size="7">
       字体标签内容7
   </font>

4.2 참조 엔티티

4.3 하이퍼 링크

    <!--
    href 是超链接地址
    target 是属性设置哪个目标（窗口）进行跳转
        _self 当前页面跳转(默认)
        _blank 打开新页面跳转
        也可以指定窗口 比如和iframe标签配对使用
    -->
    <a href="https://www.baidu.com/" target="_blank">百度</a>

4.4 목록

목록 : 정렬 된 주문 목록, 정렬되지 않은 비 주문 목록

• 주문 목록

    <ol>
        <li>java</li>
        <li>python</li>
        <li>c++</li>
    </ol>

• 정렬되지 않은 목록

<!--type 属性可以修改列表符号-->
    <ul type="none"><!--设置为无符号-->
        <li>java</li>
        <li>python</li>
        <li>c++</li>
    </ul>

4.5 그림

<!--
    border :边框宽度
    alt : 当找不到图片时，显示出来的内容
    相对路径：
        .表示当前目录
        ..表示上级目录
    绝对路径：
        https://ip:prot/工程名/资源路径

-->
<img src="photo/1.jpg" width="500" height="600" border="1" alt="找不到图片"/>

4.6 형태

<!--
    tr 表示行
    td表示列
    th 表示表头
    border 表示边框
    cell spacing 单元格间距
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <td align="center"><b>1.1</b></td>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>

교차 행 레이블

colspan은 왼쪽 및 오른쪽 열을 하나의 열로
병합합니다. rowspan은 위쪽 및 아래쪽 행을 하나의 행으로 병합합니다.

<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <th >1.1</th>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <td >2.1</td>
        <td colspan="2" rowspan="2">2.2</td>
    </tr>
    <tr>
        <td>3.1</td>
    </tr>
</table>

4.7 iframe 태그가있는 임베디드 창

<!--给iframe 标签中定义name 名字 ，使超链接显示的网页在iframe 中跳转 -->
<iframe src="pracetice02.html" width="500" height="200" name="abc"></iframe><br/>

<!--通过以下超链接和target属性，可以控制 iframe 窗口跳转到对应页面 -->
<a href="practice03.html" target="abc">03html</a><br/>
<a href="pracetice02.html" target="abc">02html</a>

4.8 양식 태그

<!--
form 标签就是表单
input type=text 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 当我们要发送某些信息， 而这些信息， 不需要用户参与， 就可以使用隐藏域（提交的
时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度-->


表单提交：
<!--
form 标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候， 数据没有发送给服务器的三种情况：
1、 表单项没有 name 属性值
2、 单选、 复选（下拉列表中的 option 标签） 都需要添加 value 属性， 以便发送给服务器
3、 表单项不在提交的 form 标签中
GET 请求的特点是：
1、 浏览器地址栏中的地址是： action 属性[+?+请求参数]
请求参数的格式是： name=value&name=value
2、 不安全
3、 它有数据长度的限制
POST 请求的特点是：
1、 浏览器地址栏中只有 action 属性值
2、 相对于 GET 请求要安全
3、 理论上没有数据长度的限制
-->

양식 태그와 양식 결합

<form action="https://localhost:8080" method="post">
    <input type="hidden" name="action" value="login" />
    <table>
        <tr>
            <td>用户名称：</td>><!--文本框-->
            <td>
                <input type="text" value="默认值" name="username"/>
            </td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td>
                <input type="password" name="password"><!--密码框-->
            </td>
        </tr>
        <tr>
            <td>性别：</td><!--单选框 为sex一组-->
            <td>
                <input type="radio" name="sex" checked="checked" value="boy"/>男<!--默认选中-->
                <input type="radio" name="sex" value="girl"/>女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td><!--多选框-->
            <td>
                <input type="checkbox" checked="checked" name="hobby" value="java"/>java<!--默认选中-->
                <input type="checkbox" name="hobby" value="c++"/>c++
                <input type="checkbox" name="hobby" value="php"/>php
            </td>
        </tr>
        <tr>
            <td>国籍：</td><!--下拉框-->
            <td>
                <select nam="country">
                    <option>----请选择国籍----</option>
                    <option selected="selected" value="china">中国</option><!--默认选项-->
                    <option value="USA">美国</option>
                    <option value="Russia">俄罗斯</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td><!--文本域-->
                <textarea rows="10" cols="20" name="desc">我是默认值</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="reset" value="重置" />
            </td>
            <td>
                <input type="submit" value="提交"/>
            </td>
        </tr>
    </table>
</form>