JavaWeb，HTML的学习

关于HTML、CSS、JavaScript

HTML主要用于网页主体结构的搭建

CSS主要用于页面元素美化

JavaScript主要用于页面元素的动态处理

关于HTML

关于超文本 

 关于标记语言

HTML基础结构

  1. html文件是浏览器负责解析和展示。
  2. html文件是纯文本文件，普通编辑工具都可以编辑。

文档声明

<!DOCTYPE html> ：声明此文档是一个html文档，也可以不写。

html文件的根标签

<html> </html>所有的根标签都要在这个标签中间

html根标签下有两个一级子标签：头标签、体标签。

头标签

<head></head> 头标签：定义那些不直接展示在页面主体上但是又很重要的内容（比如：字符集、title、css引入、js引入，等）

体标签

<body></body> 体标签：定义要展示到页面主题的标签

页面标题标签

<title></title> 页面标题的标签，将页面标题写入其中。定义在头标签内。

例：<title>李二狗的JavaWeb学习</title> ，效果如图。

定义字符集标签

<meta charset = '字符集'/> 告诉浏览器用什么字符集对文件解码。通常用UTF-8字符集，定义在头标签内部。

注释

HTML中注释的写法是

<!--注释内容-->

html文件的大概格式如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="字符集">
<title>页面的标题</title>
</head>
<body>
页面的主体
</body>
</html>

HTML概念词汇

标签

代码中的一个<>叫做一个标签。有些标签成对出现，称为双标签。有些标签单独出现，称为单标签。

属性

一般在开始标签中，用于定义标签的一些特征。

文本

双标签中间的文字，包含空格换行等结构。

元素

经过浏览器解析后，每一个完整的标签（标签+属性+文本）可以称为一个元素。

HTML的语法规则

  1. 根标签只能有一个。
  2. 无论是双标签还是单标签都要正确关闭。
  3. 标签可以嵌套但不能交叉嵌套。
  4. 注释不能嵌套。
  5. 属性必须要有值，且值必须加引号，H5中属性名和值相同时可以省略属性值。
  6. HTML中不严格区分字符串使用单双引号。引号的嵌套可以使用单引号和双引号的不同来完成。

常见标签

标题标签

格式：（以一级标签为例）

<h1> (标题内容) </h1>

标题总共有六级，即h1到h6。

h1到h6的显示效果如图：

<!--关于标题标签-->
    <h1>我爱敲代码</h1>
    <h2>我爱敲代码</h2>
    <h3>我爱敲代码</h3>
    <h4>我爱敲代码</h4>
    <h5>我爱敲代码</h5>
    <h6>我爱敲代码</h6>

自然段标签

格式：

<p>
(自然段内容)
</p>

在html中，不会识别换行操作，要将两个自然段分开，要将两个自然段分别用<p></p>括起来。

换行标签

格式：

<br/>  <!--也可以写成<br>-->
<hr/>  <!--也可以写成<hr>-->

<br>是单纯的换行操作

<hr>是带分割线的换行

列表标签

有序列表

列表标签：<ol></ol>

列表项标签：<li></li>

一对列表标签内包含一组有序列表，一对列表项内包含有序列表的一列。

有序列表内，列表中的每一列的开头都有其在列表中的序号。

效果如图：

<ol>
        <li>C语言</li>
        <li>Java</li>
        <li>MySQL数据库</li>
        <li>JavaWeb</li>
</ol>

 

无序列表

列表标签：<ul></ul>

列表项标签：<li></li>

一对列表标签内包含一组无序列表，一对列表项内包含无序列表的一列。

无序列表内，列表中的每一项的开头没有序号，而是有一个黑色的圆点。

效果如图：

<ul>
        <li>C语言</li>
        <li>Java</li>
        <li>MySQL数据库</li>
        <li>JavaWeb</li>
</ul>

 

列表的嵌套

