JavaWeb入门-HTML

发布于:2024-05-07 ⋅ 阅读:(20) ⋅ 点赞:(0)

一、HTML

1.HTML   网络的骨架

超文本标记语言

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

        ②标记语言       

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

                        a.双标签

                             <html>内容</html>

                        b.单标签

                                <br>

2.HelloWorld

①新建网页文件(后缀为.html的文件)

②创建网页的基本结构

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

③通过开发工具IDEA

<!DOCTYPE html> //版本的标识
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    要展示在页面的内容
</body>
</html>
  • head中的内容
①meta单标签
<meta charset="UTF-8">
    charset="UTF-8" 属性
    设置网页的编码格式为UTF-8
②title双标签
<title>网页的标题</title>
③style
④base
⑤script
⑥link
...
  • body中的内容
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)有且只能有一个

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

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

        注释不能嵌套

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

  • 表格
标签名:
<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"
  • 表单(最重要)
用户名、密码、验证码、手机号、邮箱、性别、生日、地址、户籍、爱好、政治面貌、上船头像
<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>