[Study notes] HTML

One, create a static Web project

• Create a new project in IDEA (New Project) and create a static Web project.
• You can create a new module under the project, which is also a static web project
• Then create a new HTML file
  

2. Introduction

Hyper Text Markup Language (Hyper Text Markup Language) abbreviation: HTML
html itself is a text file, through tags to tell the browser how to display the corresponding text.

Three, label introduction

Tag name is not case sensitive

Tags have attributes

• Basic attributes: modify simple style effects
• Event attribute: Set the code after the event response. Example: οnclick="alert=('Hello')"

Labels are divided into single label and double label

Four, commonly used labels

4.1 font label

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

4.2 Referencing entities

4.3 Hyperlink

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

4.4 List

List: ordered order list, unordered unOrder list

• Ordered list

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

• Unordered list

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

4.5 Picture

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

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

4.6 Form

<!--
    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>

The cross-row label

colspan merges the left and right columns into one column
rowspan merges the upper and lower rows into one row

<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 Embedded window with iframe tag

<!--给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 tags

<!--
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、 理论上没有数据长度的限制
-->

Combine form tags and forms

<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>