可以在列表内嵌套列表，即在<li></li>内再写列表。

例如：

    <ul>
        <li>C语言
            <ol>
                <li>数据类型</li>
                <li>变量</li>
                <li>流程控制</li>
                <li>数组</li>
                <li>函数</li>
                <li>指针</li>
            </ol>
        </li>
        <li>Java</li>
        <li>MySQL数据库</li>
        <li>JavaWeb</li>
    </ul>

效果如图：

 

超链接标签

格式：

<a></a>

属性：

href 用于定义要跳转的目标资源地址，属性值为指定的网页地址（可以是完整的url，也可以是相对路径或绝对路径）

target 用于定义目标资源的打开方式，属性值为打开方式

打开方式：

_self：在当前窗口打开目标资源

_blank：开启新窗口打开目标资源

代码效果如图：

<a href = "<http://www.atguigu.com>" target="_self">尚硅谷</a>

 

点击尚硅谷文字后就会在此页面跳转到尚硅谷的官网

在同一个树分支中的俩个文件的超链接可以使用相对路径实现，例如：

<a href="有序和无序列表.html" target="_blank">有序和无序列表的代码效果</a>

点击有序列表和无序列表的文字就会再打开一个新的页面跳转到 有序和无序列表.html 的页面

关于相对路径

相对路径的开头可以是 ./或../。./表示当前资源的所在路径，可以省略不写。../表示当前资源的上一层路径，使用时要显式写出。

多媒体标签

图片标签

格式：

<img/>

属性：

src：定义图片的路径

title：定义鼠标悬停时提示的文字

alt：定义加载失败时提示的文字

width：指定图片的宽度，单位为px（像素）

表格标签

<table></table>：一对table标签内包含一个表格

<thead></thead>：代表表头，可以省略不写

<tbody></tbody>：代表表体，可以省略不写

<tfoot></tfoot>：代表表尾，可以省略不写

<tr></tr>：代表一行

<td></td>：代表行内的一格

<th></th>：代表自带加粗和居中效果的td

例如：

<h1 style="text-align: center;">员工信息表</h1>
<table border="2px" style="margin: auto; width: 500px;">
    <thead>
        <tr>
            <th>员工姓名</th>
            <th>员工部门</th>
            <th>员工薪资</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>李四</td>
            <td>10号部门</td>
            <td>10000</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>20号部门</td>
            <td>11000</td>
        </tr>
    </tbody>
</table>

效果如图：

如果省略表头表体表尾标签，则默认都是表体。

如果想让一个格向下多占几行，则在td标签或th标签中加上属性rowspan = “所占的行数”

例如：

<table border="2px" style="margin: auto; width: 500px;">
    <thead>
        <tr>
            <th>员工姓名</th>
            <th>员工部门</th>
            <th>员工薪资</th>
            <th>备注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>李四</td>
            <td>10号部门</td>
            <td>10000</td>
            <td rowspan="3">每人工资涨薪10000块</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>20号部门</td>
            <td>11000</td>
        </tr>
        <tr>
            <td>二狗</td>
            <td>30号部门</td>
            <td>30000</td>
        </tr>
    </tbody>
</table>

效果如图：

让一格向右多占几列也是同理，使用属性colspan = “所占的列数”

例：

<table border="2px" style="margin: auto; width: 500px;">
    <thead>
        <tr>
            <th>员工姓名</th>
            <th>员工部门</th>
            <th>员工薪资</th>
            <th>备注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>李四</td>
            <td>10号部门</td>
            <td>10000</td>
            <td rowspan="5">每人工资涨薪10000块</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>20号部门</td>
            <td>11000</td>
        </tr>
        <tr>
            <td>二狗</td>
            <td>30号部门</td>
            <td>30000</td>
        </tr>
        <tr>
            <td>总人数</td>
            <td colspan="2">3</td>
        </tr>
        <tr>
            <td>职位</td>
            <td colspan="2">后端开发工程师</td>
        </tr>
    </tbody>
