HTML基础

苏瞳呐

已于 2022-04-14 18:06:49 修改

阅读量2k

点赞数 3

分类专栏：笔记 JavaWeb 文章标签： java 前端 html5 1024程序员节

于 2022-04-10 20:44:57 首次发布

本文链接：https://blog.csdn.net/m0_53492310/article/details/124084451

版权

笔记同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

JavaWeb

16 篇文章 0 订阅

订阅专栏

文章目录

HTML

HTML

了解一下Web结构：
以前学的Java SE 是C/S结构，ClientServer客户端和服务器
Web B/S结构，BrowserServer浏览器和服务器
Java EE项目：客户端：浏览器服务端：WEB服务器
前端开发流程：美术首先(设计) -> 前端工程师 -> java程序员
页面由：内容，表现，行为

定义：HTML 超文本标记语言，通过标签来标记要显示的网页中的各个部分

1.创建HTML文件

我用的是IDEA2020.1版本
按照原先javaSE项目的创建方法创建一个空项目，然后选择模块右键Add Framework Support -> 勾选Java EE里面的Web4.0就行了

在创建一个web工程（静态的web工程），在工程下创建HTML页面

2.HTML书写规范

<!DOCTYPE html> <!-- 约束，声明-->
<html lang="zh_CN"> <!-- html标签表示html的开始,一开始是en是表示英文，最好改为zh_CN中文，html标签中一般分为两部分head，body-->
<head> <!-- 头部标签，一般包含三部分，title标签，css样式，js叫脚本代码-->
    <meta charset="UTF-8"> <!-- 表示当前页面使用UTF-8字符集-->
    <title>苏瞳</title>  <!-- 标题-->
</head>
<body> <!-- body是整个html页面显示的主题内容-->
    hello
</body>
</html>

3.标签介绍

格式： <标签名>封装的数据</标签名>
大小写不铭感
标签拥有自己的属性分为 :
- 基本属性：可以修改简单的样式效果
  例如：背景bgcolor="green"
- 事件属性：可以直接设置事件响应后的代码
  例如：onclick="alert('苏瞳牛逼')"
分为单标签和双标签，单标签例如 br hr
标签语法
不能交叉嵌套，必须正确关闭(闭合)，属性必须有值而且必须加引号，注释不能嵌套

4.常见标签

4.1 第一部分

font 标签：修改字体颜色样式大小，4.0不建议使用了，size 范围1-7
特殊字符 ： < 表示为 &lt (less than) >表示为&gt (great than)
空格 ： html只要的连续的空白字符在页面上之后保留一个，要用空格的特殊字符 &nbsp
hn ：n取1~6，标题标签 h1~h6，默认左对齐，可以设置属性左中右对齐都行
href ：超链接，属性，target属性_self当前页面跳转，_blank新建一个页面跳转，默认当前页面
ul li列表标签：列表标签有序order list和无须unorder list，有个type属性
img标签：显示图片 src设置图片的路径,宽高，图片的边框一般不会太大，alt找不到属性时显示的内容

详细使用情况看下面的代码呀

<!-- 修改字体颜色样式大小，4.0不建议使用了，size 1-7-->
<font color="green", face="宋体", size="7">我是字体标签</font>

<!-- 特殊字符：<为&lt (less than) >为&gt (great than)-->
我是&ltbr/&gt标签
<!-- html只要的连续的空白字符在页面上之后保留一个，要用空格的特殊字符 &nbsp-->
我好&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp帅

<!-- 标题标签 h1~h6，默认左对齐，可以设置属性 左中右对齐都行-->
<h1 align="center">标题1</h1>
<h2>标题2...</h2>

<!-- 超链接，href属性，target属性_self当前页面跳转，_blank新建一个页面跳转，默认当前页面--> 
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

<!-- 列表标签 有序orderlist和无须unorder list， 有个type属性-->
<ul type="none">
    <li>赵四</li>         <!-- list i 列表项-->
    <li>刘能...</li>
</ul>
<ol type="a">            <!-- a b c d...-->
    <li>赵四</li>
    <li>刘能...</li>
</ol>

<!-- img标签:显示图片 src设置图片的路径,宽高，图片的边框一般不会太大，alt找不到属性时显示的内容-->
<img src="../images/picture.jpg" width="200" height="228" border="1" alt="图片找不到"/>

4.2 第二部分

table标签，属性：border加边框，cellspacing单元格间隔
tr 行标签
th头标签
td 单元格标签，属性colspan，rowspan 可以实现跨行跨列的效果（看下面代码）
b 加粗标签
i 是斜体标签
iframe 标签：可以在html页面上打开一个小窗口去加载一个单独的页面，src是要显示的页面路径
div标签：默认独占一行
span标签：它的长度是封装数据的长度
p标签：段落标签，默认会在段落的上方或者下方各空出一行来(如果有就不在空了)

详细使用情况看下面的代码

<!-- 表格，例如两行三列 表格剧中-->
<!-- 属性：border加边框，cellspacing单元格间隔，
tr是行标签，th是头标签，td的单元格标签，b是加粗标签，i是斜体标签-->
<table align="center" width="300" height="200" border="1" cellspacing="0">
    <tr>
        <td align="center"><b>1.1</b></td>  <!--第一行一般是字段名,剧中加粗,有写好的标签th-->
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>
<!-- 表格还能做到跨行跨列的效果，重要！！-->
<!--五行五列，第一行第一列的单元格要跨两列，第二行第一列的单元格要跨两行，第四行第四列单元格跨两行两列-->
<table width="500" height="500" border="1" cellspacing="0">
    <tr>
        <td colspan="2">1.1</td>   <!-- colspan代表第一个单元格要占两个列格子-->
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>   <!-- rowspan代表第一个单元格要占两个行格子-->
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td rowspan="2" colspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>


