1.HTML学习笔记（内含web绝对路径和相对路径理解）

最新推荐文章于 2023-08-01 09:37:29 发布

小驰驰呕吼**

最新推荐文章于 2023-08-01 09:37:29 发布

阅读量328

点赞数 2

分类专栏： JAVA WEB

本文链接：https://blog.csdn.net/weixin_43328054/article/details/107623008

版权

JAVA WEB 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML概念

概念

超文本标记语言，主要通过HTML标签对网页中的文本、图片、声音等内容进行描述。

.html和.jsp文件的区别

html：超文本标记语言，静态页，纯粹的HTML语言,只能在客户端的浏览器上使用
.jsp/.php/.asp：开发的时候也是用html语言写的，动态页，存放在服务器，在客户端请求时，根据客户请求的需要，传给客户端相应的网页。
注：Tomcat server网站服务器：在服务器向客户的浏览器发送数据的时候，采用一种伪静态技术。

网页结构

<html>      根标签
   <head>   头标签
      <title></title>   标题标签
   </head>
   <body>  主题标签
   </body>
</html>

html标签：作用：所有html中标签的一个根节点
head标签：作用：用于存放：title,metal,base,style,script,link 注意在head标签中必须设置title标签（实现相关配置：汉字编码，搜索引擎优化，响应式布局配置，css配置…）
title标签：作用：让页面拥有一个属于自己的标题
body标签：作用：页面的主体部分，用于存放所有的html标签：p,h,a,b,u,i,s,em,dei,ins,strong,img

HTML标签属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。
<标签名属性1=“属性值1” 属性2=“属性值2” …> 内容 </标签名>

标签可以拥有多个属性，必须写在开始标签中，位于标签名后
属性之间不分先后顺序，标签名和属性、属性与属性之间均以空格分开
任何标签的属性都有默认值，省略该属性则取默认值

HTML标签总结

排版标签

标题标签：

标题（Heading）是通过h1-h6等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。

align属性：对齐；可选（left，center，right）
段落标签：

段落是通过 p 标签定义的。

水平线标签：

<hr />标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。
换行标签：

<br/>

div和span标签（重点）

图像标签img

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：

  <img src="图像URL" />

路径问题：
在web中分为相对路径和绝对路径：
相对路径：
. 表示当前文件所在目录
… 表示当前文件所在上一级目录
文件名表示当前文件所在目录的文件，相当于./文件名 ./可以省略
绝对路径：
正确格式：http://ip:port/工程名/资源路径
错误格式：盘符：/目录/文件名
解释如下：
在这里插入图片描述

下面是图像标签的属性：
在这里插入图片描述

连接标签

基本语法：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href 属性规定链接指向的页面的 URL。
target属性规定在何处打开链接文档。
下图是target的具体属性值：
在这里插入图片描述

注释标签

<!-- 注释语句 -->

列表标签

无序列表 ul ：
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于

标签。每个列表项始于
。
浏览器显示如下：
type=“none”可以修改列表项前面的符号，none表示去掉小圆点注：有的浏览器无效

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

注意：ul标签只能放li标签
li标签中可以存放所有标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表ol：
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于

标签。每个列表项始于
标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

表格

table：表格标签
border：设置表格边框
width：设置表格宽度
height：设置表格高度
cellspacing：设置单元格间距（注：间距为零是两条线紧挨着，并不是重合）
tr: 行标签
th：表头标签
td：单元格标签
aligh：设置单元格文本对齐方式
b：加粗标签

表单

概念：表单就是html页面中，用来收集用户信息的所有元素的集合，然后把这些信息发送给服务器。

<%--
  Created by IntelliJ IDEA.
  User: Adminisrator
  Date: 2020/8/8
  Time: 16:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <form>
        用户名称：<input type="text" value="默认值"/><br/>
        用户密码：<input type="password"/><br/>
        确认密码：<input type="password"/><br/>
        性别：<input type="radio" name="sex" />男<input type="radio" name="sex" checked="checked"/>女<br/>  <!--用name属性设置他们为一组 checked="checked"表示默认选中-->
        兴趣爱好：<input type="checkbox"/>Java <input type="checkbox"/>Python <input type="checkbox"/>c<br/>
        国籍：<select>
                <option>请选择国籍</option>
                <option>中国</option>
                <option>美国</option>
                <option>日本</option>
              </select><br/>
        自我评价：<textarea rows="10" cols="20"></textarea><br/>
        重置：<input type="reset"/> <!--value属性修改上面的文本-->
        提交：<input type="submit"/><br/>
        文件：<input type="file"/>
        <%--input type="hidden" 是隐藏域  当我们要发送信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器） --%>
    </textarea>
    </form>
</body>
</html>

实现效果如下：
在这里插入图片描述
可以看到上面实现的效果不太好看，所以接下来通过表单和表格结合实现良好的页面效果。

<%--
  Created by IntelliJ IDEA.
  User: Adminisrator
  Date: 2020/8/8
  Time: 16:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>用户名称：</td>
                <td><input type="text" value="默认值"/></td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td><input type="password"/></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password"/></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="sex" />男<input type="radio" name="sex" checked="checked"/>女</td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td><input type="checkbox"/>Java <input type="checkbox"/>Python <input type="checkbox"/>c</td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select>
                        <option>请选择国籍</option>
                        <option>中国</option>
                        <option>美国</option>
                        <option>日本</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td><textarea rows="10" cols="20"></textarea></td>
            </tr>
            <tr>
                <td>重置：</td>
                <td><input type="reset"/></td>
            </tr>
            <tr>
                <td>提交：</td>
                <td> <input type="submit"/></td>
            </tr>
            <tr>
                <td>文件：</td>
                <td> <input type="file"/></td>
            </tr>

        </table>

    </form>
</body>
</html>

实现效果：
在这里插入图片描述

表单提交

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

iframe框架标签（用双标签）

iframe标签可以在html页面上，打开一个小窗口，去加载一个单独的页面。

iframe和a标签组合使用的步骤，点击a标签跳转的内容显示在iframe里面

1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的属性值

特殊符号的处理方法

在这里插入图片描述

其他标签

div 标签：默认独占一行
span标签：他的长度是封装数据的长度
p段落标签：默认会在段落的上方或下方空出一行来（如果已经有了就不再空）
一般以上标签对文字进行封装。

小驰驰呕吼**

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1.HTML学习笔记（内含web绝对路径和相对路径理解）

HTML概念概念超文本标记语言，主要通过HTML标签对网页中的文本、图片、声音等内容进行描述。.html和.jsp文件的区别html：超文本标记语言，静态页，纯粹的HTML语言,只能在客户端的浏览器上使用.jsp/.php/.asp：开发的时候也是用html语言写的，动态页，存放在服务器，在客户端请求时，根据客户请求的需要，传给客户端相应的网页。注：Tomcat server网站服务器：在服务器向客户的浏览器发送数据的时候，采用一种伪静态技术。网页结构<html> 根标
复制链接

扫一扫