</table>

效果如图：

 

表单标签

表单标签是可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务器端发送数据主要的方式之一

<form></from>：form标签，即表单标签，其内部用于定义可以让用户输入信息的表单项标签

属性：

action：用于定义信息提交的服务器的地址

method：用于定义信息提交的方式。get方式：数据会缀到url后，以?作为参数开始的标识。post方式，数据会通过请求体发送，不会缀到url后。

<input/>：主要的表单项标签，可以用于定义表单项

属性：

name：用于定义提交的参数名

type：用于定义表单项类型。类型：text 文本框，password 密码框，submit 提交按钮，reset 重置按钮,radio 单选框

表单项一定要定义name属性，该属性用于明确提交时的参数名

表单项还有value属性，该属性用于明确提交时的实参。不对输入内容进行修改时，提交的实参即为value属性的值。若输入内容，提交的实参即为输入的内容。

表单的提交方式

提交方式定义在method标签中，有post与get

get：

  1. 参数会以键值对的形式放在url后提交 ：url?key=value&key=value……
  2. 数据直接暴露在地址栏上，相对不安全
  3. 地址栏的长度有限制，所以提交的数据量有限
  4. 地址栏上，只能是字符
  5. 相比于post，效率更高。

post：

  1. 参数不默认放到url后
  2. 数据不会放在地址栏上，相对安全
  3. 数据是单独打包通过请求体发送，提交的数据量比较大
  4. 请求体中，可以是字符，也可以是字节数据，可以提交文件
  5. 相比于get，效率更低。

表单项类型

input标签中的表单项的属性：
radio：单选框

多个单选框使用相同的name则就会有互斥效果，即只能选其中的一个。

需要给表单项定义value值，如此被选中的单选框就会将其默认的value值提交出去

在表单项的属性后加上 checked=”true”或checked=”checked”或直接写checked（属性名与属性值不同时，可以省略属性值的定义）之后，在未作选择时，该表单项就会被默认选择

例：

 		<form action="图片标签.html" method="get">
        用户名:<input type="text" name="username"/><br>
        密码:<input type="password" name="userpassword"/><br>
        <input type="radio" name="gender" value="man" checked="true"/>男
        <input type="radio" name="gender"/ value="woman">女<br>
        <input type="submit" value="登录"/>
        <input type="reset" value="清空"/>
    </form>

效果如图：

checkbox：复选框

复选框使用相同的name不会有互斥效果，可以选择多个。

也需要给表单项定义value值，如此被选中的单选框就会将其默认的value值提交出去，选多个表单项时，相应提交多个键值对信息（比如：hobby=basketball&hobby=football&hobby=baseball）。

复选框也可以使用check属性来默认选中。

hidden：隐藏域

不显示在页面上，提交时会携带隐藏域中的信息一起提交。提交一些特定的信息，但是考虑到安全问题或者是用户操作不当时，不希望这些特定的信息发生改变，就可以使用隐藏域。

一些其他的表单项的属性：

readonly：数据设置为只是可读

disable：数据设置为显示但是不提交

input标签的表单项之外的表单项：
textarea 文本域（多行文本框）

格式：


 <textarea></textarea>

textarea表单项也要定义name，但是没有属性value，textarea提交的就是textarea双标签中间的数据

select：下拉框

格式：

<select>
		<option>下拉框中的选项</option>
		<option>下拉框中的选项</option>
		<option>下拉框中的选项</option>
……
</select>

下拉框表单项也要定义name，如果option标签中没有定义value属性，则提交option双标签中间的数据，如果定义了value属性，则提交定义的value属性。

如果在某个选项的option标签中加上selected，此选项就被默认选中

