JavaWeb，HTML的学习

已于 2024-01-12 00:14:15 修改
阅读量633 收藏 11
点赞数 12
分类专栏： JavaWeb学习 文章标签： html
于 2024-01-11 23:58:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_79468488/article/details/135327665
版权

关于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;

效果如图：

二狗mao
关注
  • 12
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaWeb学习
ldh18346048164的博客
02-15 559
初学者学习整理JavaWeb相关内容
JavaWeb-HTML
Ego_Ekko的博客
12-31 981
HTML（Hyper Text Markup Language）超文本标记语言，HTML通过标签来标记要显示的网页中的各部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告知浏览器如何显示其中的内容。封装的数据2.标签名大小写不敏感；3.标签拥有自己的属性；1）分为基本属性：bgcolor="red" --bgcolor是背景颜色属性。
JavaWeb --- HTML
乌云的博客
02-28 1870
HTMLHTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等） 跨行跨列
JavaWeb学习总结（期末总结）
Etui۹(･༥･´)و的博客
12-20 6900
本学期的JavaWeb课程课时较多，分为理论课和实验课两部分，学习过程比较坎坷，主要原因是相关技术的原理晦涩难懂。在此之前，我对Web相关的技术也有一定的了解。我大一时开始学习Web开发技术，在大二下学期之前一直都在学习Web前端，在大二下学期开始学习Web后端技术，而JavaWeb是我学习后端开发的起点。
javaweb学习，快速入门
qq_46687832的博客
03-06 630
javaweb学习，快速入门
JavaWeb学习之HTML中的基础标签
m0_55895641的博客
09-29 116
JavaWeb学习之HTML中的基础标签
JavaWeb学习总结
踏雪寻梅
06-12 2094
https://www.cnblogs.com/xdp-gacl/category/574705.html
Javaweb学习2
qq_43890178的博客
01-11 1236
点亮灯泡（这里采用的是替换图片 用到的有img 首先访问图片元素 其次进行改变。获得标签体元素 【每一个标签体相当于数组里的一个元素】，在元素后面加入字符串，首先访问标签体元素。赋值运算符：= ,+= , -= , * = , /= , %=注：不需要定义形参类型，返回值也不需要定义，直接return。算术运算符：+ , - ,* / ,% ,++ , –1）除0和NaN为false，其他数字均为true。2）除空字符串为false，其他字符串均为true。
JavaWeb学习笔记
weixin_47955543的博客
07-31 1846
JavaWeb学习笔记
JavaWeb学习之HTML中表格标签的使用
m0_55895641的博客
09-29 195
JavaWeb学习之HTML中表格标签的使用
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
JavaWeb学习教程文档
04-18
本套文档从基础学起。先从HTML5、CSS、JavaScript到XML、Servlet等等，难度一步步加大，适合基础学习者
JavaWeb阶段学习笔记
12-19
JavaWeb阶段学习笔记,主要记录使用servlet service dao 三层书写简单功能,及过程当中需要的知识点
javaweb商城实战学习案列.zip
12-26
项目概述：这个案例是一个实际的JavaWeb商城项目，涵盖了电商系统的一...这样的资源对于学习JavaWeb开发、实际项目经验的积累以及电商系统的构建都是非常有帮助的。确保在博客中提供清晰而详细的资源描述，以帮助读者正
HTML静态网页成品作业(HTML+CSS+JS)——在线购物商城网页设计制作(4个页面)
weixin_42283461的博客
05-16 703
HTML静态网页成品作业(HTML+CSS+JS)——在线购物商城网页设计制作(4个页面)
HTML静态网页作业(HTML+CSS+JS)——动漫蜡笔小新网页设计制作(4个页面)
weixin_42283461的博客
05-20 298
HTML静态网页作业(HTML+CSS+JS)——动漫蜡笔小新网页设计制作(4个页面)
Web开发——HTML&CSS
最新发布
一切皆是定数的博客
05-20 156
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
HTML常见标签-换行标签-水平线标签
weixin_44201223的博客
05-14 182
换行标签 水平线标签
javaweb基础学习
09-14
欢迎您对JavaWeb基础学习的兴趣。如果您是初学者，我可以为您提供一些入门的建议和学习资源。以下是一些建议： 1. Java基础知识：在学习JavaWeb之前，首先需要掌握Java的基础知识，包括面向对象编程、控制流、集合...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

二狗mao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值