<!-- iframe可以在html页面上打开一个小窗口去加载一个单独的页面，src是要显示的页面路径-->
<iframe src="hello.html" width="500" height="300"> </iframe>

<!-- 一般用在菜单等,点击超链接就会在创建的iframe小页面上显示了...
    1.在iframe标签中使用name属性
    2.在a标签中的target属性设置iframe的name值--->
<iframe src="hello.html" width="500" height="300" name="abc"> </iframe>
<ul>
    <li><a href="1.html" target="abc">111</a></li>
    <li><a href="2.html" target="abc">222</a></li>
    <li><a href="3.html" target="abc">333</a></li>
</ul>

<!-- div标签默认独占一行
	 span标签它的长度是封装数据的长度
	 p标签段落标签，默认会在段落的上方或者下方各空出一行来(如果有就不在空了)-->
<div>div标签1</div>
<div>div标签2</div>
<div>div标签3</div>
<span>span标签1</span>
<span>span标签2</span>
<p>段落标签1</p>
<p>段落标签2</p>

4.3 第三部分

form标签：表单，action属性是设置服务器的地址，method属性设置提交的方式get(默认)或者post
input标签：单行输入框。属性type可以选择输入的类型：
- input type=text文本输入，input type=password不回显，
- input type=radio是单选注意用name分组,后面加上checked="checked"默认就选上这个
- input type=checkbox是复选框，checked="checked"也可以默认选上
- input type=reset恢复默认值，按钮上的值为重置，value可以修改按钮内容
- input type=submit提交，按钮上的值为提交，value可以修改按钮内容
- input type="button" 按钮
- input type="file" 文件上传
- input type="hidden" 隐藏域，当我们要发生某些信息这些信息不需要用户看到，提交的时候也会发送给服务器，属性value可以设置默认值。
select标签：下拉列表框，selected="selected"默认选中
- option标签是下拉标签的每个选项
textarea标签：多行输入，rows是可以显示几行的高度超过就用滚动条了，cols每行可以显示几个字符，默认值需要写在该标签的中间。

下面来看一个要求：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别(单选)，兴趣爱好(多选)，国际(下拉列表)，隐藏域，自我评价，重置提交…（一般我们把表单项放到table里面，更好看些！！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label02</title>
</head>
<body>

<form action="http://www.baidu.com" method="post">
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr> <!-- 第1行-->
            <td>用户名称：</td>
            <td> <input type="text" value="默认值" name="username"/> </td>
        </tr>

        <tr> <!-- 第2行-->
            <td>用户密码：</td>
            <td> <input type="password" name="password"/> </td>
        </tr>

        <tr> <!-- 第3行-->
            <td>确认密码：</td>
            <td> <input type="password"/> </td>
        </tr>

        <tr> <!-- 第4行-->
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" checked="checked" value="boy"/>男
                <input type="radio" name="sex" value="gird"/>女
            </td>
        </tr>

        <tr> <!-- 第5行-->
            <td>兴趣:</td>
            <td>
                <input type="checkbox" name="hobby" value="java"/>java
                <input type="checkbox" name="hobby" value="C++"/>C++
                <input type="checkbox" name="hobby" value="PHP"/>PHP
            </td>
        </tr>

        <tr> <!-- 第6行-->
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option value="none">--请选择国籍--</option>
                    <option selected="selected" value="CN">中国</option>
                    <option value="USA">美国</option>
                    <option value="Japan">日本</option>
                </select>
            </td>
        </tr>

        <tr> <!-- 第7行-->
            <td>自我描述：</td>
            <td> 
                <textarea rows="10" cols="20" name="desc"/>我才是默认值</textarea>
        	</td>
        </tr>

        <tr> <!-- 第7行-->
            <td align="left"> <input type="reset" value="reset"/> </td>
            <td align="right"> <input type="submit" value="submit"/> </td>
        </tr>
    </table>

    <!--下面是测试的-->
    <input type="button" value="abc"/>  <!--自定义按钮-->
    <input type="file"/> <!--可文件上传-->
    <input type="hidden" name="action" value="longin"/>  <!--隐藏域，页面上看不到-->
</form>

</body>
</html>

小声bb：学后端HTML会这些基本够了，如果你是前端则还需要继续深造！！加油💪

5. GET/POST请求方式

5.1 GET解析

按get提交上面的案例，浏览器地址栏会显示：https://www.baidu.com/?sex=on&action=longin

https://www.baidu.com是action的属性值
?是分隔符，
sex=on&action=longin 请求参数(表单的信息，每项使用& 拼接)

为什么提交单独信息只有隐藏域和sex域呢？数据没有发送服务器的三种情况：

表单项没有name属性值 (所以要想发送到服务器必须带上名字) 下拉列表要写select上，添加上之后，性别和兴趣爱好为什么是on呢？
单选，复选(下拉列表中的option标签) 都要添加value属性，以便于发送给服务器 (否则则发送on,不是有效信息)
表单项不在提交的form标签中

5.2 二者区别

get或者post提交方式都能把信息提交到服务器，区别：

get 浏览器地址栏中的地址是 action属性[+?+请求参数]，请求参数的格式是 name=value&name=value，不安全，提交的信息上面都能看到，它有数值长度的限制
post 浏览器地址栏中的地址只有action的属性值，相对于安全，理论上没有长度的限制