复选框、文本域、下拉框的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录系统</title>
</head>
<body>
    <form action="图片标签.html" method="get">
        用户名:<input type="text" name="username"/><br>
        密码:<input type="password" name="userpassword"/><br>
        <input type="radio" name="gender" value="man" checked="true"/>男
        <input type="radio" name="gender"/ value="woman">女<br>
        <input type="checkbox" name="hobby" value="basketball"/>篮球
        <input type="checkbox" name="hobby" value="football"/>足球
        <input type="checkbox" name="hobby" value="baseball"/>棒球<br>
        所在地: <select name="located">
                    <option value="gan_zhou">赣州</option>
                    <option value="ji_an">吉安</option>
                    <option value="nan_chang">南昌</option>
                    <option value="jiu_jiang">九江</option>
                    <option value="0" selected>请选择</option>
               </select><br>
        个人简介:<br>
        <textarea name="introduction" style="width: 300px;height: 100px;"></textarea>
        <br>
        <input type="submit" value="登录"/>
        <input type="reset" value="清空"/>
    </form>
</body>
</html>

演示效果如图：

布局相关标签

div：属于块元素，自己独占一行

span：属于行内元素，不会自己独占一行

块元素的css样式的宽、高等往往都生效，行内元素的css样式的宽、高等，很多都是不生效的。

div可以将页面的内容分成多块来布局，span用来对行内的内容进行分开编辑，二者配合使用

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录系统</title>
</head>
<body>
    <div style="border: 1px solid red;width: 700px;height: 300px;margin: auto;background-color: antiquewhite;">
        用户登录界面 <span style="font: 25px;color: red;"> 欢迎!</span>
    <form action="图片标签.html" method="get">
        用户名:<input type="text" name="username"/><br>
        密码:<input type="password" name="userpassword"/><br>
        <input type="radio" name="gender" value="man" checked="true"/>男
        <input type="radio" name="gender"/ value="woman">女<br>
        <input type="checkbox" name="hobby" value="basketball"/>篮球
        <input type="checkbox" name="hobby" value="football"/>足球
        <input type="checkbox" name="hobby" value="baseball"/>棒球<br>
        所在地: <select name="located">
                    <option value="gan_zhou">赣州</option>
                    <option value="ji_an">吉安</option>
                    <option value="nan_chang">南昌</option>
                    <option value="jiu_jiang">九江</option>
                    <option value="0" selected>请选择</option>
               </select><br>
        个人简介:<br>
        <textarea name="introduction" style="width: 300px;height: 100px;"></textarea>
        <br>
        <input type="submit" value="登录"/>
        <input type="reset" value="清空"/>
    </form>
    </div>
    <div style="border: 1px solid red;width: 700px;height: 300px;margin: 10px auto;background-color: antiquewhite;">
        用户协议：<a href="./协议.html" target="_self">用户协议</a><br>
        <input type="radio" name="gender" value="yes" checked="true"/>同意
        <input type="radio" name="gender"/ value="no">不同意
    </div>
</body>
</html>

效果如图：

特殊字符

对于HTML代码来说，某些符号是有特殊含义的，如果想显示这些符号，则需要转义。

当想要使用这些字符，使用相应的实体名称或者实体编号进行写入即可。

例：

&lt;h1&gt;一级标题&lt;/h1&gt;

效果如图：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/312890.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

香港Web3：Web3的新热土

香港Web3：Web3的新热土

相关推荐点击查看TechubNews 随着区块链技术的快速发展&#xff0c;Web3的概念逐渐在全球范围内受到关注。作为亚洲的金融中心&#xff0c;香港在Web3领域也展现出了极大的热情和潜力。本文将探讨香港在Web3领域的发展现状、机遇与挑战。 一、香港Web3的发展现状 香港在Web3…
阅读更多...
使用Python爬取小红书笔记与评论（js注入方式获取x-s）

使用Python爬取小红书笔记与评论（js注入方式获取x-s）

文章目录 1. 写在前面2. 分析加密入口3. 使用JS注入4. 爬虫工程化 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感…
阅读更多...
SQL-修改数据

