JavaWeb入门-HTML

一、HTML

1.HTML 网络的骨架

超文本标记语言

①超文本图片、音频、视频、普通文本。。。

②标记语言

语法：通过标签的形式展示

a.双标签

b.单标签

<br>

2.HelloWorld

①新建网页文件（后缀为.html的文件）

②创建网页的基本结构

html 复制代码

<html>
    <head></head>
    <body>
    HelloWorld
    </body>
</html>

③通过开发工具IDEA

html 复制代码

<!DOCTYPE html> //版本的标识
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    要展示在页面的内容
</body>
</html>

head中的内容

html 复制代码

①meta单标签
<meta charset="UTF-8">
    charset="UTF-8" 属性
    设置网页的编码格式为UTF-8
②title双标签
<title>网页的标题</title>
③style
④base
⑤script
⑥link
...

body中的内容

html 复制代码

1、标题标签    字体大小、加粗、换行
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
2、段落标签   标记为一个段落，换行功能
<p></p>
3、换行标签
<br/>
4、列表
无序列表
    <ul>
        <li></li>
        <li></li>
        <li></li>
        ...
    </ul>
有序列表
    <ol>
        <li></li>
        <li></li>
        <li></li>
        ...
    </ol>
默认是阿拉伯数字
通过属性进行修改：type="i"
5、超链接
    <a href=""></a>
跳转的目的地：
href=""
<a href="http://baidu.com">点击跳转至百度</a>
设置新窗口的打开方式：
target=""
_self 本窗口（默认）
_blank 新窗口
6、图片标签
<src="" img/>
设置图片的路径：
src:"" 
设置大小：
宽度 width=""  px
高度 height="" 
7、块标签
div div+css 主流布局方式
盒子模型
span   没有任何效果的双标签
8、实体
<    &lt;
>    &gt;
空格    &nbsp;

HTML的语法规则

①注释

<!-- 注释内容 --!>

②规则

跟标签（html）有且只能有一个

无论是双标签还是单标签都必须正确关闭

标签可以嵌套但不能交叉嵌套

注释不能嵌套

标签不区分大小写但建议使用小写

表格

html 复制代码

标签名：
<table>
    <tr>
        <td></td> 或 <th></th>
        ...
    </tr>
</table>

table中的属性：
    border="1"
    width="300px"
    height="300px"
    align="center" 设置表格的位置
tr中的属性：
    height="300px"
    align="right"    设置内容的对齐方式
td中也有属性
    width="300px"
    height="300px"
    align="right"

单元格的合并：
    跨列：colspan="2"
    跨行：rowspan="2"

表单（最重要）

html 复制代码

用户名、密码、验证码、手机号、邮箱、性别、生日、地址、户籍、爱好、政治面貌、上船头像
<form action="数据提交的位置" method="请求方式get/post">
    表单项：
        name=""    自定义名字
            是作为传到后台数据的key值
        value=""   用户输入的数据
            是作为传到后台数据的value值
    ① 文本框 <input/>
        type="text"
    ② 密码框 <input/>
        type="password"
    ③ 单选按钮 <input/>
        type="radio"
        设置单选效果：在n个单选按钮上添加name属性，并起相同属性值
        默认选中 在需要设置默认选中的按钮上添加属性checked
    案例：
    <input type="radio" name="gendar" value="0"/>男
    <input type="radio" name="gendar" value="1" checked/>女
    ④ 生日 <input/>
        type="date"
    ⑤ 下拉表单
        <select name="">
            <option value=""></option>
            <option></option>
            <option></option>
            ...
        </select>
            默认选中
                在需要被选中的option标签上添加属性selected
    ⑥ 复选框 <input/>
        type="checkbox"
        name=""
        value=""
    ⑦ 文件表单 <input/>
        type="file"
        name=""
    ⑧ 多行文本域 
        <textarea name=""></textarea>
    ⑨ 隐藏域 <input/>
        type="hidden"
    ⑩ 三种类型的按钮
        普通按钮 type="button"
            <input type="button" value="按钮上的文字">
        提交按钮 type="submit"
        重置按钮 type="reset"
</form>