SQL-修改数据

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现错误&am…
阅读更多...
RuntimeError: Placeholder storage has not been allocated on MPS device!解决方案

RuntimeError: Placeholder storage has not been allocated on MPS device!解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
C#核心--实践小项目（贪吃蛇）

C#核心--实践小项目（贪吃蛇）

C#核心实践小项目 -- 贪吃蛇 必备知识点--多脚本文件 &#xff08;可观看CSharp核心--52集进行了解&#xff09; 必备知识点--UML类图 必备知识点--七大原则 贪吃蛇 项目展示 控制方向的是&#xff1a;WSAD 确定键是&#xff1a;J 需求分析&#xff08;UML类图&#xff09…
阅读更多...
书生·浦语大模型实战营-学习笔记2

书生·浦语大模型实战营-学习笔记2

目录 轻松玩转书生浦语大模型趣味Demo1. 大模型及 InternLM 模型介绍2. InternLM-Chat-7B 智能対话 Demo3. Lagent 智能体工具调用 Demo4. 浦语•灵笔图文创作理解 Demo5. 通用环境配置实验记录6. 课后作业 视频地址&#xff1a; (2)轻松玩转书生浦语大模型趣味Demo 文档教程&a…
阅读更多...
视频号下载保姆级攻略：五大神级下载方法揭秘！

视频号下载保姆级攻略：五大神级下载方法揭秘！

今天我要和大家聊聊一个非常有趣的话题&#xff0c;那就是如何下载视频号的视频。据我所知虽然很多人都知道视频号&#xff0c;但却不知道如何玩好视频号&#xff0c;以及怎么下载视频&#xff0c;我知道有些朋友可能对这个话题还不太了解&#xff0c;但是我相信&#xff0c;只…
阅读更多...
从头安装与使用一个docker GPU环境

从头安装与使用一个docker GPU环境

GPU版docker的安装与使用 欢迎使用GPU版docker安装使用说明使用官方教程安装docker新建一个GPU版docker环境调用docker环境执行本地python文件 欢迎使用GPU版docker安装使用说明 使用官方教程安装docker 导入源仓库的GPG key curl -fsSL https://download.docker.com/linux/…
阅读更多...
电脑怎么取消开机密码？教你如何快速取消

电脑怎么取消开机密码？教你如何快速取消

电脑开机密码是保护个人隐私和计算机安全的重要手段&#xff0c;但有时用户可能希望取消这个设置以提高使用便捷性。本文将介绍三种电脑怎么取消开机密码的方法&#xff0c;适用于不同品牌不同类型的电脑&#xff0c;为用户提供更灵活的操作选择。 方法1&#xff1a;使用系统设…
阅读更多...
强迫症福音 格式化代码后的sql语句 CASE WHEN THEN ELSE END 语句如何转为一行显示

强迫症福音 格式化代码后的sql语句 CASE WHEN THEN ELSE END 语句如何转为一行显示

强迫症福音 格式化代码后的sql语句 CASE WHEN THEN ELSE END 语句如何转为一行显示 一、背景二、解决办法三、更多有用的工具 一、背景 在日常开发中&#xff0c;当美化或格式化代码后&#xff0c;CASE WHEN语句会出现换行且不易阅读情况&#xff0c;这给开发造成了一定的不便…
阅读更多...
K8s---存储卷(动态pv和pvc)

K8s---存储卷(动态pv和pvc)

当我要发布pvc可以生成pv&#xff0c;还可以共享服务器上直接生成挂载目录。pvc直接绑定pv。 动态pv需要两个组件 1、卷插件&#xff1a;k8s本生支持的动态pv创建不包括nfs&#xff0c;需要声明和安装一个外部插件 Provisioner: 存储分配器。动态创建pv,然后根据pvc的请求自动…
阅读更多...
压测工具ab

压测工具ab

Apache Benchmark(简称ab) 是Apache安装包中自带的压力测试工具 &#xff0c;简单易用, Apache的ab命令模拟多线程并发请求&#xff0c;测试服务器负载压力&#xff0c;也可以适用于其他服务&#xff1a;nginx、lighthttp、tomcat、IIS等其它Web服务器的压力 采用平台&#xf…
阅读更多...
2-认识小程序项目

2-认识小程序项目

基本结构 myapp├─miniprogram┊ └──pages┊ ┊ └──index┊ ┊ ┊ ├──index.json┊ ┊ ┊ ├──index.ts┊ ┊ ┊ ├──index.wxml┊ ┊ ┊ └──index.wxss┊ ┊ └──logs┊ ┊ ├──index.json┊ ┊ ├──index.ts┊ ┊ ├…
阅读更多...
面向对象的装饰器

面向对象的装饰器

【 1 】什么是property property是一种特殊的属性&#xff0c;访问它时会执行一段功能&#xff08;函数&#xff09;然后返回值 【 2 】使用方法和具体实例 面向对象的装饰器是一种在面向对象编程中用于修改类或方法行为的技术。装饰器提供了一种灵活的方式。可以在不修改原…
阅读更多...
58.leetcode 最后一个单词的长度

58.leetcode 最后一个单词的长度

一、题目 二、解答 1. 思路 分2种情况 第一种情况只有一个单词&#xff0c;不包含空格&#xff1a;这种情况直接返回单词本身的长度。第二种情况包含空格&#xff1a;先去掉首尾的空格&#xff0c;根据空格切割字符串生成一个字符串列表&#xff0c;返回倒数第一个索引位置字…
阅读更多...
k8s集群配置NodeLocal DNSCache

k8s集群配置NodeLocal DNSCache

一、简介 当集群规模较大时&#xff0c;运行的服务非常多&#xff0c;服务之间的频繁进行大量域名解析&#xff0c;CoreDNS将会承受更大的压力&#xff0c;可能会导致如下影响&#xff1a; 延迟增加&#xff1a;有限的coredns服务在解析大量的域名时&#xff0c;会导致解析结果…
阅读更多...
大模型学习与实践笔记（五）

大模型学习与实践笔记（五）

一、环境配置 1. huggingface 镜像下载 sentence-transformers 开源词向量模型 import os# 设置环境变量 os.environ[HF_ENDPOINT] https://hf-mirror.com# 下载模型 os.system(huggingface-cli download --resume-download sentence-transformers/paraphrase-multilingual-…
阅读更多...
网站ICP备案和公安备案教程

网站ICP备案和公安备案教程

由于最近华为云那边的服务器到期了&#xff0c;而续费的价格比较贵一点&#xff0c;刚好阿里云这边有活动就入手了一台&#xff0c;但是将网站迁移过来后发现又要进行ICP备案&#xff0c;那就备案呗。但是备案完成之后发现还有一个公安备案&#xff0c;真让人头大啊... 很多人也…
阅读更多...
怎么挑选一体化污水处理设备

怎么挑选一体化污水处理设备

选择一体化污水处理设备是一个关键决策&#xff0c;它直接影响到污水处理系统的效能和运行成本。随着环保意识的日益提高&#xff0c;各种污水处理设备也不断地涌现出来。那么&#xff0c;在众多选项中&#xff0c;如何挑选一体化污水处理设备&#xff1f;本文将为您提供一些建…
阅读更多...
17- Echarts 配置系列之：单轴 singleAxis

17- Echarts 配置系列之：单轴 singleAxis

singleAxis&#xff1a; 用于展示只有一个数据维度的数据。它通常用于展示时间序列数据或者数值序列数据。 对于单轴的应用和绘制&#xff0c;其实就相当于我们平时的直角坐标系少一个 X 或者 Y &#xff0c;然后进行图形绘制。 注意&#xff1a; 1.在使用单轴时&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023